前端模組化開發

bleso發表於2021-03-15
前端

目錄

CommonJS規範

CommonJS使用 exports 和require 來匯出、匯入模組

每個檔案就是一個模組，有自己的作用域。在一個檔案裡面定義的變數、函式、類，都是私有的對其他檔案不可見。

  1. 建立“module”資料夾

  2. 建立 mokuai-common-js/四則運算.js

    // 定義成員：
const sum = function (a, b) {
    return a + b
}
const subtract = function (a, b) {
    return a - b
}
const multiply = function (a, b) {
    return a * b
}
const divide = function (a, b) {
    return a / b
}

  3. 匯出模組中的成員

    // 匯出成員：
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}
//簡寫
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

  4. 建立 mokuai-common-js/引入模組.js

    //引入模組，注意：當前路徑必須寫 ./
const m = require('./四則運算.js')
console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)

  5. 執行程式

    node 引入模組.js

    image-20210315090317119

ES6模組化規範

ES6使用 export 和 import 來匯出、匯入模組

  1. 建立 mokuai-es6 資料夾

  2. 建立 src/userApi.js 檔案，匯出模組

    export function getList() {
    console.log('獲取資料列表')
}
export function save() {
    console.log('儲存資料')
}

  3. 建立 src/userComponent.js檔案，匯入模組

    //只取需要的方法即可，多個方法用逗號分隔
import { getList, save } from './userApi.js'
getList()
save()

    注意：這時的程式無法執行的，因為ES6的模組化無法在Node.js中執行，需要用Babel編輯成ES5
    後再執行

  4. 初始化專案

    npm init -y

  5. 配置 .babelrc

    {
    "presets": [
        "es2015"
    ],
    "plugins": []
}

  6. 安裝轉碼器，在專案中安裝

    npm install --save-dev babel-preset-es2015

  7. 定義執行指令碼，package.json中增加"build"

    image-20210315091657009

  8. 執行命令轉碼

    npm run build

    image-20210315091855122

  9. 執行程式

    node dist/userComponent.js

    image-20210315092021261

ES6模組化寫法2

  1. 建立 src/userApi2.js ，匯出模組

    export default {
    getList() {
        console.log('獲取資料列表2')
    },
    save() {
        console.log('儲存資料2')
    }
}

  2. 建立 src/userComponent2.js，匯入模組

    import user from "./userApi2.js"
user.getList()
user.save()

  3. 執行命令轉碼

    npm run build

  4. 執行程式

    node dist/userComponent2.js

相關文章