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官网注册账号,
运行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
作者：Lain
链接：https://juejin.cn/post/7026548431439003662