考虑环境切换变量的实现

[sorrycc]

• https://www.npmjs.com/package/dotenv-webpack
• https://www.npmjs.com/package/babel-plugin-transform-inline-environment-variables
• https://survivejs.com/webpack/optimizing/environment-variables/
• https://survivejs.com/webpack/packages/consuming-techniques/
• https://github.com/AJamesPhillips/create-react-app-typescript/blob/aac169b42e0f42bde7f053070bd523fa940ca68b/packages/react-scripts/template/README.md#what-other-env-files-are-can-be-used

[YMJxiaojia]

roadhog.js里面配置
"define": {
'API_ENV': process.env.API_ENV
},

[MinJieLiu]

.roadhogrc.js

define: {
  'process.env': {},
  'process.env.NODE_ENV': process.env.NODE_ENV,
  'process.env.API_ENV': process.env.API_ENV,
},

这样配置可行，覆盖 roadhog 默认配置，后面的都可以生效

[terminalqo]

@MinJieLiu 请教一下 如何配置一个测试环境啊？
我想在package.json里面写如下
'test':'roadhog server NODE_ENV=test'

[MinJieLiu]

@weishijun14 测试环境一般是 API_ENV 为 test。用我上面那种方法没问题

[huyawei]

@MinJieLiu API_ENV的值在哪设置呢

[terminalqo]

@huyawei 你楼上的楼上的楼上

[huyawei]

@weishijun14 他那个只是进行了覆盖吧，值的入口呢，从哪里设置值

[MinJieLiu]

cross-env API_ENV=test roadhog build

[huyawei]

@MinJieLiu 跪谢

[mdluo]

@sorrycc 建议尽快支持 dotenv

• .roadhogrc 大都是些 webpack 和 babel 相关的配置，在多环境或者多节点部署的时候这些配置是相同的；而 env 大都是接口地址、密码等跟实际部署环境和节点相关的信息，本身就不应该放在一起
• 让 .roadhogrc 与实际部署机器解耦，不需要在 gitignore 里添加 .roadhogrc，可以节省很多工作量
• 把配置信息单独出来，方便用命令行或者第三方部署工具读取和写入配置

[Orecic]

在.roadhogrc.js 添加define: {
'API_ENV': process.env.API_ENV,
}
然后在scripts里添加cross-env API_ENV=test roadhog build
但没有获取到API_ENV的值，希望大神解决，谢谢

[MinJieLiu]

@Orecic 看我的评论

[JakimLi]

在.roadhogrc.js中添加define后：

"define":  {
  'API_ENV': process.env.API_ENV
}

报错： Syntax error: No value found for key API_ENV。

请教下如何解决

[rrandom]

.webpackrc 中添加， 报错

[xchunzhao]

@MinJieLiu .webpackrc中添加报错

{
  "entry": "src/index.js",
  "define": {
    "process.env": {},
    "process.env.NODE_ENV": process.env.NODE_ENV,
    "process.env.API_ENV": process.env.API_ENV,
  },
  "extraBabelPlugins": [
    "transform-decorators-legacy",
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
  ],
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr"
      ]
    }
  },
  "ignoreMomentLocale": true,
  "theme": "./src/theme.js",
  "html": {
    "template": "./src/index.ejs"
  },
  "publicPath": "/",
  "disableDynamicImport": true,
  "hash": true
}

Error

yarn run v1.3.2
$ cross-env DISABLE_ESLINT=true API_ENV=test roadhog dev
404
Unexpected token p in JSON at position 94

Update 2018-03-12 13:57

已解决。将.webpackrc改成.webpackrc.js,之前的json数据转换成对象。

export default {
  entry: "src/index.js",
  define: {
    'process.env':{},
    /*cannot set NODE_ENV for userDefined*/
    'process.env.NODE_ENV': process.env.NODE_ENV,
    'process.env.API_ENV': process.env.API_ENV,
  },
  extraBabelPlugins: [
    "transform-decorators-legacy",
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
  ],
  env: {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr"
      ]
    }
  },
  ignoreMomentLocale: true,
  theme: "./src/theme.js",
  html: {
    "template": "./src/index.ejs"
  },
  publicPath: "/",
  disableDynamicImport: true,
  hash: true
}

[magicly]

@xchunzhao @MinJieLiu 我参考你们的配置， .webpackrc.js文件如下：

const path = require('path');

console.log('======', process.env);

export default {
  entry: 'src/index.js',
  define: {
    'process.env': { a: 1 },
    /*cannot set NODE_ENV for userDefined*/
    'process.env.NODE_ENV': process.env.NODE_ENV,
    'process.env.API_ENV': process.env.API_ENV,
  },
  extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
  env: {
    development: {
      extraBabelPlugins: ['dva-hmr'],
    },
  },
  alias: {
    components: path.resolve(__dirname, 'src/components/'),
  },
  ignoreMomentLocale: true,
  theme: './src/theme.js',
  html: {
    template: './src/index.ejs',
  },
  disableDynamicImport: true,
  publicPath: '/',
  hash: true,
};

package.json里面如下：

    "start:test": "cross-env API_ENV=test ESLINT=none roadhog dev",

在.webpackrc.js文件中是可以访问到process.env的（有API_ENV参数为test）， 但是在其他文件，比如request.js里访问process.env就是{}。

export default function request(url, options) {
  console.log('process env in request....', process.env);// 这里打印出来是{}
  if (process.env.API_ENV === 'test') {
    url = API_PREFIX + url;
  }

有空帮看一下呢， 谢谢~~

[magicly]

自己回答一下，之前理解错了。 其实在npm run build的时候， process.env.API_ENV已经被替换成了具体的常量字符串比如'test'， 而不是通过process.env去访问的， 所以虽然process.env打印出来是{}， 但是还是获取到了process.env.API_ENV的。

[clanaid]

mock中怎样使用define定义的变量

[jwmann]

You can make this slightly nicer like this:

.webpackrc.js

  define: {
    "process.env": {
      NODE_ENV: process.env.NODE_ENV,
      API_ENV: process.env.API_ENV
    }
  }

[prionkor]

Is there any way to load env vars from .env files?

[manwuyu]

虽然代码里环境变量的值改变了 但是 配置proxy 还是走进了development。。。

[progerchai]

Question

• 请教一下，是否可以设置template根据环境变量来切换 不同的index.ejs。目的是区分内网部署时，一些依赖资源文件从本地获取。而不是外网获取。

我这里尝试了替换index.ejs更名为indexLocal.ejs ,实际不能起作用。
考虑到是否只能识别index.ejs 的命名，替换为放置indexLocal.ejs到public目录下，并改回命名同样为index.ejs
同样无法生效