JS模塊化

commonjs

服務器端
    - 暴露module.exports對象
        - module.exports = {}
        - module.exports = function (){}
        - module.exports.xxx = 
    - 引用 let module = require('path')
瀏覽器端
    - npm i browserify -g
    - 編譯打包
        - browserify js/src/app.js -o js/dist/bundle.js //>是寫入文件
        - <script>引入bundle.js便可

AMD(require.js)

用於瀏覽器端異步加載多個js模塊
　　- 異步加載
　　- 防止順序錯亂

下載rerquire.js
    - 無依賴模塊
    define(function (){
            return //return回暴露的模塊
    })
    - 有依賴模塊
    define(['moduleName'], function (moduleName){
        return
    })
    - 主模塊
    (function () {
        requirejs.config({
            baseurl: 'js/', //以哪一個相對的路徑爲根據
            path: {
                moduleName1: './modules/module1', //後綴無.js
                moduleName2: './modules/module2'
            }
        })
        requirejs(['moduleName'], function (moduleName) {
        })
    })()
    - <script data-mian = 'js/app.js' src = 'js/libs/require.js'>
        - 引入require和主頁面
引用第三方模塊
    - 支持AMD的(如jquery)
    - 不支持的
    path: {
        moduleName: 'path'
    }
    shim: {
        moduleName:{
            exports: moduleName
        }
    }

 CMD(Seajs)

模塊引入
    define(function (require, exports, module) {
        var moduleName1 = require('path1') //同步引用
        require.async('path2', function (moduleName2) {}) //異步加載
    })

主模塊
    define(function (require) {})

標籤
    <script type = 'text/javascript' src = 'js/libs/sea.js'></script>
    <script type = 'text/javascript'>seajs.use('./js/src/app.js')</script>

ES6

配置打包工具
    - npm i babel-cli browserify -g
    - npm i babel-preset-es2015 --save-dev
        - babel-cli  //cli:command line interface
        - babel-preset-es2015 //ES6轉換爲ES5的包
        - browserify
    - .babelrc{"presets":["es2015"]}
執行
    - babel js/src -d js/libs  
    - browserify js/libs/app.js -o js/lib/bundle.js 
ES6暴露方式
    - 常規暴露
        - export value或 export {fun}   //可直接暴露屢次
        - import {value} from 'path' //直接暴露的必須解構方式引用
    - 默認暴露
        - export default value 
        - import module from 'path' //可直接使用