javascript - Webpack/ES6 动态导入

Question

根据环境变量，我正在使用 ES6 动态导入来加载 Sass 文件。

它工作正常，但是当我使用 Webpack 构建生产目录时，所有 Sass 文件都作为构建目录中的 JS 块导出。

经过一番研究，我终于明白 import() 寻找具有相同路径的相似文件(仅当我在导入中放入变量时)

这是相当有问题的，我想导出正确的 Sass 文件，而不是其他文件。

import(`./assets/scss/App.${brandName}.scss`)

任何的想法 ？

Answer 1

通常，您不能这样做!

因为import语句必须在最上面。因此，您不能在 import 语句之前定义变量。因此，您不能在导入语句中使用该变量。

但是，您可以像这样使用技巧:

import brandName from 'your_path_to_brandName_export'
import(`./assets/scss/App.${brandName}.scss`)

更新

我不确定动态导入，但它可能会进一步帮助您。看到这个 proposal :

<script type="module">
  import * as module from './utils.mjs';
  module.default();
  // → logs 'Hi from the default export!'
  module.doStuff();
  // → logs 'Doing stuff…'
</script>

看到这个 source寻求进一步的帮助。

希望这可以帮助!