根据不同的环境引入不同的script

语法知识

webpack 使用 ejs 作为html模板语法工具

标签含义

• <% '脚本' 标签，用于流程控制，无输出。

• <%= 输出数据到模板（输出是转义 HTML 标签）

• %> 一般结束标签

方案

1. if else

   <% if (process.env.CODE_ENV === 'dev') { %>
     <script src="//devstatic.XXX.com/common-lib/area/default/area.simple.min.js"></script>
   <% } else if (process.env.CODE_ENV === 'qa') { %>
     <script src="//qastatic.XXX.com/common-lib/area/default/area.simple.min.js"></script>
   <% } else { %>
     <script src="//static.XXX.com/common-lib/area/default/area.simple.min.js"></script>
   <% } %>

2. if else 简化

   <% if (process.env.CODE_ENV === 'dev' || process.env.CODE_ENV === 'qa') { %>
     <script src="//<%= process.env.CODE_ENV %>static.XXX.com/common-lib/area/default/area.simple.min.js"></script>
   <% } else { %>
     <script src="//static.XXX.com/common-lib/area/default/area.simple.min.js"></script>
   <% } %>

3. 三元表达式

   <script src="//<%= process.env.CODE_ENV === 'prod' ? '' : process.env.CODE_ENV %>static.XXX.com/common-lib/area/default/area.simple.min.js"></script>

4. 定义环境变量

   <script src="//<%= process.env.STATIC_ENV %>static.XXX.com/common-lib/area/default/area.simple.min.js"></script>

   // craco.config.js
   const STATIC_ENV_MAP = {dev: 'dev', qa: 'qa', prod: ''}
   plugins: [
     new webpack.DefinePlugin({
       'process.env.CODE_ENV': JSON.stringify(process.env.CODE_ENV),
       'process.env.STATIC_ENV': JSON.stringify(STATIC_ENV_MAP[process.env.CODE_ENV]),
     })
   ]

5. 定义环境变量-优化-最终采用

   yarn add dotenv dotenv-expand

   <script src="<%= process.env.STATIC_ENV %>/common-lib/area/default/area.simple.min.js"></script>

   // craco.config.js
   const dotenv = require('dotenv');
   const dotenvExpand = require('dotenv-expand');
   const env = dotenv.config({ path: path.join(__dirname, `.env.${process.env.CODE_ENV}`) });
   plugins: [
     new webpack.DefinePlugin({
       'process.env': JSON.stringify(dotenvExpand.expand(env).parsed),
       'process.env.CODE_ENV': JSON.stringify(process.env.CODE_ENV),
     })
   ]

   // .env.dev
   # dev环境
   STATIC_ENV = '//devstatic.XXX.com'

   // .env.qa
   # qa环境
   STATIC_ENV = '//qastatic.XXXcom'

   // .env.prod
   # prod环境
   STATIC_ENV = '//static.XXX.com'