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