【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli

希望我们每个人都能找到属于自己的花期,不急不躁,静等风来。

今天打算用 Docusaurus 开始搭建自己的知识库,之前早已有此想法,遗憾的是没有坚持下来。

这次借助这个机会,也计划将自己【每天学习一点点】系列整理在自己的知识库中,方便大家查找。

在使用脚手架命令搭建知识库的时候,看到了一堆提示,以及交互式的功能,于是好奇这个是如何实现的呢?(毕竟程序都是人写的,我们可以学习一下实现方式,有朝一日在搭建自己好用好玩的工具库时,可能会有很多参考的意义)

从输入这npx create-docusaurus@latest yongzl-knowledge classic这条命令到项目模板下载下来到本地,中间发生了什么?

一探究竟

npx create-docusaurus@latest yongzl-knowledges classic

1. 从vue开始

由于平时用的最多的还是创建vue项目,而创建vue项目常用的脚手架命令如下(vue官方推荐使用如下命令创建一个vue项目)

工具链 | Vue.js (vuejs.org)

npm create vue@latest

2. npm create 是什么?

结论:npm create 等同于 npm init

输入 npm create --help 可以看到,npm create其实就是npm init的一个别名,于是试了一下创建vue-vite项目的npm create vue改为npm init vue

输入npm init --help 可以看到相同的帮助手册

# npm create vue

D:\99_myprojects>npm create --help
Create a package.json file

Usage:
npm init <package-spec> (same as `npx <package-spec>`)
npm init <@scope> (same as `npx <@scope>/create`)

Options:
[--init-author-name <name>] [--init-author-url <url>] [--init-license <license>]
[--init-module <module>] [--init-version <version>] [-y|--yes] [-f|--force]
[--scope <@scope>]
[-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
[-ws|--workspaces] [--no-workspaces-update] [--include-workspace-root]

aliases: create, innit   // 关键在这里,npm init的别名,包含create,可能不同的开发者不同的习惯,所以用npm create和npm init都一样

Run "npm help init" for more info

D:\99_myprojects>

又由于 npm init (same as `npx `),所以不妨试一试 npx create-vue,可以看到结果是一样的

3. npm init如何使用?

npm-init | npm Docs (npmjs.com)

3.1 npm init / npm init -y 创建一个package.json文件

If the initializer is omitted (by just calling npm init), init will fall back to legacy init behavior. It will ask you a bunch of questions, and then write a package.json for you. It will attempt to make reasonable guesses based on existing fields, dependencies, and options selected. It is strictly additive, so it will keep any fields and values that were already set. You can also use -y/ --yes to skip the questionnaire altogether. If you pass --scope, it will create a scoped package.

3.2 npm init ⭐⭐⭐

npm init  can be used to set up a new or existing npm package.

initializer in this case is an npm package named create-, which will be installed by npm-exec, and then have its main bin executed -- presumably creating or updating package.json and running any other initialization-related operations.

Note: if a user already has the create- package globally installed, that will be what npm init uses. If you want npm to use the latest version, or another specific version you must specify it:

 - npm init foo@latest # fetches and runs the latest create-foo from the registry

 - npm init foo@1.2.3 # runs create-foo@1.2.3 specifically

总结一句话:

npm create vue === npm init vue === npm exec create-vue

而create-initializer对应的npm package包create-vue可以从上面的图里发现,已经被安装到我们本地了(create-vue@3.9.2)

4. npm exec

If the package has a single entry in its bin field in package.json, or if all entries are aliases of the same command, then that command will be used.

从npm的文档中可以看到,npm exec是去找package.json中的bin配置项,找到对应的入口文件并执行

从create-vue源代码中可以看到,对应的入口文件是outfile.cjs,于是执行该文件

5. npx

参考:npx | npm Docs (npmjs.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/393910.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Windows编程环境配置!

喜欢的话麻烦大家多点点关注&#xff0c;谢谢&#xff01; 原文地址&#xff1a;Windows编程环境配置&#xff01; - Pleasure的博客 下面是正文内容&#xff1a; 前言 近期闲来无事&#xff0c;就想着把Windows系统中的环境给完善整理一下。方便后续码字时的不时之需。 正文…

keep-alive 的简单使用

vue-router 的嵌套与模块化 router 实例中增加 children 属性&#xff0c;形成层级效果。App.vue 中的 router-view 承载的是 router 实例最外层的路由对象&#xff0c;如 /login、/404 等PageHome.vue 中的 router-view 承载的是 children 中的路由对象&#xff0c;如 /home、…

GIS分析和摄影测量进行屋顶太阳能潜力评估

目前,不可再生的能源资源有限,而减少全球变暖的想法使可再生能源的利用成为当务之急。其中,太阳能作为最清洁、最丰富的可再生能源备受关注。此外,成本的日益降低也使太阳能成为一种极具吸引力的能源。然而,为了从太阳能中获得最大利益,必须考虑各种标准,并选择合适的区…

单片机学习笔记---AD/DA工作原理(含运算放大器的工作原理)

目录 AD/DA介绍 硬件电路模型 硬件电路 运算放大器 DA原理 T型电阻网络DA转换器 PWM型DA转换器 AD原理 逐次逼近型AD转换器 AD/DA性能指标 XPT2046 XPT2046时序 AD/DA介绍 AD&#xff08;Analog to Digital&#xff09;&#xff1a;模拟-数字转换&#xff0c;将模拟…

【maya 入门笔记】基本视图和拓扑

1. 界面布局 先看基本窗口布局&#xff0c;基本窗口情况如下&#xff1a; 就基本窗口布局的情况来看&#xff0c;某种意义上跟blender更像一点&#xff08;与3ds max相比&#xff09;。 那么有朋友就说了&#xff0c;玛格基&#xff0c;那blender最下面的时间轴哪里去了&…

使用 cgroup 时踩过的坑

1 cgroup 介绍 1.1 cgroup 介绍 cgroup 全称 control group&#xff0c;控制组。通过 cgroup 可以限制应用使用的资源&#xff0c;资源包括 cpu、内存、磁盘 io、网络等。 工作中经常使用的 docker 容器就使用了 cgroup 进行资源限制和隔离&#xff0c;cgroup 是 docker 的基…

最长子串和回文子串相关的算法题解

这里写目录标题 一、3. 无重复字符的最长子串二、5. 最长回文子串三、647. 回文子串四、516. 最长回文子序列 一、3. 无重复字符的最长子串 中等 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s “abcabcbb” 输出: 3 解释:…

代码检测规范和git提交规范

摘要&#xff1a;之前开发的项目&#xff0c;代码检测和提交规范都是已经配置好的&#xff0c;最近自己新建的项目就记录下相关配置过程。 1. ESlint配置 2013年6月创建开源项目&#xff0c;提供一个插件化的JavaScript代码检测工具&#xff0c;创建项目是生成的eslintrc.js文…

Python之:如何使用双重for循环输出九九乘法表?

文章目录 前言源代码 前言 如何用for双重循环输出九九乘法表&#xff1f;教程来咯&#xff01; 源代码 代码如下&#xff1a; for i in range(1, 10):for j in range(1, i1):print(f{j}{i}{i*j}\t, end)print()你学会了吗&#xff1f;效果如下&#xff1a; 想看详解&#…

全志平台R329 智能音响编译烧录方法

全志R329编译烧录方法 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)&#xff1f;可加我微信hezkz17, 本群提供音频技术答疑服务&#xff0c;群赠送语音信号处理降噪算法&#xff0c;蓝牙耳机/音响音频&#xff0c;DSP音频项目核心开发资料, 一烧录 二 编译方法 …

STM32-开发板介绍

市面的开发板有很多&#xff0c;博主有幸了解到一款集成度较高的开发板&#xff0c;朗峰STM32F103RCT6&#xff0c;知名度不高&#xff0c;性价比很高&#xff0c;这是目前唯一一款集成了大量传感器和功能模块的高集成度开发板。 巨大的优势在于&#xff0c;传感器和功能模块的…

2024.2.18

使用fgets统计给定文件的行数 #include<stdio.h> #include<string.h> int main(int argc, const char *argv[]) {FILE *fpNULL;if((fpfopen("./test.txt","w"))NULL){perror("open err");return -1;}fputc(h,fp);fputc(\n,fp);fput…

浅析Linux设备驱动:IO端口和IO内存

文章目录 概述IO端口和IO内存的区别 IO资源管理IO资源类型IO端口资源IO内存资源 IO资源分配 IO端口访问IO端口操作函数 IO内存访问IO内存操作函数 相关参考 概述 在计算机系统中&#xff0c;外部设备通常会提供一组寄存器或内存用于处理器配置和访问设备功能。这些寄存器或内存…

介绍7款免费的最佳地图/导航/定位/GIS开源项目

文章目录 1、xdh-map新德汇地图应用类库1.1、独立引用1.2、与MyUI结合使用1.3、快速上手1.3.1、采用项目工程模板创建项目【推荐】1.3.2、 调用组件库功能 2、蚂蚁金服AntV-L7地理空间数据可视分析引擎2.1、AntV-L7简介2.2、核心特性2.3、支持丰富的图表类型2.4、如何使用2.4.1…

windows 启动和关闭mysql

1)打开我的电脑-->2)在左边文件中右键此电脑--> 3)点击管理-->4)点击服务和应用程序-->5)点击服务-->6)查找自己MySQL名称 右击 启动或者关闭

一、直方图相关学习

1、灰度直方图 1.1 基本概念和作用 表示图像中每个灰度级别的像素数量。用于分析图像的亮度分布情况。 1.2 代码示例 参数介绍 hist cv2.calcHist(images, channels, mask, histSize, ranges, hist, accumulate)-images&#xff1a;输入图像的列表。对于灰度图像&#xff0…

vue3-渲染机制

渲染机制 Vue 是如何将一份模板转换为真实的 DOM 节点的&#xff0c;又是如何高效地更新这些节点的呢&#xff1f;我们接下来就将尝试通过深入研究 Vue 的内部渲染机制来解释这些问题。 虚拟 DOM 你可能已经听说过“虚拟 DOM”的概念了&#xff0c;Vue 的渲染系统正是基于这…

阿里云香港轻量应用服务器是什么线路?cn2?

阿里云香港轻量应用服务器是什么线路&#xff1f;不是cn2。 阿里云香港轻量服务器是cn2吗&#xff1f;香港轻量服务器不是cn2。阿腾云atengyun.com正好有一台阿里云轻量应用服务器&#xff0c;通过mtr traceroute测试了一下&#xff0c;最后一跳是202.97开头的ip&#xff0c;1…

317. 多关键字排序

/** Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.*/package ahwoj;import java.util.ArrayList; import java.util.Comparator; import java.util.List; import java.util.Scanner;/*** 题目说排序关键字优先级依次降低&#xff0c;那就是说&…

C 语言 ConsoleRogueLike 控制台肉鸽游戏 DEVC++ VS2022都可用

使用 C 语言和 windows 的键盘检测函数和延迟函数&#xff0c;开发的控制台 roguelike 游戏 点开 .exe 文件立即进入游戏 AWSD 移动 J 攻击 K 加成buff 没有结束条件&#xff0c;除非碰到敌人。 其他模块功能还没来得及开发 author : 民用级脑的研发记录 DEVC 项目工程代码副本…