ES6对象模块（二） --- ES6模块系统

二、ES6模块系统

ES6 的 模块化，语言上支持，但是浏览器不支持，所以需要将其编译 ： 如webpack

2.1、简单步骤：

1. 导出

export let a = 12;
export function duck(){
  console.log("我真帅")
}

2. 导入

import * as mod1 from './mod'

console.log(mod1.a)
mod1.duck()

3. webpack编译（需要webpack环境）

以下为webpack的配置文件webpack.config.js

const path = require('path');

module.exports={
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

4. 使用

<script src="build/bundle.js"></script>

2.2、导出

1. 单个导出

export let a = 12;  // 变量
export function duck(){  // 函数
  console.log("我真帅")
}
export class Person {
  
}

2. 多个导出

let a = 12;
function duck () {
  console.log("我真帅")
}
class Person {
  ... 
}
export {a, duck, Person}

3. 导出默认成员(匿名的，可以在导入自定义名字)

export default "99";

2.3、导入

1. 引入所有的成员

import * as xx(自定义名字) from '...（位置）'

2. 引入 default成员

import xxx(自定义名字) from '...(位置)'

3. 引入多个成员

import {a, b} from '...'

4. 只引入文件

一般用于引入css之类的文件

import '...'

5. 异步的引入

// 引入是一个 Promise，最好用async/await
let p = import('...')