NPM 脚本

NPM 脚本

npm 允许在 package.json 中使用 scripts 字段定义脚本命令。

1
2
3
4
scripts: {
'dev': 'gulp dev',
'build:aot': 'gulp build'
}

可以通过 npm run 命令查看或执行相应的脚本。

1
2
3
4
5
6
// 查看所有脚本
npm run

npm run dev

npm dun build:aot

原理

通过 npm run 执行脚本时,会自动新建一个 Shell;新建的 Shell 会将当前项目目录中的 node_modules/.bin 子目录加入 PATH 变量中,然后在里面执行对应的脚本内容;脚本执行完后,再将 node_modules/.bin 目录从 PATH 变量中移除。

因此,对于 node_modules/.bin 目录中的所有脚本,都可以直接通过脚本名调用,不需要添加路径。

执行顺序

npm 脚本支持 prepost Hook,如果同时定义了 pretasktask 以及 posttask 脚本,那么在执行 task 脚本前会先执行 pretask 脚本,task 脚本执行结束后会执行 posttask 脚本。

1
2
// 执行 npm run task 时会按下面的顺序执行
npm run pretask && npm run task && npm run posttask

如果需要在同一个脚本中执行多个任务时,那么要考虑任务的执行顺序。

如果需要多任务并行(同时执行),可以使用 & 符号:

1
2
// taskA、taskB 同时执行
npm run taskA & npm run taskB

如果需要串行执行任务,可以使用 && 符号:

1
2
// taskA 执行结束后再执行 taskB
npm run taskA && npm run taskB

也可以通过 node 的任务模块来管理脚本任务的执行顺序:script-runnernpm-run-allredrun

使用细节

  • 可以在脚本中使用通配符,如:***

    1
    'build': 'node src/\*.js'
  • 使用 -- 进行传参

  • npm 提供 npm_lifecycle_event 变量,用于获取当前运行的脚本名称

    1
    2
    3
    4
    5
    const EVENT = process.env.npm_lifecycle_event;

    if (Object.is(EVENT, 'taskA')) {
    //
    }
  • 脚本简写

    四个常用的 npm 脚本有简写形式

    1
    2
    3
    4
    5
    6
    7
    npm start => npm run start

    npm stop => npm run stop

    npm test => npm run test

    npm restart => npm run stop && npm run restart && npm run start
  • 在脚本中可以通过 npm_package_ 前缀获取 package.json 中的变量

    1
    2
    3
    4
    5
    6
    7
    8
    // package.json
    {
    'name': 'demo',
    'version': '1.0.1',
    'scripts': {
    'demo': 'node demo.js'
    }
    }
    1
    2
    3
    // demo.js
    console.info(process.env.npm_package_name); // 'demo'
    console.info(process.env.version); // '1.0.1'

    如果是 Bash 脚本,可以使用 $npm_package_ 前缀获取变量值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // package.json
    {
    'name': 'demo',
    'version': '1.0.1',
    'scripts': {
    'log': 'echo $npm_package_repository_type'
    },
    'repository': {
    'type': 'git',
    'url': ''
    }
    }

    npm 脚本还可以通过 npm_config_ 前缀,拿到 npm 的配置变量,即 npm config get xxx 命令返回的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // package.json
    {
    'name': 'demo',
    'version': '1.0.1',
    'scripts': {
    // npm config ls -l 查看所有配置变量
    'log': 'echo $npm_config_user'
    },
    'repository': {
    'type': 'git',
    'url': ''
    }
    }

参考