【構建和部署】2.1-環境變量

在開發中經常會有一些需求，根據不同的環境進行不同的操作，比如 url 的替換，dev 環境在 dev 的 url，而線上使用 prod 的環境。在 Pro 的腳手架中就有這樣的一個環境變量 REACT_APP_ENV，我們希望有一些方法只能在演示網站中使用，不會讓 git clone 的用戶錯誤地將這些功能引入。

1. config 中使用

在 Pro 的 config 中有根據環境變量來確認是否要加入 Google Analytics 的統計代碼。如果是 Pro 的 site 部署就加入 Google Analytics 的統計。如果是用戶就會默認的關閉掉這個功能。

const { REACT_APP_ENV } = process.env;

// 針對 preview.pro.ant.design 的 Google Analytics 統計代碼
// preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 專用環境變量，請不要在你的項目中使用它。
if (REACT_APP_ENV === 'site') {
  plugins.push([
    'umi-plugin-ga',
    {
      code: 'UA-72788897-6',
    },
  ]);
}

雖然我們做了這個功能，但是還是希望用戶在使用中儘量刪除這些代碼。 Google Analytics 可以統計非常詳細的資料，這對您的數據來說是個很大的風險。

2. 處理在 lint 中的報錯

config 是 node 環境，所以可以直接用 process.env 的來直接拿到環境變量，但是在 js 的代碼中，您使用 process.env可能只會獲得 NODE_ENV這個在約定俗成的變量，別的變量 webpack 並不會自動幫你注入。

關於 process.env 和 NODE_ENV 看這裏。

這時候我們就需要使用 define,他是根據define-plugin，在 Pro 中我們也是用了這個特性，在 config 中將 node 的環境變量注入 define 配置中：

export default {
  //some config
  // preview.pro.ant.design only do not use in your production ;
  // preview.pro.ant.design 專用環境變量，請不要在你的項目中使用它。
  define: {
    REACT_APP_ENV: REACT_APP_ENV || '',
  },
  // ....
};

使用的時候只需要如下設置，具體代碼看這裏。

if (!authority && REACT_APP_ENV === 'site') {
  return ['admin'];
}

這裏需要注意的是我們不需要通過 window['key'] 的方式來使用它，而是直接使用。具體原理可以看一下define-plugin插件的實現。

3. umi 的默認環境變量

umi 中提供了大量的默認環境變量。這些變量可以幫助我們自動一些腳手架功能。

4. 環境變量代碼中報錯的處理方式

由於環境變量是直接使用，不會通過 window 對象的方式來使用，在 eslint 和 TypeScript 中都會報錯。

eslint 中可以通過增加 globals 的配置來處理報錯。代碼看起來是這樣的：

{
 globals: {
    page: true,
  },
}

在 TypeScript 可以在typings.d.ts 中進行定義：

declare var REACT_APP_ENV: string;