使用webpack根据node环境使用特定文件

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"

或者关于如何实现这个相当平凡且看似常规的 dev/prod 开关的任何最佳实践。

类似

//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

得知您在这方面遇到问题，我们深感抱歉。没错，您将无法使用静态导入解决方案来加载文件。尽管有一些选项取决于你打算用 tree.js 做什么。我不知道什么是树，但我假设你只关心运行你在 webpack 环境中的代码。

那么你有什么选择，也许可以考虑以下选择之一：

动态导入

我觉得这最有可能是您想要的，如果您能够对代码使用异步方法，则可以动态加载代码（也可以利用代码拆分）：

有条件地通过代理加载

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

其他可能符合您要求的

convict - 用于加载和合并配置

Answer 2

问题的根源在于 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';

使用webpack根据node环境使用特定文件

Use webpack to use specific file based on node environment

environment-variables

node.js

webpack

vue.js

vue-cli-3

动态导入

有条件地通过代理加载

其他可能符合您要求的