前端模块化CommonJS以及ES6模块化的导入导出

CommonJS（了解）

• 模块化有两个核心：导入和导出
• CommonJS的导出(aaa.js)：

module.exports = {
    flag: true,
    test(a, b) {
        return a * b
    },
    demo(a, b) {
        return a + b
    }
}

• CommonJS的导入(bbb.js)：

let { test,demo,flag } = require('./aaa.js') // aaa.js文件路径

// 等同于（解构）
let _mA = require('moduleA'); // aaa.js文件路径
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;

ES6模块化实现

导出方式一（导入{ }中定义的变量）

index.html中导入js文件，注意type=“module”

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>

aaa.js：

var flag = true
function sum(num1, num2){
	return num1 + num2
}
 
// 导出
export {
	flag, sum
}

bbb.js：

import { flag, sum } from './aaa.js'

if(flag) {
	console.log(sum(20, 30)) // 50
}

导出方式二（直接导入export定义的变量）

aaa.js：

// 导出变量
export var num = 1000
export var height = 1.88

// 导出函数/类
export function mul(num1, num2) {
	return num1 * num2
}
export class Person {
	run(){
		console.log('running...')
	}
}

bbb.js：

// 导入变量
import { num, height } from './aaa.js'
// 导入函数/类
import { mul, Person } from './aaa.js'

var p = new Person()
p.run()

导出方式三（export default）

某些情況下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名，这个时候就可以使用 export default

• 变量

aaa.js:

const address = '北京'
// 导出
export default address

bbb.js:

import addr from './aaa.js' // 可以自定义命名

• 函数
  aaa.js：

export default function(argument){
	console.log(argument)
}

bbb.js:

扫描二维码关注公众号，回复： 11441020 查看本文章

import fun1 from './aaa.js' // 可以自定义命名
fun1('aaaaaa') // aaaaaa

注意：export default在同个模块中，不允许同时存在多个。

导出方式四（统一全部导入）

bbb.js：

// import { flag,num,num1,height.... } from './aaa.js'

import * as aaa from './aaa.js'
console.log(aaa.flag)