关于javascript: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