前端模塊化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:

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)