1

環境に基づいて、reactjs コンポーネント (例: ホスト名、トークン、API URL など) に一連のグローバル変数が必要です。しかし、個別にjsに追加したくありません。prod:{hostname:example.com, api-url:prod, etc} と dev:{hostname:localhost.com, api-url:dev, etc} を設定するための project.config ファイルを作成したいので、インストールしましたLoose-envify ですが、var ごとに指定する必要があります。

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')
    }
    ]
  }
};
4

2 に答える 2

0

dev または prod の共通のオーバーライドされたプロパティを持つことができる構成 json を文字列化しようとしましたか? 新しい webpack.DefinePlugin({...}) にはどれが与えられますか?

于 2016-06-01T21:52:45.937 に答える
0

私は似たようなことをしようとしていましたが、うまくいくようです。

Webpack 構成にDefinePluginを追加します。以下は私のwebconfigです:-

 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 を読み取り、ここからエクスポートすることで API が呼び出されるコンポーネントにインポートできます。

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();

それが役に立ったことを願っています！

于 2016-07-04T16:48:14.743 に答える