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

Question

我正在开发一个 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
    }
  }
}

Answer 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';

Answer 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 - 用于加载和合并配置