基于环境的可变配置文件 - reactjs, webpack答案

【问题标题】：variable config file based on environment - reactjs, webpack基于环境的可变配置文件 - reactjs, webpack
【发布时间】：2016-06-01 21:16:08
【问题描述】：

我需要基于环境的 reactjs 组件中的一堆全局变量（例如：主机名、令牌、api url 等）。但我不想将它单独添加到 js 中。我想创建 project.config 文件来设置 prod:{hostname:example.com, api-url:prod, etc} 和 dev:{hostname:localhost.com, api-url:dev, etc}，我安装了宽松的环境，但我必须为每个变量指定。

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://example.com:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')}),
    new ExtractTextPlugin("static/super.css", {
            allChunks: true
        })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    },
    {  test: /\.scss$/,
        loaders: ["style", "css", "sass"],
        include: path.join(__dirname, 'src')
    }
    ]
  }
};

【问题讨论】：

我真的不明白你在问什么。
基于环境的单独文件中的全局 js 变量。

标签： reactjs webpack envify

【解决方案1】：

您是否尝试将配置 json 字符串化，该配置 json 可以具有一些用于 dev 或 prod 的通用和覆盖属性？哪个将被赋予新的 webpack.DefinePlugin({...})？

【讨论】：

【解决方案2】：

我试图尝试类似的东西并尝试了以下似乎工作正常。

在你的 webpack 配置中添加一个 DefinePlugin。以下是我的网络配置：-

 plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.environment),
    }
  })
  ],

现在在编译时使用以下命令：-

environment=local webpack (for local)
environment=development webpack(for dev)
environment=production webpack(for prod)

现在，如果您看到我已经使用 cli 输入设置了“NODE_ENV”，因此当“NODE_ENV”作为生产值时，webpack 会自动缩小您的输出包。

现在假设您在文件中声明了 API url（我有 Constants.jsx），所以我在 constants.jsx 中添加了以下内容。所以基本上你可以在这个 Constants.jsx 中读取 webpack 配置中设置的 NODE_ENV，然后通过从这里导出来将它们导入到调用 APIS 的组件中。

const api_url=function(){
  let api_url='';
  if(process.env.NODE_ENV == 'local'){
    api_url= 'http://localhost:8002/api/v0';
  }
  else if(process.env.NODE_ENV == 'development'){
    api_url = 'https://development/api/v0';
  }
  else if(process.env.NODE_ENV == 'production'){
    api_url = 'https://production/api/v0';
  }
  return api_url;
}

export const url= api_url();

希望对您有所帮助！

【讨论】：