process.argv

多个参数要用空格隔开

  1. node index.js a=1 b=2
  2. // 结果
  3. [ '/Users/sam/.nvm/versions/node/v11.10.1/bin/node',
  4.   '/Users/sam/work/zhengsu/git/pm2-demo/index.js',
  5.   'a=1',
  6.   'b=2' ]

process.env

a:'1' 被挂在 process.env 这个对象上

  1. a=1 node index.js
  2. // 结果 
  3. {
  4.     ...,
  5.     a: '1'
  6. }

但是各个系统（比如mac/window）加参数的方式不一样，就有了 cross-env 这个库来统一加参数

  1. {
  2.   "scripts": {
  3.     "start": "cross-env a=1 node index.js"
  4.   }
  5. }

从 .env 文件来加载配置，一般使用 dotenv 这个库

  1. // .env 文件
  2. a=1
  4. const dotenv = require("dotenv")
  5. // 默认从根目录加载 .env 文件 => path.resolve(process.cwd(), '.env')
  6. dotenv.config()
  7. // 也可以指定文件路径
  8. dotenv.config({path: '../.env'})
  10. console.log(process.env.a)  // 1

vue-cli-service 在 dotenv 上又封装了一层

官方文档

  1. 在根目录添加.env文件，配置所有情况下都会用到的配置
  2. 在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。
  3. 在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。
  4. 在根目录添加.env.[mode].local文件，配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效，该文件不会被git跟踪。
  1. // .env.predeploy
  2. NODE_ENV = 'production'
  3. VUE_APP_CURRENTMODE='predeploy'  // 注意这里的变量要加 VUE_APP_ 前缀
  5. // package.json
  6. // 使用的时候 脚手架添加 --mode 将参数传过去
  7. "predeploy": "vue-cli-service build --mode predeploy"

但是使用这种方式非常不灵活，比如我的 .env 文件不在根目录，就取不到对应的环境变量了！
所以有一种 hack 方法，就是在 vue.config.js 里加上环境变量，这样 vue-cli-service 会自动帮我们通过 webpack.definePlugin 将这些变量注入到客户端代码里！

  1. // vue.config.js
  2. const dotenv = require('dotenv');
  3. const path = require('path');
  4. dotenv.config({ path: path.join(__dirname, '../.env') });
  5. process.env.VUE_APP_SERVER_PORT = process.env.SERVER_PORT;

脚手架使用的传参方式 -[short]/—[long]

一般在 packages.json 里脚手架命令这样传参，是使用了 commander，其有两种传参方式 -[short]/--[long] 。而 commander 又是通过 process.argv 解析获取的！（如果想看源码 请点击源码链接）
还有一个库 minimist，专门做参数解析的，可以达到一样的效果。

  1. // commander demo
  2. const program = require('commander');
  3. program.option('-d, --debug', 'output extra debugging')
  5. // webpack-cli 传参
  6. {
  7.   "scripts": {
  8.     "start": "webpack --config webpack.config.js"
  9.   }
  10. }

通过 npm run 将参数传递给脚手架

  1. 如果是普通的参数，直接加在后面就可以，argv 是可以透传的
  2. 如果是 —xxx 这种参数，需要加 — ，如 npm run start -- --config webpack.config.js

下面是一个 pack-mod-cli 的例子

  1. {
  2.   "scripts": {
  3.     "build-mod": "pack-mod build"
  4.   }
  5. }
  1. // 如果有一些动态参数需要从外面传递 就要使用 npm run 传递参数了
  2. npm run build-mod -- --appid app123 123 456
  3. # => pack-mod build '--appid' 'app123' '123' '456'
  5. npm run build-mod -- --appid app123 --watch 123 456 
  6. # => pack-mod build '--appid' 'app123' '--watch' '123' '456'