NPM 脚本

发表于 | 分类于
字数统计: 743 | 阅读时长 ≈ 3

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 脚本支持 pre 和 post Hook，如果同时定义了 pretask、task 以及 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-runner、npm-run-all、redrun。

使用细节

  • 可以在脚本中使用通配符，如：* 、**

    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': ''
    	}
    }

参考