认识Babel ***

loushumei

于 2021-02-04 19:12:29 发布

阅读量310

点赞数 1

CC 4.0 BY-SA版权

分类专栏：框架插件工具篇

本文链接：https://blog.youkuaiyun.com/express_yourself/article/details/113662799

Babel是一个转换ES6+语法到ES5的工具，确保代码在旧浏览器中运行。它不处理新API，如Promise。babel-polyfill提供ES6+的API补丁，但可能导致全局污染。babel-runtime则通过沙盒机制避免污染，按需引入所需功能。在项目中，选择使用取决于是否需要全局补丁和是否开发第三方库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Babel是什么？
用于解析ES6，甚至比ES6更高级的语法，到ES5或ES4级别，满足浏览器的兼容性

环境搭建 & 基本配置

① package.json配置安装：

"devDependencies": {
  "@babel/cli": "^7.7.5",
  "@babel/core": "^7.7.5",
  "@babel/preset-env": "^7.7.5"
  "@babel/plugin-transform-runtime": "^7.7.5",
},
"dependencies": {
  "@babel/polyfill": "^7.7.0",
  "@babel/runtime": "^7.7.5"
}

.babelrc文件配置:

plugins 里配置插件负责进行语法的转换
preset 预设，常用的plugins的集合，可以作为 Babel 插件的组合。

{
	"presets": [
		[
			"@babel/preset-env", //es6+常用语法的解析
		]
	],
	"plugins": [
	]
}

babel-polyfill

前置知识：

polyfill补丁：

polyfill是补丁，例如Array.IndexOf方法，根据浏览器的兼容情况，若不兼容，polyfill做一个补丁，使之兼容。

core-js 标准库：

core.js 是一个标准的库，集成了 ES6 ES7等所有新语法的polyfill（补丁），缺点是不支持regenerator的兼容性。

regenerator 运行时库：

这是 Face

最低0.47元/天解锁文章

200万优质内容无限畅学