前端工程中注入构建参数的过程 -- 区分开发和生产环境

在前端工程中，经常需要根据不同的环境注入不同的构建参数。这些参数可能包括API的端点、环境变量等。下面是一个详细的过程，展示了如何在前端工程中注入构建参数，并使用这些参数。

1. 使用 cross-env 注入环境变量

首先，我们需要在启动脚本中使用 cross-env 来注入环境变量。cross-env 是一个运行跨平台设置和使用环境变量的脚本。例如，我们可以在 npm 脚本中使用以下命令来注入 WEB_PORT 变量，并通过 --env 参数向环境中注入 iweb 变量：

"scripts": {
  "start": "cross-env WEB_PORT=5050 --env iweb=192.168.1.170 webpack serve"
}

2. 在 Webpack 配置中使用注入的变量

在 Webpack 的配置文件中，我们可以使用 env.iweb 来获取注入的 IP 信息，使用 process.env.WEB_PORT 来获取注入的端口信息。这样，我们就可以根据不同的环境来配置 Webpack。

3. 使用 DefinePlugin 插件注入全局变量

为了在代码中方便地使用这些环境变量，我们可以使用 Webpack 的 DefinePlugin 插件来注入全局变量。例如，我们可以注入 WEB_URL 和 WEB_PORT 这两个全局变量：

new webpack.DefinePlugin({
  'process.env.WEB_URL': JSON.stringify(env.iweb),
  'process.env.WEB_PORT': JSON.stringify(process.env.WEB_PORT)
});

这里有个大坑，那就是必须使用 JSON.stringify() 包裹，否则会有各种问题！

4. 在 ESLint 和 TypeScript 中声明全局变量

为了让 ESLint 和 TypeScript 知道这些全局变量的存在，并避免类型错误或未定义变量的警告，我们需要在 .eslintrc.js 中声明这些变量为只读，并在 declaration.d.ts 文件中声明其类型为 string：

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  globals: {
    WEB_URL: 'readonly',
    WEB_PORT: 'readonly',
  },
  // 其他 ESLint 配置...
};

// declaration.d.ts
declare const WEB_URL: string;
declare const WEB_PORT: string;

5. 在组件中使用注入的全局变量

最后，在组件中，我们可以使用这些全局变量来构建基本的 URL。如果 WEB_URL 和 WEB_PORT 的值都存在，则 baseUrl 的值为 http://${WEB_URL}:${WEB_PORT}，否则为 window.location.origin：

const baseUrl = WEB_URL && WEB_PORT ? `http://${WEB_URL}:${WEB_PORT}` : window.location.origin;

这样，我们就完成了前端工程中注入构建参数的全过程，并可以在项目中使用这些参数来配置 API 端点、环境变量等。这种方法提高了项目的灵活性和可配置性，使得项目可以在不同的环境中顺利运行。