ES6模組化

創造原因：現在的web系統越來越龐大、複雜，需要團隊分工，多人協作，大型系統的javascript檔案經常存在複雜的依賴關係，後期的維護成本會越來越高。

JavaScript模組化正式為了解決這一需求而誕生。

環境配置：

目前瀏覽器不支援ES6模組化的語法，所以我們在node裡進行測試。

通過babel解決這個問題

通過babel編譯js程式碼

1. 建立一個資料夾以及目錄結構

• src 資料夾： 裡面放原始碼就行

2. 在當前資料夾下執行npm init

可以通過cd 且目錄，沒事多點tab，可以自動補全路徑

一路點回車就行。（專案的名字不能是中文）

3.安裝babel的依賴

// 命令列執行的
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

4. 新增babel的配置

在專案根目錄下建立babel.config.json的檔案，在裡面寫

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

5. 執行編譯命令

在專案根目錄下執行

npx babel src --out-dir lib

6. 想執行哪個js的指令碼就用node執行這個指令碼就行了

node .\lib\b.js

匯出Export

匯出Export：作為一個模組，它可以選擇性地給其他模組暴露（提供）自己的屬性和方法，供其他模組使用。

匯入Import

匯入Import：作為一個模組，可以根據需要，引入其他模組的提供的屬性或者方法，供自己模組使用。

預設匯入匯出

import aMoudule from "./a.js"

export default {
    name,
    say
}

普通匯入匯出

import { name as myname } from "./a.js"//as作用重新賦名

//2、普通匯出
export {
    name,
    say
}

整體匯出：

import * as obj from "./a.js"