基於控制檯輸入的目標特定環境

爲了說明這個問題，我使用彈出的create-react-app作爲我的項目佈局。基於控制檯輸入的目標特定環境

我有5個環境，我的應用程序將要部署到。每個環境都有相同的服務（大部分），例如一個看起來像：

//environment 1 
https://environment1.service1.foo.bar 
https://environment1.service2.foo.bar 

//environment 2 
https://environment2.service1.foo.bar 
https://environment2.service2.foo.bar

要在過去的項目中實現這一目標（角/咕嘟咕嘟）我有一個大口的任務，基本上會尋找一個變量被在

gulp build --environment environment1

這樣做的代碼通過如下：

gulp.task('environment', ['clean-environment'], function() { 
    log('Copying environment'); 
    var environmentFile = config.environmentSrcDir + 'env2.js'; 
    if (args.environment !== 'env2' || 
    args.environment === 'env3' || 
    args.environment === 'env4' || 
    args.environment === 'evn5') { 
    environmentFile = config.environmentSrcDir + args.environment + '.js'; 
    } 
    return gulp 
    .src(environmentFile) 
    .pipe(rename(config.environmentService)) 
    .pipe(gulp.dest(config.root)); 
});

基本上指向與它內部的正確端點正確的文件以及其他perti與該環境相關的內部變量。

我的問題是，鑑於我使用create-react-app作爲起點，所以webpack和節點腳本，我將如何完成這樣的事情。基本上我想能夠說yarn build env1，然後項目設置一個常量或文件的常量作爲'積極'常數可以這麼說。

來源

2017-07-19 erp

如果您使用的是「Create-react-app」，那麼您可以通過不同的.env文件定義開發環境變量。

鏈接：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

.ENV：

REACT_APP_GOOGLE_CLIENT_ID = XXX-YYY-ZZZ.apps.googleusercontent.com 
REACT_APP_API_PROTOCOL = http: 
REACT_APP_API_HOST = localhost:3000 
NODE_PATH = src/scripts 
PORT = 9001

.env.production：

REACT_APP_GOOGLE_CLIENT_ID = ZZZ-YYY-XXX.apps.googleusercontent.com 
REACT_APP_API_PROTOCOL = https: 
REACT_APP_API_HOST = api.my-applicaton.com 
NODE_PATH = src/scripts

根據當前命令（啓動/測試/構建）讀取不同的.env配置。用於啓動和測試的dev.env。 prod.env建立。如果自定義配置不存在 - 從.env文件讀取env變量。 Blockquote

您將會知道哪個.env文件將與您的啓動項目命令一起使用。

你應該有這樣的事情在腳本下的package.json文件中的對象： "start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build": "npm run build-css && react-scripts build", 然後你就可以使用指定的命令啓動項目。從文檔，左邊的文件比對正確的文件更優先：

npm start: .env.development.local, .env.development, .env.local, .env npm run build: .env.production.local, .env.production, .env.local, .env npm test: .env.test.local, .env.test, .env (note .env.local is missing)

例如，如果你開始npm run build，您將能夠訪問.env.production文件中定義的變量。

在JavaScript代碼中，您可以使用process.env.REACT_APP_API_HOST。

另外，請在媒體上查看此鏈接。com：https://medium.com/@tuchk4/why-i-love-create-react-app-e63b1be689a3

來源

2017-07-19 20:09:38 TariqN

好的，這是有道理的。所以我真正的擔心的是我想說一些類似「紗線生產」的東西，並針對這種環境。我的api調用包含環境（不是'production.blah.com'，而是'east.myapp.com/service'），無論環境是什麼，所有的api調用都需要在環境中包含環境特定的字符串網址。那麼，如何通過應用程序將其擴散到一個可以將服務調用的基本uri進行剔除的地方？ – erp

您可以創建不同的'.env'文件，併爲每個環境定義。然後創建配置文件，您可以在其中存儲.env變量的別名，然後在您的服務中使用它。根據您的npm start/test/build命令，將創建不同的.env文件，並且您將能夠訪問您聲明的變量。 – TariqN

我仍然遇到了一些針對特定文件@TariqN的問題。我明白你需要創建不同的'.env'文件，每個文件都有相關的變量。但是，在'build'時間或'開始'時間的情況下，我怎樣才能將其中的一個選爲.env文件呢？我在你發佈的教程中看不到這一點。 – erp

基於控制檯輸入的目標特定環境

回答

相關問題