前端工程化 - npm 基础

Cellinlab

发布于 2023-05-17 16:26:50

5470

发布于 2023-05-17 16:26:50

文章被收录于专栏：Cellinlab's Blog

# npm script

原理：每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。

npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。

# 通配符

由于 npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符。

* 表示任意文件名
** 表示任意层子目录

{
  "test": "tap test/\*.js", 
  // 将通配符传入原始命令，防止被 Shell 转义，要将星号转义
}

# 传参

向 npm 脚本传入参数，要使用 -- 标明

$ npm run lint --  --reporter checkstyle > checkstyle.xml

package.json

{
  "lint": "jshint **.js",
  "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml"
}

# 执行顺序

并行执行

$ npm run script1.js & npm run script2.js

串行执行

$ npm run script1.js && npm run script2.js

# 钩子

npm 脚本有pre和post两个钩子, 如 build 脚本命令的钩子就是 prebuild 和 postbuild

# 执行 npm run build 相当于
npm run prebuild && npm run build && npm run postbuild

一些默认钩子

prepublish，postpublish
preinstall，postinstall
preuninstall，postuninstall
preversion，postversion
pretest，posttest
prestop，poststop
prestart，poststart
prerestart，postrestart

# 简写

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_前缀，npm 脚本可以拿到package.json里面的字段, 如 npm_package_version 获取 version。

// package.json
// {
//   "name": "foo", 
//   "version": "1.2.5",
//   "repository": {
//      "type": "git",
//      "url": "xxx"
//   },
//   "scripts": {
//     "view": "node view.js"
//   }
// }
console.log(process.env.npm_package_name); // foo
console.log(process.env.npm_package_version); // 1.2.5
console.log(process.env.npm_package_repository_type); // git

通过npm_config_前缀，拿到 npm 的配置变量，即npm config get xxx命令返回的值

"view": "echo $npm_config_tag",

package.json里面的config对象，可以被环境变量覆盖

$ npm config set foo:port 80

env命令可以列出所有环境变量

# 常见脚本

// 删除目录
"clean": "rimraf dist/*",

// 本地搭建一个 HTTP 服务
"serve": "http-server -p 9090 dist/",

// 打开浏览器
"open:dev": "opener http://localhost:9090",

// 实时刷新
 "livereload": "live-reload --port 9091 dist/",

// 构建 HTML 文件
"build:html": "jade index.jade > dist/index.html",

// 只要 CSS 文件有变动，就重新执行构建
"watch:css": "watch 'npm run build:css' assets/styles/",

// 只要 HTML 文件有变动，就重新执行构建
"watch:html": "watch 'npm run build:html' assets/html",

// 部署到 Amazon S3
"deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",

// 构建 favicon
"build:favicon": "node scripts/favicon.js",

# 语义化版本规范

semver 约定一个包的版本号必须包含 3 个数字，格式必须为 MAJOR.MINOR.PATCH, 意为 主版本号.小版本号.修订版本号

MAJOR 对应大的版本号迭代，做了不兼容旧版的修改时要更新 MAJOR 版本号
MINOR 对应小版本迭代，发生兼容旧版API的修改或功能更新时，更新MINOR版本号
PATCH 对应修订版本号，一般针对修复 BUG 的版本号

range	含义	示例
^2.2.1	指定的 MAJOR 版本号下, 所有更新的版本	匹配 2.2.3, 2.3.0; 不匹配 1.0.3, 3.0.1
~2.2.1	指定 MAJOR.MINOR 版本号下，所有更新的版本	匹配 2.2.3, 2.2.9 ; 不匹配 2.3.0, 2.4.5
>=2.1	版本号大于或等于 2.1.0	匹配 2.1.2, 3.1
<=2.2	版本号小于或等于 2.2	匹配 1.0.0, 2.2.1, 2.2.11
1.0.0 - 2.0.0	版本号从 1.0.0 (含) 到 2.0.0 (含)	匹配 1.0.0, 1.3.4, 2.0.0