JavaScript 学习笔记-- ES6学习（一）介绍以及Babel的使用

本文摘自阮一峰老师的《ECMAScript 6入门》，原文地址：http://es6.ruanyifeng.com/#docs/intro

ECMAScript 6 是一个泛指，含义是5.1版本后的JavaScript的下一代标准，涵盖了ES2015, ES2016, ES2017等。

Babel转码器是一个广泛使用的ES6转码器，可以将ES6转码为ES5。

配置文件：.babelrc

配置文件基本格式：

// .babelrc{“presets”: [],"plugins": [],
}

使用babel先要安装规则集，安装完后加入到配置文件中。官方的规则集如下：

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015 # react转码规则
 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则（共有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": ["es2015","react","stage-2"],"plugins": []}

babel-ci 模块

babel-ci模块是在命令行中使用babel, 使用babel命令可以直接对文件进行转码，对于项目来说，可以直接将其写在package.json中，然后将命令放在scripts 中。

安装命令如下：

$ npm install --global-cli

基本用法如下：

# 转码结果输出到标准输出
$ babel example.js# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib# -s 参数生成source map文件
$ babel src -d lib -s

在项目中装载和使用babel-cli:

# 安装
$ npm install --save-dev babel-cli

// package.json
{// ..."devDependencies": {"babel-cli": "^6.0.0"},"scripts": {"build": "babel src -d lib"},
}

babel-register 模块

babel-register模块改写require命令，为它加上一个钩子，此后，每当使用require加载.js, .jsx, 和.es6后缀名的文件，就会先用Babel进行转码：

$ npm install --save-dev babel-register

require("babel-register");
require("./index.js");

注意： babel-register只会对require命令加载的文件转码，而不会对当前文件转码。

Babel可以用于浏览器环境，不过从6.0版本开始，不再直接提供浏览器版本，而是要用构建工具构建出来。

babel 和browserify 配合使用：

{   "browserify": {     "transform": [["babelify", { "presets": ["es2015"] }]]   }
}

转载于:https://www.cnblogs.com/JacobQiao/p/6200811.html

JavaScript 学习笔记-- ES6学习（一）介绍以及Babel的使用相关推荐

JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3;//等价于var [a, b, ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
C语言学习笔记---001C语言的介绍,编译过程原理,工具等
C语言学习笔记---001C语言的介绍,编译过程原理,工具等创梦技术交流平台:资源下载,技术交流,网络赚钱: 交流qq群:1群:248318056 2群:251572072 技术交流平台:cre.i ...
ESP32学习笔记(一) 芯片型号介绍
ESP32学习笔记(一) 芯片型号介绍目录: ESP32学习笔记(一) 芯片型号介绍 ESP32学习笔记(二) 开发环境搭建 VSCode+platformio ESP32学习笔记(三) 硬件资源介 ...
STM32 HAL库学习笔记2 HAL库介绍
STM32 HAL库学习笔记2 HAL库介绍 CMSIS标准一.再次认识HAL库 HAL库设计思想 HAL库实现方式以GPIO模块为例 GPIO外设数据类型 GPIO外设接口函数二.使用HAL库 ...
SilverLight学习笔记--进一步学习Isolated Storage独立存储一（理论篇）
在"silverlight如何在客户端读取文件"以及"silverlight如何在客户端写入文件"两篇文章中我们初步接触了Isolated Storage概念. ...
Python3学习笔记之-学习基础（第三篇）
Python3学习笔记之-学习基础(第三篇) 文章目录目录 Python3学习笔记之-学习基础(第三篇) 文章目录一.循环 1.for循环 2.while循环 3.break,continue 二 ...
强化学习笔记-强化学习概述
强化学习笔记-强化学习概述机器学习分类强化学习与监督学习的异同点强化学习基本原理强化学习解决的是什么样的问题强化学习分类请分别解释随机性策略和确定性策略回报.值函数.行为值函数三个指标的 ...
Web学习笔记——ES6（下）
ES6学习笔记(下) 六.对象的扩展 1.对象字面量属性的简洁表示法方法的简洁表示法属性名表达式 2.对象的扩展运算符 3.对象的新增方法 Object.is Object.assign 七.S ...

JavaScript 学习笔记-- ES6学习（一）介绍以及Babel的使用

配置文件：.babelrc

JavaScript 学习笔记-- ES6学习（一）介绍以及Babel的使用相关推荐

最新文章

热门文章