npm script 跨端兼容的实现

4,024 阅读2分钟

本人用的是 Mac,所以上面几章 npm script 都顺利运行(前半生一路开挂),但是还是有使用 Windows 系统的开发小伙伴(多句嘴,经济允许还是建议购置一台 Mac,懂得投资自己)。

那下面就说说在 Windows 平台下,我们的 npm script 还如何顺利地运行。

注:Windows 自带的 cmd 是个不靠谱的家伙,建议使用 git bash 来代替 cmd 运行 npm script,别说我没告诉过你。

常用命令的替代者

前面涉及到文件操作的命令有文件和目录创建、删除和复制等操作,npm 社区对于这些也提供了跨平台的兼容包,一看来看看吧

  • 目录新增 make-dir-cli,同等 mkdir -p;
  • 文件或目录的删除 rimrafdel-cli,同等 rm -rf;
  • 文件或目录的复制 cpr,同等 cp -r;
  • 跨平台的变量引用,变量写法统一,cross-var,比如 Windows 写法 %npm_package_name%,Linux 写法 $npm_package_name;

添加依赖包

npm install make-dir-cli rimraf cpr cross-var -D 
// 或
yarn add make-dir-cli rimraf cpr cross-var -D 

命令改写

1.文件 package.json

// 不兼容 Windows
"scripts": {
    ...,
    "//": "# 不兼容 Windows",
    "cover:cleanup": "# 清理覆盖率报告- \n  rm -rf coverage && rm -rf .nyc_output",
    "cover": "# 生成覆盖率报告 \n  nyc --reporter=html npm run test",
    "cover:archive": "# 归档覆盖率报告  \n  mkdir -p coverage_archive/$npm_package_version && cp -r coverage/* coverage_archive/$npm_package_version",
    "cover:server": "http-server coverage_archive/$npm_package_version -p $npm_package_config_port",
    "cover:open": "open http://localhost:$npm_package_config_port",
    "postcover": "# 执行并打开覆盖率报告 \n  npm-run-all cover:archive cover:cleanup --parallel cover:server cover:open"
}

// 兼容 Windows
"scripts": {
    ...,
    "//": "# 兼容 Windows",
    "cover:cleanup": "# 清理覆盖率报告- \n  rimraf coverage && rimraf .nyc_output",
    "cover": "# 生成覆盖率报告 \n nyc --reporter=html npm run test",
    "cover:archive": "# 归档覆盖率报告  \n cross-var \"make-dir coverage_archive/$npm_package_version && cpr coverage coverage_archive/$npm_package_version -o\"",
    "cover:server": "cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port",
    "cover:open": "cross-var open http://localhost:$npm_package_config_port",
    "precover": "npm run cover:cleanup",
    "postcover": "# 执行并打开覆盖率报告 \n  npm-run-all cover:archive --parallel cover:server cover:open"
}

2.执行

npm run cover

命令剖析

  • 文件或目录的复制,Linux 写法是 cp -r coverage/* coverage_archive/$npm_package_version,Windows 写法 cpr coverage coverage_archive/$npm_package_version -o。细节有两点注意:第一是参数位置,Linux 平台 -p 紧跟在 cp 后面,Windows 平台 -ocpr 末尾;第二是复制内容路径写法,Linux 平台 coverage/*,Windows 平台 coverage;
  • cover:cleanuppostcover 移出来放入 precover 里执行,避免 cpr 没归档完就被清空的情况;
  • 使用了变量的命令,整个命令用双引号包起来,双引号前记得加 \ 转义,然后开头记得加上 cross-var

环境变量跨平台设置

开门见山,使用 cross-env 来实现。

添加依赖包

npm i cross-env -D
// 或
yarn add cross-env -D

命令改写

"scripts": {
    "test": "cross-env NODE_ENV=test mocha test/"
}

你可以...

上一篇:npm script 环境变量的使用

下一篇:npm script 命令补全的实现

目录:npm script 小书