ES6-Babel-Browserify模块化教程

1. 创建项目结构

  |-js
    |-src
      |-module1.js
      |-module2.js
      |-module3.js
      |-app.js
  |-index.html
  |-package.json
    {
    "name" : "es6-module",
    "version" : "1.0.0"
  }

2. 安装babel-cli（cli命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面）, babel-preset-es2015和browserify:

第一步，全局安装：npm install babel-cli browserify -g

第二步，局部安装：npm install babel-preset-es2015 --save-dev

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/app.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. 编译源代码

  * 第一步：使用Babel将ES6编译为ES5代码，命令为: babel js/src -d js/lib 

 * 第二步：使用Browserify编译js上一步生成的js，命令为: browserify js/lib/app.js -o js/lib/bundle.js 

 * 备注：第一步操作后Babel将es6的模块化语法，转换成了CommonJS模块化语法（浏览器不识别），所以需要第二步用Browserify再次编译。 

 6. 页面中引入测试

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