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

Question

我正在开发一个 Vue 应用程序(使用 cli 3)。第三方前端组件需要配置文件。我想根据我的 Node 环境使用不同的文件，但不清楚如何执行此操作。例如，我的目录结构可能有tree.development.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 和 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';