前端模塊化開發

目錄

• CommonJS規範
• ES6模塊化規範
• ES6模塊化寫法2

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

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"

8. 執行命令轉碼

   npm run build

9. 運行程序

   node dist/userComponent.js

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