babel需要这样配置

前端精髓

共 2672字,需浏览 6分钟

 ·

2021-02-10 20:14


Babel 是一个编译器(输入源码 => 输出编译后的代码)。就像其他编译器一样,编译过程分为三个阶段:解析、转换和打印输出。


Babel的核心功能位于 @babel/core 模块中。安装:

npm install --save-dev @babel/core


现在,Babel 虽然开箱即用,但是什么动作都不做。它基本上类似于 const babel = code => code; ,将代码解析之后再输出同样的代码。如果想要 Babel 做一些实际的工作,就需要为其添加插件。


要将 ES2015+ 语法转换为 ES5,我们可以安装以下官方插件 plugin:

npm install --save-dev @babel/plugin-transform-arrow-functions


现在,我们代码中的所有箭头函数都将转换为ES5兼容的函数表达式:

const fn = () => 1;
// converted to
var fn = function fn() { return 1;};


除了一个一个的添加插件,你还可以以预设 preset 的形式启用一组插件。


npm install --save-dev @babel/preset-env


babel 在编译时候,会把源代码分为两部分来处理:语法 syntax、API。语法 syntax 比如 const、let、模版字符串、扩展运算符等。API 比如 Array.includes() 等新函数。


预设/插件只会处理第一部分,也就是语法部分。@babel/polyfill,它是被用来处理上述说的 API 部分的:为浏览器不支持的 API 提供对应的兼容性代码,很明显如果你不提供,如果在不支持的浏览器里面使用了新 API ,那么你的页面就会挂掉。


{  "presets": [    [      "@babel/env",      {        "useBuiltIns": "entry",        "corejs": "3"      }    ]  ]}// 然后你需要在你的项目入口文件中顶部引入polyfill。import '@babel/polyfill'


从 babel V7.4.0 版本开始,已经不建议使用该包,建议使用 core-js/stable(JS语法)、regenerator-runtime/runtime (函数运行时)替代。


{  "presets": [    [      "@babel/env",      {        "useBuiltIns": "entry",        "corejs": "3"      }    ]  ]}// 然后你需要在你的项目入口文件中顶部引入polyfill。import "core-js/stable";import "regenerator-runtime/runtime";。


@babel/polyfill 依赖 corejs,corejs 是语法包,里面提供了很多的 ES6 语法,目前有两个版本,默认 core-js@2 版本,还有 core-js@3 版本,版本越高,支持的语法越多,包越大。


@babel-polyfill会带来的一些问题。


1、代码体积大,因为会全部导入,不管你用不用的上。


改善方式是通过按需加载。

{  "presets": [    [      "@babel/env",      {        "targets": {          "chrome": "58",          "ie": "11"        },        "useBuiltIns": "usage",        "corejs": "3"      }    ]  ]}


2、会造成全局污染,比如引入新的全局对象或者修改现有对象原型。


@babel/runtime,是一个底层依赖,是一个生产环境依赖,需要被打包到最终的产物中,它本身会提供的是regenerator-runtime、以及各种helper函数。


我们日常更多的使用到的是 @babel/plugin-transform-runtime,这是一个开发环境依赖,插件会依赖到 @babel/runtime、@babel/runtime-corejs3等。


关于@babel/plugin-transform-runtime我们需要知道两点,1、babel在转码syntax过程中,会加入自己定义的很多babel函数,这些babel函数可能会在每个文件都被重复引用,transform-runtime会把这些重复的helper函数转换成公共的、单独的依赖,节省转码后的文件体积。2、解决上述中@babel/polyfill会带来的一些问题,transform-runtime以沙盒的方式将新特性API对应的全局变量转换为core-js、regenerator-runtime的引用。


最后总结一下,我需要安装的依赖和配置,通过下面的例子,就可以保证代码正常使用了:

npm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtimenpm install --save @babel/runtime-corejs3npm install --save-dev @babel/corenpm install --save-dev @babel/preset-env


在.babelrc配置:

{  "presets": [    [      "@babel/env",      {        "targets": {          "chrome": "58",          "ie": "11"        }      }    ]  ],  "plugins": [    [      "@babel/transform-runtime",      {        "corejs": 3      }    ]  ]}
浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报