使用 webpack 使用基于节点环境的特定文件

Posted 2023-02-22

【中文标题】使用 webpack 使用基于节点环境的特定文件

【英文标题】：Use webpack to use specific file based on node environment

【发布时间】：2019-06-21 21:29:22

【问题描述】：

我正在开发一个 Vue 应用程序（使用 cli 3）。第三方前端组件需要一个配置文件。我想根据我的节点环境使用不同的文件，但不清楚如何执行此操作。例如，我的目录结构可能有 tree.production.js 和 tree.development.js。在我的主要 javascript 中，我似乎无法指定

import tree from `./assets/tree.$process.env.NODE_ENV.js`;

我也不能使用 .env 文件来指定

import tree from `./assets/tree.$process.env.VUE_APP_TREE.js`;

我想尝试的是利用 webpack a la the vue.config.js 来使用正确的文件并将其重命名为 tree.js 所以在我的代码中我可以指定

import tree from "./assets/tree.js"

或者实际上是关于如何实现这种非常平凡且看似常规的开发/产品切换的最佳实践。

类似

//vue.config.js
module.exports = 
  configureWebpack: config => 
    if (process.env.NODE_ENV === 'production') 
      // do something with tree.production.js...
     else 
      // do something with tree.development.js
    
  

【参考方案1】：

问题的根源在于 ES6 import（和 export）是静态分析的——也就是说，你不能像你尝试的那样拥有动态值。您可以尝试使用 import().then(module => ...) 语法进行动态导入，但这并不是您真正需要的。

我想你正在寻找resolve.alias。在你的 webpack 配置中它看起来像这样：

  //...
  resolve: 
    alias: 
      'assets/tree': path.resolve(__dirname, `path/to/assets/tree.$process.env.NODE_ENV.js`)
    
  

在您的应用程序中，您可以像这样导入它：

import  tree  from 'assets/tree';

【讨论】：

我看到const something = require(`./$dynamic/file`).default 可以工作，但不能使用require(`./$process.env.SOME_ENV/file`)，因为客户端上没有定义进程。

@HMR - 抱歉，只是以某种方式看到此评论，但大多数 webpack 设置（例如 create-react-app）应该为您解析环境变量（我认为是因为 this plugin）。我刚刚在一个反应​​项目上进行了测试，const foo = require(process.env.NODE_ENV === 'production' ? './bar' : './foo') 为我工作。不过你是对的，一般process在前端是不可用的。

【参考方案2】：

很抱歉听到您在这方面遇到了麻烦。没错，您将无法使用静态导入解决方案来加载文件。虽然取决于您打算如何使用 tree.js，但仍有一些选项。我不知道树是什么，但我假设您只关心在 webpack 环境中运行代码。

那么您有什么选择，不妨考虑以下选项之一：

动态导入

这对我来说是你最想要的，如果你能够对你的代码使用异步方法，你可以动态加载你的代码（也可以利用代码分割）：

https://webpack.js.org/guides/code-splitting/#dynamic-imports https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234

通过代理有条件地加载

在这个答案中，Alejandro Silva 使用代理文件根据 ENV_VAR 有条件地加载文件。您可以将 webpack 配置为不需要不可能的路径。

Conditional build based on environment using Webpack

---

其他可能符合您要求的内容

convict - 用于加载和合并配置

【讨论】：

动态导入运行良好 谢谢！我很高兴终于有了一个如何延迟加载组件的工作示例。但是因为这个特定组件是应用程序加载的第一个组件，所以使用基于Ryan's 答案的resolve.alias 会更简单一些。更少的代码。