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

更新于 2018-06-13  约 9 分钟

前言

用过构建工具的亲们知道,通常通过全局安装一个 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...
阅读 3.1k更新于 2018-06-13

推荐阅读
我只是个前端AI
用户专栏

自动记录胖子的学习足迹。

4 人关注
25 篇文章
专栏主页
目录