[JavaScript] 關於模組化、匯入、匯出


Posted by Nicolakacha on 2020-09-05

把一坨的 JavaScript 拆分成可以不同的模組,可以方便之後的管理與使用~

建立自己的 module 模組

方法一

let obj = {
    double: function(n) {
        return n * 2
    },
    triple: function(n) {
        return n * 3
    }
}
module.exports = obj;

方法二

let obj = {
    double: function(n) {
        return n * 2
    },
    triple: function(n) {
        return n * 3
    }
}
exports.double = obj.double
exports.triple = obj.triple
// exports 相當於一個空物件

輸出 module

function double(n){
    return n * 2
}
module.export = double

引入內建的 module

const os = require('os')
console.log(os.platform())

引入自己建立的 module

const doubleAndTriple = require('./utils/myModule')
console.log(doubleAndTriple.double(2))
console.log(doubleAndTriple.triple(2))
//常用的 function 可以放在 utils 的資料夾內,供日後管理及使用

ES6 的 import export

具名匯出

//匯出
export function add(a, b) {
    return a + b
}
export const PI = 3.14

//匯入
import {add, PI} from './utils'
//匯出
function add(a, b) {
    return a + b
}
const PI = 3.14

export {
    add as addFunction,
    PI
}

//匯入
import {addFunction, PI} from './utils'

預設匯出

export default function add(a, b) {
    return a + b
}

export const PI = 3.14
----------------------
import add, {PI} from './utils.js'

怎麼決定要用哪種匯出

Export Default(預設匯出):一個檔案只能有一個

  • 大多用在開發上
  • 若想要一次全部匯入的話,可以
      import * as all from './module.js';
    

Export Named(具名):一個檔案可以有很多個

  • 大多用在函式庫(框架、套件)
  • 一次只取出一個內容
    https://i.imgur.com/RNBCmUF.png

Bable

用來轉換成舊的可識別的語法,例如 node 並不支援 export 和 import,就要用 bable 來操作

  1. 安裝必要套件:npm install --save-dev @babel/core @babel/node @babel/preset-env
  2. 新增 .babelrc
  3. 填入內容,告訴 babel 要用這個 preset:
    {
    "presets": ["@babel/preset-env"]
    }
    
  4. 最後使用 npx babel-node 執行即可

參考資料:
完全解析 JavaScript import、export










Related Posts

Week1 筆記| [CMD101] Command Line 學習筆記

Week1 筆記| [CMD101] Command Line 學習筆記

Codewars - KYU 8 - SQL Practice (10題)

Codewars - KYU 8 - SQL Practice (10題)

GCC with MinGW || VS Code

GCC with MinGW || VS Code


Comments