6_ES6模塊化

ES6-Babel-Browserify使用

創建項目結構

|-js
  |-libs
  |-src
    |-app.js
    |-module1.js
    |-module2.js
    |-module3.js
  .babelrc(JSON文件)
  index.html
  package.json

1. 定義package.json文件

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

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

npm install babel-cli browserify -g
    // 用於調用babel命令
npm install babel-preset-es2015 --save-dev
    // ES6->ES5
npm install browserify --save-dev 
    // 打包工具

// preset 預設(將es6轉換成es5的所有插件打包)

3. 定義.babelrc文件 (babelrc執行之前先看這個文件)

{
    "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
      }
    }


// js/src/app.js(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代碼(但包含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)

// 1.下載jQuery模塊: 
    npm install jquery@1 --save	//@後下載1裏邊最新的
// 2. 在app.js中引入並使用
    import $ from 'jquery'
    $('body').css('background', 'red'