出現

  現在的web系統越來越龐大、複雜，需要團隊分工，多人協作，大型系統的javascript檔案經常存在複雜的依賴關係，
  後期的維護成本會越來越高。
  JavaScript模組化正式為了解決這一需求而誕生。

因為目前瀏覽器不支援ES6模組化語法，所以需要再node裡進行

1、通過babel編譯js程式碼

  a、建立src 資料夾： 裡面放原始碼就行
  b、 在根目錄下執行npm init 

2、安裝依賴

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

3、新增babel的配置

  在專案根目錄下建立babel.config.js的檔案，在裡面寫
 
   {
    "presets": [
      [
        "@babel/env",
        {
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "useBuiltIns": "usage"
        }
      ]
    ]
}
 

4、執行編譯命令

  在根目錄執行：npx babel  src --out-dir lib

5、執行！！！！

  node .\lib\b.js
 此處我執行的是b.js  如果是別的就要改名字。

**********************************************************************************************

知識點

  1、預設匯出\匯入

  export default{ //此處填名字}
  import 隨便起個名字 from 匯入的js的位置

  2、普通匯出\匯入

  export const age = 65;
  import { //名字 as 別名}  from 匯入的js的位置     

  3、批量匯出
  export {name,age,say}
      整體匯入
  import * as obj from  匯入的js的位置  
 

注意

  1、匯入的變數是隻讀的狀態，不能修改。
  2、匯入不存在的變數，值為undefined.