环境变量 ---蒋程鑫

设置环境变量

命令行

npx webpack --env SDP_ENV=test

package.json

{
  "scripts": {
    "start": "cross-env SDP_ENV=test gms dev",
    "build": "webpack --env SDP_ENV=test"
  }
}

获取环境变量

webpack.config.js

必须将 module.exports 转换成一个函数，默认参数为 env

module.exports = (env) => {
  console.log('env', env.SDP_ENV) // 'test'
  return {
    entry: './src/index.js',
  }
}

但是此时在js源码中，通过 process.env.SDP_ENV 获取不到该环境变量

DefinePlugin

DefinePlugin 实现了在编译时创建全局变量，从而使得代码中能够获取到环境变量。

webpack.config.js

module.exports = (env) => {
  console.log('env', env.SDP_ENV) // 'test'
  return {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.SDP_ENV': `'${env.SDP_ENV}'` // 需要添加引号
      })
    ]
  }
}

DefinePlugin插件会直接替换文本，因此提供的值必须在字符串本身中再包含一个 实际的引号。

gem-mine.config.js 中使用了 webpack-chain

module.exports = {
  chainWebpack(config) {
    config.plugin('define').tap(pluginOption => {
      pluginOption[0].process = {
        env: {
          SDP_ENV: `'${process.env.SDP_ENV}'`
        }
      }
      return pluginOption
    })
  },
}

index.js

const env = process.env.SDP_ENV // test

打包时动态获取环境变量

错误示例

package.json

{
  "scripts": {
    "build:test": "cross-env SDP_ENV=test gms build",
    "build:pre": "cross-env SDP_ENV=preproduction gms build",
    "build:pro": "cross-env SDP_ENV=product gms build",
  }
}

该做法需要针对不同环境各自执行build，非常繁琐。

正确做法

对接共享平台打包

pom.xml

<build>
  <plugins>
    <plugin>
      <groupId>org.codehaus.mojo</groupId>
      <artifactId>exec-maven-plugin</artifactId>
      <version>3.0.0</version>
      <executions>
        <execution>
          <goals>
            <goal>exec</goal>
          </goals>
        </execution>
        <configuration>
          <executable>npm</executable>
          <workingDirectory>src/main/js</workingDirectory>
          <arguments>
            <argument>config</argument>
            <argument>set</argument>
            <argument>SDP_ENV</argument>
            <argument>${env}</argument>
          </arguments>
        </configuration>
      </executions>
    </plugin>
  </plugins>
</build>

gem-mine.config.js

module.exports = {
  chainWebpack(config) {
    // use webpack-chain
    config.plugin('define').tap(pluginOption => {
      if (process.env.MAVEN_CMD_LINE_ARGS) {
        // 为process.env添加环境变量`SDP_ENV`
        pluginOption[0].process = {
          env: {
            SDP_ENV: `'${process.env.MAVEN_CMD_LINE_ARGS.split('-Denv=')[1].split(' ')[0]}'` // 注意引号
          }
        }
      }
      return pluginOption
    })
  },
}

index.js

const env = process.env.SDP_ENV

本地开发时设置环境变量

目前开发过程中，各项目设置本地环境的位置不统一。

package.json

{
  "scripts": {
    "start": "cross-env SDP_ENV=test gms dev"
  }
}

优点：统一设置环境的位置。

缺点：切换环境较麻烦，修改命令后需要重启服务。

源码设置

config.js

export function getEnv() {
  const sdpEnv = process?.env?.SDP_ENV
  if (sdpEnv && sdpEnv !== 'undefined') {
    return sdpEnv
  }
  // 本地开发环境,自行切换注释
  const defaultEnv = 'test'
  // const defaultEnv = 'preproduction'
  // const defaultEnv = 'product'
  return defaultEnv
}

优点：切换环境快，注释代码后无需重启。

缺点：设置环境的位置不便统一。