【npm】scripts 使用

针对项目使用的npm，做一个简单的原理和使用笔记。
npm 允许在package.json文件里面，使用scripts字段定义脚本命令。scripts是一个对象，每个属性，对应执行脚本命令。
参考文章：引路文章之npm scripts 使用指南

#原理

每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。注意：当前目录的node_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。比如，当前项目的依赖里面有 Mocha，只要直接写mocha test。

执行顺序

• 并行执行（即同时的平行执行），可使用&符号。

npm run script1.js & npm run script2.js

• 继发执行（即只有前一个任务成功，才执行下一个任务），可使用&&符号。

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

• 使用 node 的任务管理模块：script-runner、npm-run-all、redrun。

钩子

npm 脚本有pre和post两个钩子。eg:build脚本命令的钩子就是prebuild和postbuild。

npm 初始化

执行命令npm init填写对应信息进行构建

npm init 执行.png

• name 项目名称
• version 项目的版本号
• description 项目的描述信息
• entry point 项目的入口文件
• test command 项目启动时脚本命令
• git repository 如果你有 Git 地址，可以将这个项目放到你的 Git 仓库里
• keywords 关键词
• author 作者
• license 开源协议

#变量

• npm_lifecycle_event,该变量返回当前正在运行的脚本名称，可以利用这个变量，在同一个脚本文件里面，为不同的npm scripts命令编写代码。

const TARGET = process.env.npm_lifecycle_event;

• 通过npm_package_前缀，npm 脚本可以拿到package.json里面的字段。

{
  "name": "demo", 
  "version": "1.0.0",
  "scripts": {
    "build": "node build.js"
  }
}
console.log(process.env.npm_package_name); // demo
console.log(process.env.npm_package_scripts_build); // 可获取嵌套信息

常用脚本

// 删除目录
"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",

小棨留言：文章描述或者语法理解不到位的地方，请大家多多指教！