ES6 模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处：

防止命名冲突
代码复用
高维护性

模块化规范产品 ES6之前的模块化规范有：

CommonJS => Nodejs、Browserify
AMD => requireJS
CMD => seaJS

ES6模块化语法模块化功能主要由两个命令构成：export和import

export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能

示例1：

暴露：

    m1.js
    // 分别暴露
    export let name = 'tom'
    export function play(){
        console.log('我们一起玩耍')
    }
    
    m2.js
    // 统一暴露
    let name = 'tom'
    function play(){
        console.log('我们一起玩耍')
    }
    export {name, play}
    
    m3.js
    // 默认暴露
    export default {
        name : 'tom',
        play : function(){
            console.log('我们一起玩耍')
        }
    }

引入：

        //test1.html
        <script type="module">
            // 1.通用的引入方式
            import * as m1 from './m1.js'
            import * as m2 from './m2.js'
            import * as m3 from './m3.js'
            
            m1.play()
        </script>
        
        //test2.html
        <script type="module">
            // 2.解构赋值形式引入
            import {name,play} from './m1.js'
            import {name as xingming, play as wanshua} from './m2.js'
            import {default as m3} from './m3.js' 
            
            m2.play()
        </script>
        
        //test3.html
        <script type="module">
            // 3.简便引入形式，仅适用于默认暴露的模块
            import m3 from "./m3.js"
            
            // 默认暴露出来的内容的用法
            console.log(m3.default.play)
        </script>
        
    </script>

浏览器中使用ES6模块化的方式一：script标签引入

    // app.js 入口文件 负责引入所有其他模块
    
    import * as m1 from './m1.js';
    import * as m2 from './m2.js';
    import * as m3 from './m3.js';

    // test.html 文件 引入app.js 达到引入其他模块的效果
    <script src="./app.js" type="module">
    </script>

浏览器中使用ES6模块化的方式二：使用Babel

    // test.html
    // 1. 安装工具 babel-cli babel-preset-env browserify
    // 2. npx babel ./js -d dist
    // 3. 打包 npx browserify dist/app.js -o dist/bundle.js
    <script src="dist/bundle.js"></script>

ES6学习笔记（五）

ES6 模块化