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的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。