希望我們每個人都能找到屬于自己的花期，不急不躁，靜等風(fēng)來。
今天打算用 Docusaurus 開始搭建自己的知識庫，之前早已有此想法，遺憾的是沒有堅持下來。
這次借助這個機會，也計劃將自己【每天學(xué)習(xí)一點點】系列整理在自己的知識庫中，方便大家查找。
在使用腳手架命令搭建知識庫的時候，看到了一堆提示，以及交互式的功能，于是好奇這個是如何實現(xiàn)的呢？（畢竟程序都是人寫的，我們可以學(xué)習(xí)一下實現(xiàn)方式，有朝一日在搭建自己好用好玩的工具庫時，可能會有很多參考的意義）
從輸入這npx create-docusaurus@latest yongzl-knowledge classic這條命令到項目模板下載下來到本地，中間發(fā)生了什么？
一探究竟
npx create-docusaurus@latest yongzl-knowledges classic1. 從vue開始
由于平時用的最多的還是創(chuàng)建vue項目，而創(chuàng)建vue項目常用的腳手架命令如下（vue官方推薦使用如下命令創(chuàng)建一個vue項目）
工具鏈 | Vue.js (vuejs.org)
npm create vue@latest2. npm create 是什么？
結(jié)論：npm create 等同于 npm init
輸入 npm create --help 可以看到，npm create其實就是npm init的一個別名，于是試了一下創(chuàng)建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 // 關(guān)鍵在這里，npm init的別名，包含create，可能不同的開發(fā)者不同的習(xí)慣，所以用npm create和npm init都一樣
Run "npm help init" for more info
D:\99_myprojects>
又由于 npm init (same as `npx `)，所以不妨試一試 npx create-vue，可以看到結(jié)果是一樣的
3. npm init如何使用？
npm-init | npm Docs (npmjs.com)
3.1 npm init / npm init -y 創(chuàng)建一個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
總結(jié)一句話：
npm create vue === npm init vue === npm exec create-vue
而create-initializer對應(yīng)的npm package包create-vue可以從上面的圖里發(fā)現(xiàn)，已經(jīng)被安裝到我們本地了（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配置項，找到對應(yīng)的入口文件并執(zhí)行
從create-vue源代碼中可以看到，對應(yīng)的入口文件是outfile.cjs，于是執(zhí)行該文件
5. npx文章來源：http://www.zghlxwxcb.cn/news/detail-835670.html
參考：npx | npm Docs (npmjs.com)文章來源地址http://www.zghlxwxcb.cn/news/detail-835670.html
到了這里，關(guān)于【每天學(xué)習(xí)一點點 day04】工程化 npm create 腳手架 create-vue, vue-cli 執(zhí)行原理① - npm cli的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
