NPM 自定义 package.json 中 scripts 命令（& 与 && 的区别，cross-env 的使用）

一、简介

• 在 package.json 中 scripts 字段内可以自定义运行命令，例如：

  {
    ...
    "scripts": {
      "dev": "webpack -w"
    },
    ....
  }
  

• 执行原理

  使用 $ npm run script 执行脚本的时候都会创建一个 shell，然后在 shell 中执行指定的脚本。

  这个 shell 会将当前项目的可执行依赖目录（即 node_modules/.bin）添加到环境变量 path中，当执行之后之后再恢复原样。就是说脚本命令中的依赖名会直接找到 node_modules/.bin 下面的对应脚本，而不需要加上路径。

二、指令执行顺序

• & 与 && 的区别

  {
    ...
    "scripts": {
      // '&' 并行执行，同时执行所有指令
      "dev1":"node test.js & webpack"
      // '&&' 串行执行，前一个指令执行完才会执行下一个指令，一个一个来
      "dev2":"node test.js && webpack"
    },
    ....
  }
  

• 例如：打包测试一个本地 js 包，需要使用 gulp 打包压缩后，在通过 npm link 创建本地测试链接

  // 本来每次要执行的顺序
  // gulp 压缩到 dist 文件夹，同时完成配置文件转移
  $ gulp
  // 进入 dist 文件夹
  $ cd dist/
  // 创建本地 npm 测试链接
  $ npm link
  // 返回主文件夹，方便下次继续操作
  $ cd ..
  
  // 浓缩成一个命令
  "test": "gulp && cd dist/ && npm link && cd .. && exit 1"
  // 可以不用 exit 1 结束退出，它内部有优化
  "test": "gulp && cd dist/ && npm link && cd .."
  // 可以不用 cd .. 返回上级目录，由于它是内部开的 shell 进程完成的，可以看看子shell的概念，所以它从执行开始到结束都会保持在当前目录
  // 这就是最终需要写的命令：
  "test": "gulp && cd dist/ && npm link"
  

三、cross-env 的使用

• 安装（一般脚手架创建的工程里面已经有安装，没安装就手动安装下）

  $ npm i -D cross-env
  

• 在 node.js 执行环境中，在所有模块里都可以访问到一个全局进程变量 process

• 在 process 全局变量身上都一个对象叫 env ==> process.env

• 由于 JavaScript 是非常动态的语言，可以随意在任意对象上任意的添加属性。所以很多前端脚手架配置文件里的 process.env.NODE_ENV 就是在 node.js 执行环境下的全局对象 process.env 上添加了一个很简单的字符串 (development、production)。

• cross-env 是一个第三方库，可以不在 .js 文件中，以命令的方式给 process.env（特定对象上 & 配置文件之外）动态的添加各种属性，在 package.json 中的 scripts 脚本配置，而且它还是跨平台的.

  {
    ...
    "scripts": {
      "dev1": "cross-env name=1111"
      "dev2": "cross-env age=20"
    },
    ....
  }
  
  // 上述两句配置等价于在 js 模块中，然后可以直接使用该字段，会自动绑定注入到 env 对象中
  process.env.name = '111'
  process.env.age = '20'
  

• 如果需要在设置属性后，执行额外命令，直接空格跟着写在后面即可

  {
    ...
    "scripts": {
      // 例如：设置好属性 name 后，在通过 node 命令执行以下 index.js 文件
      // 可以理解为 cross-env name=1111 设置的 name 属性就是给 index.js 使用的
      "dev1": "cross-env name=1111 node index.js"
      // 按序执行多个命令
      "dev2": "cross-env name=1111 node index.js && cd dist/"
    },
    ....
  }
  

四、待补充…