希望我们每个人都能找到属于自己的花期,不急不躁,静等风来。
今天打算用 Docusaurus 开始搭建自己的知识库,之前早已有此想法,遗憾的是没有坚持下来。
这次借助这个机会,也计划将自己【每天学习一点点】系列整理在自己的知识库中,方便大家查找。
在使用脚手架命令搭建知识库的时候,看到了一堆提示,以及交互式的功能,于是好奇这个是如何实现的呢?(毕竟程序都是人写的,我们可以学习一下实现方式,有朝一日在搭建自己好用好玩的工具库时,可能会有很多参考的意义)
一探究竟
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 --help 可以看到,npm create其实就是npm init的一个别名,于是试了一下创建vue-vite项目的npm create vue改为npm init vue
# 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文件
3.2 npm init ⭐⭐⭐
总结一句话:
而create-initializer对应的npm package包create-vue可以从上面的图里发现,已经被安装到我们本地了(create-vue@3.9.2)
4. npm exec
从npm的文档中可以看到,npm exec是去找package.json中的bin配置项,找到对应的入口文件并执行
从create-vue源代码中可以看到,对应的入口文件是outfile.cjs,于是执行该文件
5. npx
参考:npx | npm Docs (npmjs.com)