ES6-Babel-Browserify模块化教程

1. 创建项目结构

|-js
  |-src
    |-module1.js
    |-module2.js
    |-module3.js
    |-main.js
|-index.html
|-package.json

2. 安装babel-cli, babel-preset-es2015和browserify:

第一步，全局安装：npm install babel-cli browserify -g
第二步，局部安装：npm install babel-preset-es2015
备注：若全局已经安装过browserify，可以在第一步中去除browserify

3. 创建.babelrc文件(给babel指定具体的任务)，内容如下：

{
   "presets": ["es2015"]
}

4. 编码

js/src/module1.js

//分别暴露
export function foo() {
  console.log('module1 foo()');
}
export function bar() {
  console.log('module1 bar()');
}
export const DATA_ARR = [1, 3, 5, 1]

js/src/module2.js

//统一暴露
let data = 'module2 data'

function fun1() {
  console.log('module2 fun1() ' + data);
}

function fun2() {
  console.log('module2 fun2() ' + data);
}

export {fun1, fun2}

js/src/module3.js

//默认暴露
export default {
  name: 'Tom',
  setName: function (name) {
    this.name = name
  }
}

下载jQuery模块: npm install jquery --save

js/src/main.js

import {foo, bar} from './module1'
import {DATA_ARR} from './module1'
import {fun1, fun2} from './module2'
import person from './module3'

import $ from 'jquery'

$('body').css('background', 'red')

foo()
bar()
console.log(DATA_ARR);
fun1()
fun2()

person.setName('JACK')
console.log(person.name);

5. 编译源代码（确保已进入06_ES6_Babel_Browserify所在文件夹）

第一步：使用 Babel 将 ES6 编译为 ES5 代码
命令为: babel js/src -d js/build
第二步：使用Browserify编译js上一步生成的js
命令为: browserify js/build/main.js -o js/build/build.js
备注：第一步操作后Babel将es6的模块化语法，转换成了CommonJS模块化语法（浏览器不识别），所以需要第二步用Browserify再次编译。

6. 页面中引入测试

<script type="text/javascript" src="js/build/build.js"></script>

注意

ES6的模块化分为导出（export）与导入（import）两个模块。
在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）
如果你不想暴露模块当中的变量名字，可以通过as来进行操作:
如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法as