前端工程化之模塊化的相關規範

[TOC]

模塊化的相關規範

模塊化概述：

傳統開發的主要問題：

1 命名衝突

2 文件依賴！

模塊化開發：

1 模塊化開發就是把單獨的一個功能封裝到一個模塊（文件中），模塊之間相互隔離， 可是能夠經過特定的接口公開內部成員， 亦能夠依賴其餘模塊

2 模塊化開發的好處： 方便代碼的重用， 從而提高開發效率， 而且方便後期的維護

瀏覽器端模塊化規範：

1 AMD

Require.js【已經不能再訪問了！】

2 CMD

Sea.js

上面兩種瀏覽器端的模塊化規範已經落伍了！

服務器端模塊化規範：

1 CommonJS

1 模塊分爲 單文件模塊 與 包

2 模塊成員導出： modules.exports 和 exports

3 模塊成員導出 ： require(‘模塊標識符’)

大-統的模塊化規範-ES6模塊化

在ES6模塊化規範誕生以前，Javascript 社區已經嘗試並提出了AMD、CMD、CommonJs 等模塊化規範。 可是，這些社區提出的模塊化標準，仍是存在必定的差別性 與侷限性、並非瀏覽器與服務器通用的模塊化標準，例如：

• AMD和CMD適用於瀏覽器端的Javascript 模塊化

• CommonJs適用於服務器端的Javascript 模塊化

所以，ES6語法規範中，在語言層面上定義了ES6模塊化規範，是瀏覽器端與服務器端通用的模塊化開發規範。

ES6模塊化規範中定義：

● 每一個js文件都是一個獨立的模塊

● 導入模塊成員使用 import關鍵字

● 暴露模塊成員使用export關鍵字

====

1.Node.js 中經過babel體驗ES6模塊化

1 npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

2 npm i --save @babel/polyfill

3 項目跟目錄建立文件babel . config. js

babel. config. js文件內容如右側代碼

舒適提醒：你再執行上面的代碼的時候最好在你的工做目錄下先執行一下npm init讓項目中出現一個package.json的初始化文件！

ES6模塊化的基本語法：

1默認導出 與 默認導入：

01 默認導出語法 export default 默認導出的成員

02 默認導入的語法 import 接受名稱 from ‘模塊標識符’

// 當前文件模塊爲 m1.js

// 定義私有成員 a 和 b



​    // 外界訪問不到變量d ，由於他沒有被暴露出去



// 將本模塊中的私有成員暴露出去， 供其餘模塊使用

let a = 10
let obj = {
    name: '小時姑娘',
    age: 23
}

// 默認導出的方式
export default {
    a,
    obj
}

// 導入模塊成員

import m1 from XXXX[導入文件的路徑]

// 路徑最好加上./否則可能會報錯!
import m1 from './m1.js'
console.log("lvhang")
console.log(m1.a)
console.log(m1.obj.name)

注意點：

在每個模塊中 ， 只容許使用惟一的一次 export default ， 不然會報錯！

2 按需導出 與 按需導入

1 按需導出語法 export let s1 = 10

// 按需導出

// 當前的文件模塊爲 m1.js

// 向外按需導出變量s1

export let s1 = 'aaa';

// 向外按需導出變量s2

export let s2 = 'ccc';

// 向外按需導出方法 say

export function say = function() {

}

2 按需導入語法 import

// 按需導入

// 導入模塊化成員 

**import { s1, s2, say } from './m1.js'**

console.log(s1);

console.log(s2);

console.log(say);

腳下留心：

每一個模塊中， 可使用屢次按需導入，可是默認導入，只能有惟一的一次！