前端代碼多環(huán)境打包方案
在通過node編譯打包代碼的時候，通常會用到 process.env ，他和我們的配置文件息息相關(guān)，在開發(fā)的過程中往往用它來判斷環(huán)境，接口，版本等。以下是我對 process.env 環(huán)境變量的一些見解，有些術(shù)語可能不夠準確，歡迎指正。
我的操作環(huán)境：
Windows 10 專業(yè)版
node V8.5.0
npm V5.3.0
命令行工具 cmder
1. process.env 獲取環(huán)境變量
先來進入 node 命令行， 簡單的看看自己電腦的環(huán)境變量：
node
console.log(process.env)
輸出大量的環(huán)境信息
[圖片上傳失敗...(image-e17ba8-1535186876816)]
接下來學(xué)習(xí)一個window 下的一個命令 set ，下面設(shè)置一個新的環(huán)境變量 aaaa 并賦值 Dog
set aaaa=Dog
[圖片上傳失敗...(image-5b021-1535186876816)]
2. vue
2.1 vue-cli2
vue-cli搭建的項目如何實現(xiàn)多環(huán)境
注意：非vue-cli3.0
2.1.1 process.env 全局常量
初始化vue webpack 項目 并在 build/webpack.dev.conf.js 和src/main.js 打印 process.env
// build/webpack.dev.conf.js
console.log('windows環(huán)境變量', process.env)
[圖片上傳失敗...(image-d4568-1535186876816)]
// src/main.js
console.log('全局常量', process.env)
[圖片上傳失敗...(image-4c44e3-1535186876816)]
其實在編譯階段 process.env 是用node 取的 windows 環(huán)境變量，編譯成功后則是 webpack 通過 DefinePlugin 配置的常量。不管是開發(fā)環(huán)境執(zhí)行的 webpack.dev.conf.js 還是生產(chǎn)環(huán)境的 webpack.prod.conf.js 都是通過引入配置文件的方式 定義了一個新的 process.env 。
[圖片上傳失敗...(image-10a383-1535186876816)]
2.1.2 打包不同的版本
接下來我們的目的的打包不同的版本，所以主要在 webpack.prod.conf.js 打包文件是進行配置。
:one: 設(shè)置一個新的 window 環(huán)境變量 dog
[圖片上傳失敗...(image-fface5-1535186876816)]
[圖片上傳失敗...(image-9529ce-1535186876816)]
:two: 新建一個該環(huán)境的配置文件 config/dog.env.js
[圖片上傳失敗...(image-1c7a4a-1535186876816)]
:three: 根據(jù)環(huán)境變量加載不同的配置3.3.3文件
[圖片上傳失敗...(image-864994-1535186876816)]
:four: 最終打包后得到 dog 相關(guān)配置
[圖片上傳失敗...(image-cb85fd-1535186876816)]
注意：以上是原理講解，在實際開發(fā)過程中一般使用 cross-env 跨平臺設(shè)置環(huán)境變量， 兼容windows 和 mac 端。有興趣也可以了解下 dotenv 以達到像 react 或 vue-cli3.0 那樣以文件來設(shè)置環(huán)境變量。
2.2 vue-cli3.0
文檔越來越健全，直接參考 環(huán)境變量和模式 。
3. react
つづく
