因为自身对脚手架有些许趣味, 所以我就钻研了, 而后还在编写lerna相干的文章, 喜爱的话就点个赞吧
node 脚手架原理
以vue-cli为例子
vue --help零碎是怎么辨认进去vue这个变量
通过which vue命令能够找到
which vue/c/Users/Administrator/AppData/Roaming/npm/vue进入npm目录咱们能够看到 咱们通过npm i -g [pageages]装置的都在该目录下
关上vue.cmd文件(还有一个文件为vue)
@IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "%~dp0\node_modules\@vue\cli\bin\vue.js" %*) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node "%~dp0\node_modules\@vue\cli\bin\vue.js" %*)尽管不是很分明, 然而咱们大略能猜出来\node_modules\@vue\cli\bin\vue.js就是咱们运行的命令解析文件
进入\node_modules\@vue\cli\bin目录中
node ./vue.js --help咱们会发现跟vue --help一样能够正当推断,零碎通过vue.cmd执行了下面的命令
关键在于为什么零碎不通过增加node前缀就能够间接寻找到vue;
关上vue.js文件
#!/usr/bin/env node....#!/usr/bin/env node就是要害, 该行能够帮忙咱们间接寻找到零碎变量node, 从而突然前缀
npm 发包(脚手架包)
通过npm官网注册账号,
运行npm login命令登录后, 咱们能够将新建文件夹, 进入文件夹
npm init通过咱们能够公布库的状况下指定package.json中main字段即可
然而咱们想要公布能够像vue-cli通过vue命令解析的包,就想要增加
增加package.json的bin字段来指定咱们要运行的文件
# package.json文件..."bin": { "vue-test": "bin/index.js"},...比方咱们想要通过vue-test打印hello world!!
$ vue-testhello world!!bin字段指定后
# bin/index.js 文件#!/usr/bin/env nodeconsole.log("hello world!!")当初咱们就想要测试该命令是否无效
本地测试
link能够测试本地包
npm link <path>npm link$ vue-test该命令会在本地为你创立全局指令
近程创立
npm login # 登录你的账号npm publish # 公布npm i -g <package-name>$ vue-test