FE - 走向Node与Webpack 之路 - ECMAScript 6.0 简单学习babel

推荐资料

ECMAScript 6 入门 （没有更好的，阮一峰老师的）

【声明】这篇文章是我学习后的总结，谢谢。

1. 介绍

关于ES6 和 ES2015 ：

书中讲了ECMAScript 的历史等，还有ES6和ES2015的关系：

【摘】 ES6 既是一个历史名词，也是一个泛指，含义是5.1版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

webstrom 环境 ：

默认应该选择的是ECMAScript5.1的 修改为ECMAScript6，就支持ES6的语法了！

2. babel转码器

使用ES6语法学代码，使用babel进行转码到现有环境执行。

（1）转码规则

安装转码规则，配置

.babelrc

文件

npm install babel-preset-es2015 -D  : es2015 转码规则
npm install babel-preset-react -D : react 转码规则
npm install babel-preset-stage-3 -D : ES7 不同阶段语法提案的转码规则（共四个阶段），0,1,2,3 选装一个；

新建 在项目中 与

package.json

同一目录 新建

.babelrc

文件 , 基本格式：

presets

定义转码规则，

plugins

定义插件

{
"presets": [
"es2015",
"react",
"stage-3"
],
"plugins": []
}

（2）babel 命令行工具

安装 babel-cli

npm install babel-cli -g : 安装 babel-cli 命令行工具

基本命令：

babel example.js  : 输出标准的js结果
babel example.js --out-file a1.js : 输出标准js 到 a1.js
babel example.js -o a1.js : 输出标准js 到 a1.js
babel src --out-dir lib  : 将src输出标准js到lib
babel src -d lib  : 将src输出标准js到lib
babel src -d lib  -s : 将src输出标准js到lib , -s 参数生成source map文件

Example：

es6 : example.js

/**
* Created by yuan on 2/22/2017.
*/
console.log((x=>x*2)(2));

执行： 下面的可以看懂吧

babel xxx.js 输出标准js结果

D:\webworkspace\webpack-examples\example6>babel example.js
"use strict";

/**
* Created by yuan on 2/22/2017.
*/
console.log(function (x) {
return x * 2;
}(2));

（3）babel-node

安装 babel-cli时自带 babel-node命令工具，Babel-node 在终端直接写代码（REPL）;

基本命令：

babel-node  : 进入REPL环境
.exit ：退出REPL环境
babel-node es6.js : 直接运行es6脚本

Example :

进入终端执行，退出。

D:\webworkspace\webpack-examples\example6>babel-node
> (x=>2*2*x)(1)
4
> .exit

D:\webworkspace\webpack-examples\example6>

执行 es6.js ：比如执行上面的example.js

D:\webworkspace\webpack-examples\example6>babel-node example.js
4

(4) babel-register

改写 require 命令， 为其加上钩子，每当 require 加载js,jsx,es,es6文件的时候，就先用baebl进行转码；

安装：

npm install babel-register -D （--save-dev）

使用 ：

require('babel-register')  : 必须先加载
require('./index.js')  ：自动转码

（5）babel core

某些文件需要使用babel-core api转码：

安装

npm install babel-core -S : 安装core核心包

使用

require('babel-core')

（6）babel polyfill

babel只转换新的js语法，而不转换新的API

安装

npm install babel-polyfill -S (--save)

使用

CommonJS : require('babel-polyfill');
ES6 :   import 'babel-polyfill';

3. babelify

打包成浏览器使用的脚本

安装

npm install babelify babel-preset-2015 -D

package.json 配置

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

命令行使用转码规则

browserify script.js -o bundle.js \ -t [babelify --presets [es2015]]

4.Eslint

静态检查代码语法规范

安装

npm install eslint babel-eslint -D

新建

.eslintrc

文件

{
"parser": "babel-eslint",
"rules": {
...
}
}

package.json 配置

{
"name": "my-module",
"scripts": {
"lint": "eslint my-files.js"
},
"devDependencies": {
"babel-eslint": "...",
"eslint": "..."
}
}

5. 未完

下面 基本语法 和 模块化！