npm script

2023年 10月 8日 68.2k 0

串行 or 并行

并行跑命令:&,在命令结尾加& wait,可以使用ctrl c关闭命令行来结束进程 串行跑命令:&&

控制日志输出

  • --silent(-s):输出尽可能少的日志
  • --verbose:显示尽可能多的状态,日志级别的输出,用于调试

npm自动补全

不支持workspace的仓库

npm官方支持补全:npm-completion

第 1 步,把 npm completion 产生的命令放在单独的文件中:

npm completion >> ~/.npm-completion.bash

第 2 步,在 .bashrc 或者 .zshrc 中引入这个文件:

echo "[ -f ~/.npm-completion.bash ] && source ~/.npm-completion.bash;" >> ~/.bashrc
echo "[ -f ~/.npm-completion.bash ] && source ~/.npm-completion.bash;" >> ~/.zshrc

最后执行 source ~/.zshrc 或者 source ~/.bashrc,来让自动完成生效。

使用补全方式:尝试在命令行中输入 npm run,然后键入空格(空格很重要) ,然后键入 tab 键

一些跨平台的第三方库

  • rimraf 或 del-cli,用来删除文件和目录,实现类似于 rm -rf 的功能;
  • cpr,用于拷贝、复制文件和目录,实现类似于 cp -r 的功能;
  • make-dir-cli,用于创建目录,实现类似于 mkdir -p 的功能;

跨平台的引用变量

Linux 下直接可以用 $npm_package_name,而 Windows 下必须使用 %npm_package_name%,我们可以使用 cross-var

npm i cross-var -D

使用方式

  "scripts": {
-    "cover:open": "opn http://localhost:$npm_package_config_port",
+    "cover:open": "cross-var opn http://localhost:$npm_package_config_port",
   },

引入 cross-var 之后,它竟然给我们安装了 babel,如果想保持依赖更轻量的话,可以考虑使用 cross-var-no-babel

跨平台的环境变量

因为不同平台的环境变量语法不同,我们可以使用 cross-env 来实现 npm script 的跨平台兼容

npm i cross-env -D

使用方式

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

抽离script到单独文件

当 npm script 不断累积、膨胀的时候,全部放在 package.json 里面可能并不是个好主意,因为这样会导致 package.json 糟乱,可读性降低。

借助 scripty 我们可以将 npm script 剥离到单独的文件中,从而把复杂性隔到单独的模块里面,让代码整体看起来更加清晰。

npm i scripty -D

使用方式

执行npm run foo:bar会向scripts/foo/bar寻找可执行脚本并执行

"scripts": {
  "foo:bar": "scripty"
}

钩子

npm script 的设计者为命令的执行增加了类似生命周期的机制,具体来说就是 prepost 钩子脚本

举例来说,运行 npm run test 的时候,分 3 个阶段:

  • 检查 scripts 对象中是否存在 pretest 命令,如果有,先执行该命令;
  • 检查是否有 test 命令,有的话运行 test 命令,没有的话报错;
  • 检查是否存在 posttest 命令,如果有,执行 posttest 命令;
  • 在 Git Hooks 中执行 npm script

    npm install -D husky
    

    在package.json增加

    {
      "scripts": {
        "precommit": "eslint src/**/*.js"
      }
    }
    

    但是这样会检查到项目中所有的lint错误,如何只检查提交的文件呢?

    需要用到lint-staged

    npm install -D lint-staged
    

    package.json改为如下,就可以只lint提交的文件啦

    {
      "scripts": {
        "precommit": "lint-staged"
      },
      "lint-staged": {
        "src/**/*.js": "eslint"
      }
    }
    

    参考文章

    用 husky 和 lint-staged 构建超溜的代码检查工作流

    相关文章

    服务器端口转发,带你了解服务器端口转发
    服务器开放端口,服务器开放端口的步骤
    产品推荐:7月受欢迎AI容器镜像来了,有Qwen系列大模型镜像
    如何使用 WinGet 下载 Microsoft Store 应用
    百度搜索:蓝易云 – 熟悉ubuntu apt-get命令详解
    百度搜索:蓝易云 – 域名解析成功但ping不通解决方案

    发布评论