9.9 ES6模块系统

前提条件:

1. 安装serve模块 npm i serve -g

2. (1) 常用模块化规范:

3. commonjs规范 nodejs遵守commonjs规范

4. AMD规范 reqire.js遵守AMD规范
5. CMD规范 sea.js遵守CMD规范(玉伯, 淘宝)

6. ES6规范

   (2) ES6模块导出和导入:

   1. 导出和导入方式(一)

7. export // 导出

8. import {xx} from xxx // 导出名称是什么, 导入名称也是什么

   2. 导出和导入方式(一)

9. export default // 默认导出

10. import xx from xx // 导入,可以使用任意名称接收默认导出的变量

    3. 重命名

11. import {aa as xx} from xxx // 导入之后重命名

12. import * as xx from xxx // 导入之后重命名

    (3) 例子

    // demo1 导出方式(一)
    // demo1.html 使用export导出, 导入的时候,变量名称必须一致
    <script type="module">
     import {username,age,PI} from './m1.js';
         console.log(username);
         console.log(age);
         console.log(PI);
    </script>
    // m1.js 
    // 导出变量
    export let username = '张三';
    export let age = 100;
    export const PI = 3.1415926535;

    ```javascript // demo2.html

// m2.js const home = { say() { console.log(‘哈哈哈哈’) }, getList() { // todo } } export default home;

```javascript
// demo3.html 重命名
<script type="module">
    import {age as nianling} from './m1.js';
    console.log('nianling=',nianling);
</script>
// demo4.html
<script type="module">
    import * as obj from './m1.js'; 
        console.log(obj);
</script>