Vue框架之ES6模塊化

◆ 模塊化的分類：

1、瀏覽器端的模塊化：

• AMD(Asynchronous Module Definition,異步模塊定義)，代表產品爲：Require.js
• CMD(Common Module Definition,通用模塊定義)，代表產品爲：Sea.js

2、服務器端的模塊化：

服務器端的模塊化規範是使用CommonJS規範：

• 使用require引入其他模塊或者包
• 使用exports或者module.exports導出模塊成員
• 一個文件就是一個模塊，都擁有獨立的作用域

3、ES6模塊化：

ES6模塊化規範中定義：

• 每一個js文件都是獨立的模塊
• 導入模塊成員使用import關鍵字
• 暴露模塊成員使用export關鍵字

注：推薦使用ES6模塊化，因爲AMD，CMD侷限使用與瀏覽器端，而CommonJS在服務器端使用。 ES6模塊化是瀏覽器端和服務器端通用的規範.

◆ ES6模塊化開發步驟：

1、在NodeJS中安裝babel

打開終端，輸入命令：

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

安裝完畢之後，再次輸入命令安裝：

npm install --save @babel/polyfill

2、創建babel.config.js

在項目目錄中創建babel.config.js文件。 編輯js文件中的代碼如下：

const presets = [
    ["@babel/env",{
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]

 //暴露
module.exports = { presets }

3、創建index.js文件

在項目目錄中創建index.js文件作爲入口文件，在index.js中輸入需要執行的js代碼。

console.log("ok");

4、使用npx執行文件

打開終端，輸入命令：

npx babel-node ./index.js

◆ 設置默認導入/導出：

1、默認導出

export default {
    成員A,
    成員B,
    .......
}

示例：

let num = 100;
export default{
    num
}

2、默認導入

import 接收名稱 from "模塊標識符"

示例：

import test from "./test.js"

注：在一個模塊中，只允許使用export default向外默認暴露一次成員，千萬不要寫多個export default。如果在一個模塊中沒有向外暴露成員，其他模塊引入該模塊時將會得到一個空對象。

◆ 設置按需導入/導出：

1、按需導出

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

2、按需導入

import { num,fn as printFn ,myName } from "./test.js"
//同時導入默認導出的成員以及按需導入的成員
import test,{ num,fn as printFn ,myName } from "./test.js"

注：一個模塊中既可以按需導入也可以默認導入，一個模塊中既可以按需導出也可以默認導出

◆ 直接導入並執行代碼：

import "./test2.js";