Babel转码器 

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

1 安装

先在工作区中创建babeltest项目

进入终端

1.1 安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

 npm install --global babel-cli

#查看是否安装成功

babel -    -version

2 Babel的使用

2.1 初始化项目

npm init -y

2.2 创建文件

src/01.js

下面是一段ES6代码： 

// 转码前

// 定义数据

let input = [1, 2, 3]

// 将数组的每个元素 +1

input = input.map(item => item + 1)

console.log(input)

2.3 配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。 

{

"presets": [],

"plugins": []

}

presets字段设定转码规则，将es2015规则加入 .babelrc： 

{

"presets": ["es2015"],

"plugins": []

}

2.4 安装转码器

在项目中安装

npm install --save-dev babel-preset-es2015

2.5 转码

# 转码结果写入一个文件

mkdir dist1

# --out-file 或 -o 参数指定输出文件

babel src/01.js --out-file dist1/01.js

# 或者

Babe    l src/01.js -o dist1/01.js

# 整个目录转码

mkdir dist2

# --out-dir 或 -d 参数指定输出目录

babel src --out-dir dist2

# 或者

babel src -d dist2

2.6 自定义脚本

改写package.json：

 {

// ...

"scripts": {

// ...

"build": "babel src\\01.js -o dist\\01.js"

},

}

转码的时候，执行下面的命令：

 mkdir dist

npm run build

4、 模块化简介

4.1 模块化产生的背景

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）了。

4.2 什么是模块化开发

传统非模块化开发有如下的缺点：

• 命名冲突

• 文件依赖

模块化规范：

• CommonJS模块化规范

• ES6模块化规范

4.3 CommonJS模块规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

4.3.1 创建“module”文件夹

4.3.2 导出模块

创建 src/common.js:用来四则远算

/ 定义成员：

const sum = function(a,b){

return parseInt(a) + parseInt(b)

}

const subtract = function(a,b){

return parseInt(a) - parseInt(b)

}

const multiply = function(a,b){

return parseInt(a) * parseInt(b)

}

const divide = function(a,b){

return parseInt(a) / parseInt(b)

}

导出模块中的成员

// 导出成员：

module.exports = {

sum: sum,

subtract: subtract,

multiply: multiply,

divide: divide

}

简写(方法名和定义的名字一致) 

// 导出成员：

module.exports = {

sum,

subtract,

multiply,

divide

}

4.3.3 导入模块

创建 src/main.js:用来调用common.js 

//引入模块，注意：当前路径必须写 ./

const m = require('./common.js')

console.log(m)

const result1 = m.sum(1, 2)

const result2 = m.subtract(1, 2)

console.log(result1, result2)

4.3.4 运行程序

common.js使用 exports 和require 来导出、导入模块。

4.4 ES6模块化规范

ES6使用 export 和 import 来导出、导入模块。

4.4.1 导出模块

创建 es6/userApi.js

export function getList() {
      console.log('获取数据列表')
}
export function save() {
     console.log('保存数据')
}

4.4.2 导入模块

创建 es6/user.js

//只取需要的方法即可，多个方法用逗号分隔

import { getList, save } from "./userApi.js"

getList()

save()

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

4.4.3 初始化项目

npm init -y

4.4.4 配置 .babelrc

 {

"presets": ["es2015"],

"plugins": []

}

4.4.5 安装转码器

在项目中安装

npm install --save-dev babel-preset-es2015

4.4.6 定义运行脚本

package.json中增加"build-m"：

 {
// ...
"scripts": {
    "build-m": "babel src -d dist"
}
}

4.4.7 执行命令转码 

npm run build-m

4.4.8 运行程序 

需要把ES6转成ES5模式，然后运行：

4.5 ES6模块化的另一种写法

4.5.1 导出模块

创建 es6-2/userApi2.js

export default {
getList() {
console.log('获取数据列表2')
},
save() {
console.log('保存数据2')
}
}

4.5.2 导入模块

创建 es6-2 /user2.js

import user from "./userApi2.js"

user.getList()

user.save()

4.5.3 运行

1、转码；2、运行