Babel是什么
Babel是一个javascript编译器,是一个工具链,主要讲ECMAScript2015+版本的代码转换为向后兼容的javascript语法。是其能够运行在旧版本的浏览器或者其他环境中。Babel能做事情:
- 语法转换
- 通过Polyfill能够在添加目标环境缺失的特性(@babel/polyfill模块提供)
- 源码转换
Babel尽可能用最少的代码并且不依赖太大量的运行环境。通过Babel提供的loose选项,可以在特定转换情况下在符合规范、文件大小和速度之间做折中
使用Babel
在项目中添加Babel的配置过程如下:
-
安装所需要的包
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfillbabel中的不同模块都放在不同的包下面。
-
在项目根目录下创建babel.config.js的配置文件,其内容为:
const presets = [ [ "@babel/env", { targets: { edge: "17", firefox: "60", chrome: "67", safari: "usage", }, useBuiltIns: "usage", // 这个选项用于配置@babel/env如何处理polyfill //有三种取值,usage、entry、false //usage: 为polyfill添加特殊的import当他们被每个文件使用的时候 //打包工具仅仅之后加载一次相同的polyfill //需要自己添加和安装corejs corejs: "3.0.1" } ] ]
如果不添加useBuiltIns,有写API不会被编译,比如Array.from。
babel配置文件细节请看文章后面的部分。
-
运行babel命令进行转换,如下面将src目录下所有代码编译到lib目录:
./node_modules/.bin/babel src --out-dir lib
通过以上三步我们就可以使用babel,通过babel我们可以使用新的javascript语法来编写程序,然后通过babel编译,让他们能够在旧的浏览器上或其他能够执行javascript的环境上执行。
plugin和preset
代码转换的功能以插件的形式出现,插件是小型javascript程序,用于指导Babel如何对代码进行转换。
preset是一组预设的插件。如果不进行任何的配置,preset包含的插件将支持所有最新的javascript特性。
可以通过命令行或者配置文件的方式对插件和preset进行配置。
Polyfill
Polyfill转换目标环境不支持的特性。Polyfill包括core-js和一个自定义的regenerator runtime模块用于模拟完整的ES2015+环境。
polyfill应该和@babel/preset-env以及useBuiltIns选项一起使用,这样就不会自动导入没有被引入的polyfill。
为了使用polyfill,需要在入口的前面使用require/import导入polyfill
require("@babel/polyfill");
// 或者
import "@babel/polyfill";
在webpack中使用polyfill
- 使用@babel/preset-env
- 如果使用了useBuiltIns: 'usage’选项,不需要再任何文件中引入@babel/polyfill,只需要使用npm install安装@babel/polyfill。
- 如果useBuiltIns: 'entry’选项使用,需要在入口文件的顶部通过require或者import导入polyfill
- 如果没有制定useBuiltIns或者useBuiltIns:false,需要在webpack.config.js中通过如下使用:
module.exports = {
entry: ["@babel/polyfill", "./app/js"],
}
配置文件
配置文件的所有选项:https://babeljs.io/docs/en/options
常用的选项有下面两个:
{
"presets": [...],
"plugins": [...]
}