β

使用 npm scripts 作为构建工具

小曹哥的博客 157 阅读

npm scripts

简介

npm scripts 是指Npm 对于 package.json 文件中 "scripts" 属性的处理,通过该属性,npm 可以执行命令。

比如有下面配置:

{
  "scripts": {
    "lint": "eslint .",
    "test": "mocha test/",

    "pretest": "npm run lint"
  }
}

另外 npm 会在执行一些内置命令时,执行其 pre post 命令:

更多内置的 pre post 可以参考 官网文档 说明。

环境变量

package.json 相关变量

如果你的 package.json 文件包含 { "name": "foo", "version": "1.2.3" } ,则 npm 在 npm scripts 中添加下面两个环境变量:

自定义环境变量

可以通过 package.json 中的 "config" 对象自定义一些环境变量,比如:

{
"config": {
"port": "8080"
},
"scripts": {
"start": "node server.js --port ${npm_package_config_port}"
}
}

npm_lifecycle_event

npm 正在执行哪个 npm script, npm_lifecycle_event 环境变量值就会设为其值,比如

从而可以根据该值判断正在执行的命令,然后就可以做不同的事。比如, npm start 用于生成开发环境版本代码,而 npm run build 用于生成生产环境代码,这就可以在执行构建任务时,通过 npm_lifecycle_event 来判断。

关于 npm scripts 更多及更详细的使用请参考官方文档: npm scripts

Grunt vs Gulp vs npm scripts

关于这三者作为构建工具的对比,已经有人说明的很切中要点,也很细致了,流行的两篇文章: Why we should stop using Grunt & Gulp Why I Left Gulp and Grunt for npm Scripts 。对于文章中的观点,我也很赞同,在此只简单列下文章作者的观点。

Gulp 与 Grunt 的不足

总得来说就是 Gulp 与 Grunt 引入了一层复杂但是多余的抽象层,用来抽象直接的构建命令,比如 gulp-uglify grunt-contrib-uglify 用来包装 uglifyjs 命令。这层抽象所建立的插件生态带来了很多问题:

为什么 npm scripts 先前使用的人不多?这可能是因为很多人存在对 npm scripts 的误解:

而真相是:

而 npm scripts 的不足是由于 package.json 文件不可以写注释,对于复杂的构建任务,代码可读性很差。这个可以尽量通过贴切的命名,任务细分来减轻。另外就是需要熟悉各构建工具的命令行使用方式。

npm scripts 构建实例

关于如何使用 npm scripts 来完成创建的前端开发当中的构建任务,可以参考 How to Use npm as a Build Tool 一文的教程,以及 github 上面的例子 npm-scripts-example

总得来说,下面常见的构建任务都可以使用 npm scripts 来完成:

后话

到现在,我还会回想下,为什么 Grunt 与 Gulp 会大火?我觉得是因为前端中存在相当一部分很少接触命令行的开发者,对于 Linux/Mac 的命令行有点儿恐惧而不愿意学习它,另外看到构建工具命令行复杂的参数也会心生退却。个人认为,npm scripts 学习成本并不比 Grunt/Gulp 高,对于熟悉构建工具命令的人来说就更低了。所以,一个东西火,不代表它就是好的解决方案,只是代表很多人在关注和使用罢了。

参考

npm scripts

作者:小曹哥的博客
原文地址:使用 npm scripts 作为构建工具, 感谢原作者分享。

发表评论