webpack项目中获取命令行参数 [原创]

2021-04-13

以下内容均在vue中使用，原理和webpack同理

获取命令行静态参数cross-env

cross-env是一个广受环境可以获取npm脚本中写好的参数，但是这样在项目中只能获取固定的，下面是这个库的一些使用方法

1
2
3

yarn add cross-env -D
# or
npm i cross-env -D

使用方法

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}
// NODE_ENV就会被设置成生成环境production

cross-env的使用方法不止这一点，具体的可以看官方文档。

获取命令行动态参数

minimist解析命令行参数

同样的先介绍一个库minimist，这个库的作用就是解析你命令行输入的内容。如：

1	yarn dev --aaa test --bbb testb --ccc

上面这行命令通过这个库解析之后就会变成，下面这样，不输入值默认是true

{
  "aaa": "test",
  "bbb": "testb",
  "ccc": true
}

minimist用法

const minimist = require('minimist');

const arg = minimist(process.argv.slice(2));

module.exports = arg;

一小段脚本，但是你可以在这里面做一些其他的操作，比如输出一些参数信息等等。然后在vue.config.js入口中配置

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      Object.assign(definitions[0]['process.env'], {
        platformVal: '"' + platformVal.platformVal + '"',
        platformValText: '"' + platformVal.platformValText + '"'
      });
      return definitions;
    });
  }
}

在node环境中使用process.env.aaa，如果想在页面里面使用的话，可以先把命令行参数放在js中或vuex中导出使用。