node 脚手架知识点(npm)
夏灬影 -因为本身对脚手架有些许兴趣, 所以我就研究了, 然后还在编写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 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-test
hello world!!
bin字段指定后
# bin/index.js 文件
#!/usr/bin/env node
console.log("hello world!!")
现在我们就想要测试该命令是否有效
本地测试
link可以测试本地包npm link <path>
npm link
$ vue-test
该命令会在本地为你创建全局指令
远程创建
npm login # 登录你的账号
npm publish # 发布
npm i -g <package-name>
$ vue-test
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
上一篇: 前端面试每日 3+1 —— 第934天