ES6模块化

ES6-Babel-Browserify

Babel作用是将ES6的代码转为ES5，但转后的代码含有nodejs的语法，然后再使用Browserify转换为最终的浏览器端的代码。

|-js
  |-src
    |-module1.js
    |-module2.js
    |-module3.js
    |-app.js
  |-lib
|-index.html
|-package.json
|-.babelrc

1. 定义package.json文件

{
  "name" : "es6-babel-browserify",
  "version" : "1.0.0"
}

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

npm install babel-cli browserify -g
npm install babel-preset-es2015 --save-dev

3. 定义.babelrc文件

{
  "presets": ["es2015"]
}

4. 编码

• js/src/module1.js 基本导出

  export function foo() {
      console.log('module1 foo()')
  }
  
  export let bar = function () {
      console.log('module1 bar()')
  }
  
  export const DATA_ARR = [1, 3, 4, 1]
  

• js/src/module2.js 导出对象

  let data = 'module2 data'
  
  function foo() {
      console.log('module2 foo() ' + data)
  }
  
  function bar() {
      console.log('module2 bar() ' + data)
  }
  
  export {foo, bar as fun2}
  

• js/src/module3.js 默认导出

  export default {
      name: 'Bill',
      setName: function (name) {
          this.name = name
      }
  }
  

• js/src/module4.js 默认构造导出

  export default class Module4 {
      constructor(name) {
          this.name = name
      }
  }
  
  export function compareModule4(o1, o2) {
      return o1.name === o2.name
  }
  

• js/src/app.js 涵盖几乎所有的导入方式

  import {foo, bar} from './module1'
  import * as m1 from "./module1"
  import {foo as m2foo, fun2} from "./module2"
  import person from './module3'
  import Module4 from './module4'
  import {compareModule4} from './module4'
  import $ from 'jquery'
  
  // jquery
  $('body').css('background', 'red')
  
  // module1
  foo()
  bar()
  m1.foo()
  m1.bar()
  console.log(m1.DATA_ARR)
  
  // module2
  m2foo()
  fun2()
  
  // module3
  person.setName('Jack')
  console.log(person.name)
  
  // module4
  const obj1 = new Module4('zhangSan')
  const obj2 = new Module4('liSi')
  console.log(obj1.name)
  console.log(obj2.name)
  console.log(compareModule4(obj1, obj2))
  

5. 编译

• 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) :

  babel js/src -d js/lib
  

• 使用Browserify编译js :

  browserify js/lib/app.js -o js/lib/bundle.js
  

6. 页面中引入测试

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

7. 引入第三方模块(jQuery)

• 下载jQuery模块:

  npm install jquery@1 --save
  

• 在app.js中引入并使用

  import $ from 'jquery';
  $('body').css('background', 'red');