美文网首页
npm script

npm script

作者: hanxianshe_9530 | 来源:发表于2019-10-18 10:18 被阅读0次

npm 脚本的原理非常简单。每当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定的脚本命令。

  1. 原理
    npm run新建的Shell,将当前目录的node_modules/.bin子目录加入PATH变量,执行结束后,再将PATH变量恢复原样。
  2. 通配符
    *表示任意文件名,**表示任意一层子目录
"lint": "jshint *.js"
"lint": "jshint **/*.js"
  1. 参数
    npm 脚本传入参数,要使用--标明
  2. 执行顺序
    &代表并行执行, &&代表顺序执行
  3. npm 钩子
    npm 脚本有prepost两个钩子,例:build脚本命令的钩子就是prebuildpostbuild
    用户执行npm run build的时候,会自动按照下面的顺序执行。
    npm run prebuild && npm run build && npm run postbuild
npm 默认提供下面这些钩子。
prepublish,postpublish
preinstall,postinstall
preuninstall,postuninstall
preversion,postversion
pretest,posttest
prestop,poststop
prestart,poststart
prerestart,postrestart
  1. 默认值
    npm 对两个脚本提供了默认值。
    前提是项目根目录下有server.jsnode-gyp rebuild脚本。
    npm run start的默认值是node server.js
    npm run install的默认值是node-gyp rebuild
"start": "node server.js",
"install": "node-gyp rebuild"`
  1. 变量
    npm 脚本有一个非常强大的功能,就是可以使用 npm 的内部变量。
    通过npm_package_前缀,npm 脚本可以拿到package.json里面的字段。
{
  "name": "foo", 
  "version": "1.2.5",
  "scripts": {
    "view": "node view.js"
  }
}
// view.js
console.log(process.env.npm_package_name); // foo
console.log(process.env.npm_package_version); // 1.2.5

npm_package_前缀也支持嵌套的package.json字段

  "repository": {
    "type": "git",
    "url": "xxx"
  },
  scripts: {
    "view": "echo $npm_package_repository_type"
  }
  1. 常用脚本示例
// 删除目录
"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",

相关文章

  • npm script

    http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html n...

  • npm script

    npm 脚本的原理非常简单。每当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定...

  • npm script

    在package.json文件中有一个scripts属性,定义了包括各生命周期的脚本命令和自定义脚本。 1.使用 ...

  • npm package.json scripts

    参考知乎 王仕军 关于 npm script 我写了本掘金小册,还配了视频《使用 npm script 打造超溜前...

  • npm script 笔记

    常用命令缩写 安装 package常规:npm install pkg, 缩写:npm i pkg 安装全局pac...

  • vue zepto

    npm install zepto -S 安装加载器npm i script-loader exports-loa...

  • 导出Excel 前端

    安装依赖: npm i file-saver xlsx -S npm i script-loader -D ...

  • vue4.0的坑

    启动项目 missing script: dev 不再是 npm run dev 是 npm run serve ...

  • 2020-03-04 摘要一份导出EXCLE

    第一步 npm install -S file-saver xlsx npm install -D script-...

  • openedx install error

    npm ERR! Failed at the node-sass@4.7.2 postinstall script...

网友评论

      本文标题:npm script

      本文链接:https://www.haomeiwen.com/subject/fktimctx.html