【每天学习一点点 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 vueD:\99_myprojects>npm create --help
Create a package.json fileUsage:
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 infoD:\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)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java面试多线程篇

文章说明 在文档中对所有的面试题都进行了难易程度和出现频率的等级说明 星数越多代表权重越大&#xff0c;最多五颗星&#xff08;☆☆☆☆☆&#xff09; 最少一颗星&#xff08;☆&#xff09; 1.线程的基础知识 1.1 线程和进程的区别&#xff1f; 难易程度&#xff1a;☆☆…

代码随想录刷题笔记 DAY 29 | 非递减子序列 No.491 | 全排列 No.46 | 全排列 II No. 47

文章目录 Day 2901. 非递减子序列&#xff08;No. 491&#xff09;1.1 题目1.2 笔记1.3 代码 02. 全排列&#xff08;No. 46&#xff09;2.1 题目2.2 笔记2.3 代码 03. 全排列 II&#xff08;No. 47&#xff09;3.1 题目3.2 笔记3.3 代码 Day 29 01. 非递减子序列&#xff08;…

UEditorPlus v3.8.0 文档导入支持直接粘贴 Markdown 格式,已知问题修复

UEditor 是由百度开发的所见即所得的开源富文本编辑器&#xff0c;基于MIT开源协议&#xff0c;该富文本编辑器帮助不少网站开发者解决富文本编辑器的难点。 UEditorPlus 是有 ModStart 团队基于 UEditor 二次开发的富文本编辑器&#xff0c;主要做了样式的定制&#xff0c;更…

大模型LLM训练显存消耗详解

参考论文&#xff1a;ZeRO: Memory Optimizations Toward Training Trillion Parameter Models 大模型的显存消耗一直都是面试常见的问题&#xff0c;这次我就彻彻底底的根据论文ZeRO中的调研和分析做一次分析 显存消耗的两个部分&#xff1a;Model States&#xff08;跟模型的…

离线数仓(三)【业务日志采集平台搭建】

前言 上一篇我们搭建完了用户行为日志数据的采集平台&#xff0c;其实也就是用两个 flume 采集数据到Kafka 中&#xff08;这种结构只有 source 和 channel 没有 sink&#xff09; 。离线数仓中的数据除了用户日志&#xff0c;还有就是业务数据了。 1、电商业务简介 1.1 电商…

Mac软件打开提示:已损坏,无法打开。您应该将它移到废纸娄 怎么解决?

新入手的苹果电脑打开软件出现&#xff1a;“已损坏&#xff0c;无法打开。您应该将它移到废纸娄” 或 “已损坏&#xff0c;打不开。推出磁盘映像”。这个怎么解决&#xff1f; 第一部分&#xff1a;&#xff08;注意&#xff1a;任何来源打开过了的&#xff0c;就直接去看下…

第三百五十三回

文章目录 1. 概念介绍2. 使用方法2.1 获取所有时区2.2 转换时区时间 3. 示例代码4. 内容总结 我们在上一章回中介绍了"分享一些好的Flutter站点"相关的内容&#xff0c;本章回中将介绍timezone包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在…

宠物赛道都卷出了哪些花样?媒介盒子分享

如今的宠物市场&#xff0c;已经从让宠物吃饱喝足的基本生理需求&#xff0c;拓展到五花八门的精神需求&#xff0c;与“马斯洛需求定理”高度一致。商家们看到宠物经济的潜力&#xff0c;不再满足于给人类造节&#xff0c;给毛孩子造节也是重中之重&#xff0c;今天媒介盒子就…

AJAX——HTTP协议

1 HTTP协议-请求报文 HTTP协议&#xff1a;规定了浏览器发送及服务器返回内容的格式 请求报文&#xff1a;浏览器按照HTTP协议要求的格式&#xff0c;发送给服务器的内容 1.1 请求报文的格式 请求报文的组成部分有&#xff1a; 请求行&#xff1a;请求方法&#xff0c;URL…

巨量广告测素材方法分享,如何拿到起量参考数据

测素材&#xff0c;测的是什么&#xff1f; 测素材只有两个目的&#xff1a; 1&#xff1a;测出跑量素材—方向 2&#xff1a;测出跑量素材—数据 方向对投手来说不是核心&#xff0c;从系统和投放的角度把结果数据给做素材的人讲到位就OK 数据是重点&#xff0c;投手一定…

【COMP337 LEC 5-6】

LEC 5 Perceptron &#xff1a; Binary Classification Algorithm 8 感应器是 单个神经元的模型 突触连接的强度取决于接受外部刺激的反应 X input W weights a x1*w1x2*w2....... > / < threshold Bias MaxIter is a hyperparameter 超参数 which has to be chosen…

网络防御保护——防火墙综合实验

一.实验拓扑 二.实验要求 1.办公区设备可以通过电信和移动两条链路上网(多对多的nat&#xff0c;并且需要保留一个公网ip不能用来转换)。 2.分公司设备可以通过移动链路和电信链路访问到dmz区域的http服务器。 3.分公司内部客户端可以通过公网地址访问到内部服务器。 4.FW1和FW…

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

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

【Gitea】配置 Push To Create

引 在 Git 代码管理工具使用过程中&#xff0c;经常需要将一个文件夹作为仓库上传到一个未创建的代码仓库。如果 Git 服务端使用的是 Gitea&#xff0c;通常会推送失败。 PS D:\tmp\git-test> git remote add origin http://192.1.1.1:3000/root/git-test.git PS D:\tmp\g…

OpenHarmony—UIAbility组件与UI的数据同步

基于HarmonyOS的应用模型&#xff0c;可以通过以下两种方式来实现UIAbility组件与UI之间的数据同步。 使用EventHub进行数据通信&#xff1a;基于发布订阅模式来实现&#xff0c;事件需要先订阅后发布&#xff0c;订阅者收到消息后进行处理。使用globalThis进行数据同步&#…

【数据结构与算法】递归、回溯、八皇后 一文打尽!

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…

Vue3+Vite+TS+Pinia+ElementPlus+Router+Axios创建项目

目录 初始项目组成1. 创建项目1.1 下载项目依赖1.2 项目自动启动1.3 src 别名设置vite.config.ts配置文件tsconfig.json配置若新创项目ts提示 1.4 运行测试 2. 清除默认样式2.1 样式清除代码下载2.2 src下创建公共样式文件夹style2.3 main.js中引入样式2.4 安装sass解析插件 2.…

SNAT 与 DNAT

1.SNAT 1.1 SNAT 定义 SNAT 又称源地址转换。源地址转换是内网地址向外访问时&#xff0c;发起访问的内网ip地址转换为指定的ip地址&#xff08;可指定具体的服务以及相应的端口或端口范围&#xff09;&#xff0c;这可以使内网中使用保留ip地址的主机访问外部网络&#xff…

Leetcode 145.二叉树的后序遍历

题目 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的 后序遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[3,2,1] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&#xff1a;root…

应用回归分析:岭回归

岭回归&#xff0c;也称为Tikhonov正则化&#xff0c;是一种专门用于处理多重共线性问题的回归分析技术。多重共线性是指模型中的自变量高度相关&#xff0c;这种高度的相关性会导致普通最小二乘法&#xff08;OLS&#xff09;估计的回归系数变得非常不稳定&#xff0c;甚至无法…