環境変数 - ReactJSのファイルを別ファイルにしました

Question

この環境変数ファイルは、NODE_ENDに応じて変数configをエクスポートします。現在、生産と開発の変数は1つのファイルの中にあります。どのように私はdevelopment.jsとproduction.jsなどのファイルを分離することができます：

if(process.env.NODE_ENV === 'production') { 
    module.exports = { 
     API_URL: "https://test.co/api" 
    } 
} 
else { 
    module.exports = { 
     API_URL: "http://testbeta.co/api" 
    } 
} 

Answer 1

あなたがそれらを橋渡しし、意図したモジュールをエクスポートする別のファイルを持つことができます。たとえば、同じフォルダに3つの別々のファイルindex.js,development.js、およびproduction.jsを作成します。api

// production.js 
module.exports = { 
    API_URL: "https://e27.co/api" 
} 

// development.js 
module.exports = { 
    API_URL: "http://e27beta.co/api" 
} 

// index.js 
let exp 
if (process.env.NODE_ENV === 'production') { 
    exp = require('./production.js') 
} else { 
    exp = require('./development.js') 
} 
module.exports = exp 

その後、あなたはWebPACKのを使用している場合は、まさにこの目的のためにDefinePluginプラグインを活用することができます他の場所

// elsewhere.js 
const api = require('path_to_api_folder') 

Answer 2

のような、それを必要とすることができます

https://webpack.js.org/plugins/define-plugin/#use-case-service-urls

if(isProd) { 
    config.plugins.push(new webpack.DefinePlugin({ 
    'SERVICE_URL': JSON.stringify("http://prod.example.com") 
    })); 
} else { 
    config.plugins.push(new webpack.DefinePlugin({ 
    'SERVICE_URL': JSON.stringify("http://dev.example.com") 
    })); 
} 

Answer 3

あなたは可能性がありそれぞれ適切なSERVICE_URL 'を持つ2つの別々のwebpack設定があります。適切な設定のWebPACK渡すだけで、構築するには

// webpack.config.dev.js 
plugins.push(new webpack.DefinePlugin({ 
    'SERVICE_URL': JSON.stringify("http://dev-url.com") 
})); 

// webpack.config.prod.js 
plugins.push(new webpack.DefinePlugin({ 
    'SERVICE_URL': JSON.stringify("http://prod-url.com") 
})); 

：

webpack --config webpack.config.prod.js 
webpack --config webpack.config.dev.js