1、初識

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

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

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

通過babel解決這個問題

2、通過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.js的檔案，在裡面寫

{
  "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\想執行的js指令碼.js

3、模組化的特性

• 在模組內定義的變數都是模組作用域。 在別的模組是訪問不到的
• 如果想讓別的模組訪問到模組內的資料，需要做模組的匯入和匯出

4、預設匯入匯出

export default {
  匯出內容
}

import 隨便起的名字 from  '模組js檔案的地址'

注意：只能有一個預設匯出

5、普通的匯入匯出

export const name ="123"
 

export const age =111

import {name,age as } from  '模組js檔案的地址'

注意：1、名字必須一一對應；2、普通匯出可以匯出多次