POJ - 3696 The Luckiest number
阿新 • • 發佈：2020-09-02
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的檔案，在裡面寫
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{
"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：作為一個模組，可以根據需要，引入其他模組的提供的屬性或者方法，供自己模組使用。
預設匯入匯出
| 1 2 3 4 5 6 |
import aMoudule from "./a.js"
export default {
name,
say
}
|
普通匯入匯出
| 1 2 3 4 5 6 7 |
import { name as myname } from "./a.js"//as作用重新賦名
//2、普通匯出
export {
name,
say
}
|
整體匯出：
| 1 |
import * as obj from "./a.js"
|