了解babel:polyfill、loader、 preset-env及 core之间的关系_百度知 ...

发布网友发布时间：2024-12-20 00:18

共1个回答

热心网友时间：2024-12-20 00:21

在使用webpack配置babel解析es6语法的过程中，我们通常仅按照文档说明进行配置，而并未深入了解babel工具链的运作机制。以下是对相关工具链的回顾：

我们经常接触到的有babel、babel-loader、@babel/core、@babel/preset-env、@babel/polyfill以及@babel/plugin-transform-runtime，它们各自的作用是什么？

1、babel：根据babel官网的定义，babel是一个工具链，主要用于将ECMAScript 2015+代码转换为向后兼容版本的JavaScript代码。它不仅包含语法转换等功能，还可以通过@babel/polyfill实现目标环境中缺少的功能。

需要注意的是，babel是一个可以安装的包，并且在webpack 1.x配置中使用它作为loader的简写。然而，这种方式在webpack 2.x以后不再支持，并会出现错误提示。此时，我们需要删除babel包，安装babel-loader，并指定loader: 'babel-loader'。

2、@babel/core：@babel/core是babel的核心库，包含了所有的核心Api，这些Api供babel-loader调用。

3、@babel/preset-env：这是一个预设的插件集合，包含了一组相关的插件，用于指导Babel如何进行代码转换。该插件包含所有es6转化为es5的翻译规则。

4、@babel/polyfill：@babel/preset-env提供了语法转换的规则，但无法弥补浏览器缺失的一些新功能。此时，我们需要polyfill来作为JavaScript的垫片，弥补低版本浏览器缺失的新功能。

需要注意的是，polyfill的体积很大，如果我们不做特殊说明，它会将目标浏览器中缺失的所有es6的新功能都做垫片处理。为了解决这个问题，我们通常在presets的选项里配置"useBuiltIns": "usage"，这样只对使用的新功能做垫片，同时也不需要单独引入import '@babel/polyfill'。

5、babel-loader：当使用webpack打包js时，webpack并不知道如何调用这些规则去编译js。此时，就需要babel-loader作为中间桥梁，通过调用babel/core中的api来告诉webpack如何处理js。

6、@babel/plugin-transform-runtime：polyfill的垫片是在全局变量上挂载目标浏览器缺失的功能，因此在开发类库、第三方模块或组件库时，不能使用babel-polyfill，否则可能会造成全局污染。此时，应使用transform-runtime，它的转换是非侵入性的，不会污染原有的方法。