通过npm包来制作命令行工具的原理

前言

用过构建工具的亲们知道，通常通过全局安装一个 xxx-cli 的 npm 包，就能在命令行用命令进行构建。那么这个 npm 包如何变成一个可执行的命令呢？

npm cli 开发步骤

1. 使用 npm init 初始化一个项目目录 my-cli。

2. 在 package.json 中添加或者编辑 bin 字段：

   {
     "name": "my-cli",
     ...,
     "bin": {
       "command-name": "jsfile" // path of jsfile relative to package.json
     },
     ...
   }
   

   commandName 就是命令的名字，jsfile 就是当用户键入命令时的处理程序。

3. 代码开发。必须在 jsfile 文件的第一行写这行命令 #!/usr/bin/env node，譬如：

   #!/usr/bin/env node
   const program = require('commander');
   const packageJson = require('../package');
   
   let defaultJsProcessors = [ 'react' ];
   let defaultStyleProcessors = [ 'sasslike' ];
   let defaultWebpackVersion = '4';
   
   function parseListArgv( val ) {
     if ( val ) {
       return val.split( ',' );
     } else {
       return [];
     }
   }
   
   program
     .version( packageJson.version, '-v, --version' )
     .option( '-u, --use-version <version-number>', 'Webpack version' )
     .option( '-j, --js-processors <processors>', 'Specify javascript processors', parseListArgv )
     .option( '-s, --style-processors <processors>', 'Specify style(css,image,fonts) processors', parseListArgv )
     .option( '--no-install', 'Do not install devDependncies package' )
     .parse( process.argv );
   
   
   let jsProcessors = program.jsProcessors || defaultJsProcessors;
   let styleProcessors = program.styleProcessors || defaultStyleProcessors;
   let webpackVersion = program.useVersion || defaultWebpackVersion;
   
   if ( webpackVersion=='4' ) {
     // code
   } else {
     // code
   }
   
   

4. 注册一个 npm 账号。

5. 发布到 npm 仓库，在项目根目录执行：

   $ npm login
   
   $ npm publish
   

6. 当发布成功之后，全局安装刚刚发布的包 npm install -g my-cli，安装完以后就可以在命令行使用步骤2中的命令了 $ command-name

npm cli 运行原理

Unix-like 平台

1. 当全局安装 npm 包的时候，npm 会把 package.json 中 bin 配置的 command-name 添加到系统 $PATH 中去。拿 macOS 举例，npm 会在 /usr/local/bin 下创建一个以 command-name 为名字的软链接，指向全局安装下来的 my-cli 包下面的 js：jsfile。（/usr/local/bin 是在 $PATH 中的）
2. 在命令行键入 command-name 相当于执行了文本文件 jsfile。
3. 在执行的时候碰到第一行 #!/usr/bin/env node，这是一个 shebang 行。这行告诉系统使用 node 去执行当前文件。（shebang 只有在Unix-like平台才有）
4. 执行 js 文件。这里有一个问题：#! 并不是一个符合 js 语法的语句，理论上直接执行是会有 syntax error 的。但是 node 对 shebang 行做了例外处理，所以用 node 执行带 shebang 行的 js 文件是没有问题的。

Windows 平台

1. 全局安装会把包安装到 C:\Users\username\AppData\Roaming\npm\node_modules下面，然后在 C:\Users\username\AppData\Roaming\npm 生成一个以 command-name 为名字的 cmd 文件：command-name.cmd。（C:\Users\username\AppData\Roaming\npm 在安装 npm 时被加入到 %PATH% 中）
2. 在 Windows 平台运行 cmd 文件是不需要后缀名的，所以当在命令行键入 command-name 相当于执行 C:\Users\username\AppData\Roaming\npm\command-name.cmd。
3. 为什么有这个 cmd 文件，因为 windows 平台没有 shebang，那么 command-name.cmd 就模拟了 #!/usr/bin/env node 的功能，调用 C:\Users\username\AppData\Roaming\npm\node_modules\my-cli\ jsfile

用命令行执行本地安装的 npm cli

以前使用 npm 写的命令行工具必须全局安装，现在有一个工具 npx:

近日发布的 npm 5.2.0 版本中内置了伴生命令：npx，类似于 npm 简化了项目开发中的依赖安装与管理，该工具致力于提升开发者使用包提供的命令行的体验。npx 允许我们使用本地安装的命令行工具而不需要再定义 npm run-script，并且允许我们仅执行一次脚本而不需要再将其实际安装到本地；同时 npx 还允许我们以不同的 node 版本来运行指定命令、允许我们交互式地开发 node 命令行工具以及便捷地安装来自于 gist 的脚本。

npx 的使用

譬如我要用上文提到的命令行工具 command-name --option，那么我无需再全局安装了，只需要运行 $ npx command-name --option。npx 的执行过程请参考：https://www.npmjs.com/package...。

Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run.

By default, npx will check whether <command> exists in $PATH, or in the local project binaries, and execute that. If <command> is not found, it will be installed prior to execution.

参考

1. https://www.cnblogs.com/buzhi...
2. https://stackoverflow.com/que...
3. https://stackoverflow.com/que...
4. https://www.npmjs.com/package...