模块化介绍

模块化的优势：

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

模块化的两个主要命令：

• export：用于规定模块的对外接口
• import：用户输入其它模块提供的功能

模块引入与数据暴露的不同实现方式

1. 数据暴露的三种方式

1.1 分别暴露

        // js文件
        export let idx = 1
        export function add(x, y) {
            return x + y 
        }
        
        // html文件
        <script type="module">
            import * as m from './js/index.js'
            log(m)  // Moudle
            console.log(m.idx)  // 1
            console.log(m.add(1, 2))  // 3
        </script>
1
2
3
4
5
6
7
8
9
10
11
12
13

1.2 统一暴露

        // js文件
        let idx = 1
        function add(x, y) {
            return x + y 
        }
        export {idx, add}
        
        // html文件
        <script type="module">
            import * as m from './js/index.js'
            log(m)  // Moudle
            console.log(m.idx)  // 1
            console.log(m.add(1, 2))  // 3
        </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.3 默认暴露

        // js文件
        export default {
            idx: 1,
            add: function(x, y) {
                return x + y 
            }
        }
        
        // html文件
        <script type="module">
            import * as m from './js/index.js'
            console.log(m.default)  // Moudle
            console.log(m.default.idx)  // 1
            console.log(m.default.add(1, 2))  // 3
        </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 模块引入的三种方式

2.1 通用导入方式

        import * as m from './js/index.js'
1

2.2 解构赋值方式

        import {idx, add} from './js/index.js'
        import {idx as idx1, add as add1} from './js/index.js'
        import {default as mm} from './js/index.js'  // 针对默认暴露
1
2
3

2.3 只针对默认暴露的引入模块方式

        import mm from './js/index.js'
1

使用babel对ES6模块化代码进行转换

不是所有浏览器都对ES6语法支持，所以需要用babel将ES6语法转换为ES5语法使得浏览器解析。
具体步骤：

1. 安装工具 babel-cli babel-preset-env browserify(webpack)
2. 执行babel命令

        // src/js是源文件  dist/js是转换之后的文件路径
        npx babel src/js -d dist/js --presets=babel-preset-env  // 局部安装的babel
        babel src/js -d dist/js --presets=babel-preset-env   // 全局安装的babel
1
2
3

3. 打包

        // dist/js/app.js是源文件   dist/bundle.js是打包后文件的输出路径
        npx browserify dist/js/app.js -o dist/bundle.js
1
2

注意：每次修改源文件之后，都需要重新通过babel和browserify编译打包