Babel概述及使用

Babel 转码器

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。

// 转码前
input.map(item => item + 1);  // 转码后 input.map(function (item) { return item + 1; });

上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。

配置文件.babelrc

Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

{"presets": [], "plugins": [] }

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# 最新转码规则
$ npm install --save-dev babel-preset-latest # react 转码规则 $ npm install --save-dev babel-preset-react # 不同阶段语法提案的转码规则（共有4个阶段），选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3

然后，将这些规则加入.babelrc。

  {"presets": [ "latest", "react", "stage-2" ], "plugins": [] }

注意，以下所有 Babel工具和模块的使用，都必须先写好.babelrc。

转载于:https://www.cnblogs.com/yuexiuyi/p/7395660.html

Babel概述及使用相关推荐

ES6（ECMAScript6）-ES11 从入门到修仙
ES6:ECMAScript6 一.ES6新特性 1.let变量声明以及声明特性 1.1 let let 关键字用来声明变量,使用 let 声明的变量有以下几个特点: let a; let b,c,d ...
ES6-ES11学习笔记
ES6-ES11学习笔记一.概述 1 .什么是 ECMA ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个组织 ...
前端工程化概述||模块化相关规范
前端工程化模块化概述浏览器端模块化规范服务器端模块化规范大一统的模块化规范 – ES6模块化 ① npm install --save-dev @babel/core @babel/cli @ ...
MIT自然语言处理第一讲：简介和概述（第一部分）
自然语言处理:背景和概述 Natural Language Processing:Background and Overview 作者:Regina Barzilay(MIT,EECS Departm ...
webpack — 概述介绍
webpack概述 webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web 开发中所面临的困境. webpack提供了友好的模块化支持,以及代码压缩混淆.处理js兼容问题.性能优化 ...
004-React入门概述
一.概述参考地址:https://reactjs.org/docs/try-react.html 1.1.本地快速体验 <!DOCTYPE html> <html><h ...
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用
参考资料文章目录 01 大前端基础知识概述 02 概述和前端工具VSCode安装 03 Nodejs的安装 04 Nodejs了解和快速入门 05 Nodejs实现htppserver服务 06 N ...
大前端进阶！NodeJS、Npm、Es6、Babel、Webpack、模块化开发
文章目录大前端进阶一.Node.js 1.1.Nodejs介绍和安装 1.2 .Nodejs入门 1.2.1.快速入门-Hello World 1.2.2.Node - 实现请求响应 1.2.3. ...
（硅谷课堂项目）Java开发笔记2：项目概述，搭建项目环境和开发讲师管理接口
文章目录 (硅谷课堂项目)Java开发笔记2:项目概述,搭建项目环境和开发讲师管理接口 1.项目概述 1.1 项目介绍 1.2 硅谷课程流程图 1.3 硅谷课堂功能架构 1.4 硅谷课堂技术架构 1. ...

Babel概述及使用

Babel 转码器

配置文件.babelrc

Babel概述及使用相关推荐

最新文章

热门文章