时间戳

首页 > 解决方案 > 如何通过 webpack 加载具有多个 babel 设置的相同 js 文件？

javascript - 如何通过 webpack 加载具有多个 babel 设置的相同 js 文件？

问题描述

我的团队拥有一个自定义元素加载器脚本，其工作是从 webcomponentsjs 中提取polyfill，然后定义我们所有的自定义元素。根据浏览器是否支持类，我们必须加载 2 个不同的组件包之一。

我们当前的构建过程是混乱和繁琐的。我们分别运行 webpack 3 次：

  1. 以极少的编译构建组件包
  2. 再次构建组件包，但转译掉类（用于 ie11 支持）
  3. 阅读文件系统以找出这些包的名称（文件名包括哈希，所以我们不知道它们会在前面是什么），并第三次运行 webpack，使用 webpack 的DefinePlugin从 1 和 2 注入包名称.

有没有办法根据导入中的查询参数选择要使用的 babel 设置？我想做这样的事情：

if (supportsClasses) {
  import('./components.js');
else {
  import('./components.js?enableTranspilation');
}

它需要更改此文件及其导入的所有内容的 babel 设置。如果这是可能的，那么我将能够通过一次 webpack 调用（而不是 3 个单独的调用）来构建整个项目。

标签： javascriptwebpackbabeljsbabel-loader

解决方案

推荐阅读