时间戳

首页 > 解决方案 > 仅使用 Babel/Webpack 进行转译/polyfilling

javascript - 仅使用 Babel/Webpack 进行转译/polyfilling

问题描述

我有一个非常古老的 javascript 代码库，我不想使用现代方式使用标准 webpack 将所有 javascript 文件编译成一个，因为由于网站代码的编写方式，这是不可能的。

但我想使用现代 Javascript（例如 Promises 和 Fetch）编写新脚本，但仍然能够支持 IE11 等旧浏览器。

@babel/preset-env我已经配置了 webpack 和 babel，因此它可以获得多个条目 javascript 文件，并且对于它们中的每一个，它使用and进行经典的转译/polyfilling corejs。

这工作并根据 babel 目标配置填充每个脚本，但它会产生一个问题。它将全局变量/函数封装在脚本中，因此无法从引用它们的其他脚本访问它们（是的旧 javascript）。有没有办法禁用这种结构修改？

我也知道我可以只使用没有 Webpack 的 Babel，但问题是当我尝试 polyfill 例如 Fetch 时，我必须使用https://github.com/github/fetch，它不能只与 Babel afaik 一起使用。

任何帮助表示赞赏。

标签： javascriptwebpackbabeljs

解决方案

我认为你的重构不可避免地会使代码现代化，如果你不小心，有一天你可能会用 webpack 捆绑所有东西；）

您描述的设置，我通过以下方式实现：

module.exports = {
  entry: {
    messages: "./src/messages",
    "hello-world": "./src/hello-world",
  },
  output: {
    library: {
      type: "global",
    },
    filename: "[name].js",
  },
};

每个文件的每个导出都直接放在window- 如果您以正确的顺序加载文件，您可以在代码库中维护不可见的依赖关系。

对于此设置，您可以添加带有预设的 babel 加载程序，如您在问题中所述。此外，您可以开始跨不同文件进行显式导入 - 即使函数 X 在全局范围内可用，您也可以迁移某些地方以显式导入/要求它。

如果你想自己玩我的代码，你可以在这里找到它： https ://github.com/marcin-wosinek/webpack-legacy/

这是实际示例： https ://marcin-wosinek.github.io/webpack-legacy/

推荐阅读