NodeJS模塊和ES6模塊系統語法及注意點

社區模塊規范:

1.CommonJS規范
規范實現者：
NodeJS 服務端
Browserify 瀏覽器

2.AMD規范 全稱 異步模塊定義
規范實現者：
RequireJS 瀏覽器

3.CMD規范 通用模塊定義
規范實現者：
seaJS 服務端和瀏覽器通用

官方模塊規范

1.ESM規范 就是ES6 Module
各瀏覽器和服務端

目前常用的就是瀏覽器端的RequireJS、NodeJS、以及ESM

CommonJS語法分析

module.export

關鍵
1.module.exports實質上是一個對象,最后模塊導出的對象就是這個引用指向的對象

  module.export.key = value
  // eg: 
  module.export.a = 1; 
  // 整體管理導出，此時exports與module.exports指向斷開，導致exports上的屬性被忽略
  module.export = {
    a:1,
    b:1
  }

2.exports是一個module.export的助手變量，用於就地導出,兩者默認指向同一對象，即module.exports === exports true

  // 像比較長的程序,寫完所有之后，再去找到需要導出的變量再移到低端的export.module上逐個添加，是相當麻煩，一般在變量下決定是否導出
  //eg 
  let fA = function () {

  }
  module.exports.fA = fA
  let fB = function () {

  }
  module.exports.fB = fB

  // exports 簡潔很多
  let fA = function () {

  }
  module.fA = fA
  let fB = function () {

  }
  module.fB = fB

3.在逐個導出時使用exports,而在導出一個對象時，使用module.exports，不建議混用，如果需要，可以作一下處理:

  // 在最后導出時將exports對象和module.exports對象合並
  exports.a = 1
  module.exports = Object.assign({
  b : 1
  },exports)

require

關鍵:
1.模塊區分，知道即可
let f = require('url')

  // 核心模塊,第三方模塊(npm安裝),指定模塊名即可
  let f = require ('modulename')
  // 自定義模塊，需指定相對或者絕對路徑
  let f = require('absolutePATH/relativeAPTH')

2.查找時,沒有后綴名的會嘗試添加.js、.json、.node,這里可以稍微偷個懶

  let f = require('./circle')
  // 等同於
  let f = require('./circle.js')

ESM語法分析：

export var/function/class

關鍵:
1.導出值和內部值要有對於關系,即

  // error
  export 1

  // error
  let m = 1
  export m

  // correct
  export let m = 1

  // correct
  let m = 1;
  export {m}

直接在聲明時導出或者用一個{}包裹導出

2.export default 用於導出一個默認值，使得用戶可以不需要知道內部導出變量名稱即可使用
PS: 一個模塊只能有一個默認導出

  export default 等同 export {add as default}
  // 不能接變量聲明語句
  export default let a = 1

普通導出與默認導出使用的區別

  // 普通導出的導入使用
  export {f}
  import {f} from 'fmod'

  // 默認導出的導入使用,可以無需知道導出模塊的內部變量名,任意重命名
  export default f
  import c from 'fmod'

3.導出值與模塊值是動態綁定的

export let foo = 'bar';
// 500毫秒后,其他模塊拿到的foo值會變成bar
setTimeout(() => foo = 'baz', 500);

import用法

關鍵:
1.導入非默認變量時需要使用{}語法，並且變量要與導出時變量一致

  // 普通導出的導入使用
  export {f}
  import {f} from 'fmod'

2.導入默認變量時，省略{},並且可以重命名導出變量

  // 默認導出的導入使用,可以無需知道導出模塊的內部變量名,任意重命名
  export default f
  import c from 'fmod'

3.可以使用*導出整體模塊

  // circle.js
  export let radius = 1
  export let area = 2*PI*radius
  // main.js
  import * as circle from './circle.js'
  circle.radius
  circle.area

4.可以使用,同時導出默認導出和常規導出

import _,{each, forEach} from 'lodash'

5.多次import同一模塊，只會執行一次

6.import可以與require混用，但是其在靜態分析階段執行，也就是會先於require加載,這在要求一定的導入順序時要注意

export 與 import復合寫法

export { foo, bar } from 'my_module';

// 可以簡單理解為,但是合並寫法等同於沒有在當前模塊中導入my_module，即無法使用
import { foo, bar } from 'my_module';
export { foo, bar };

ESM加載CommmonJS

關鍵：
1.CommonJS模塊輸出對象module.exports將會被Node轉換成默認導出

  // 導出
  export default module.exports
  // 導入,類似導入默認
  import m from './m'

2.此時CommonJS模塊變量遵循其規則，不會動態綁定

  module.exports = 123;
  setTimeout(() => module.exports = null,500)
  //500毫秒后，module.exports仍然是123

3.由於CommonJS模塊運行時，才會確定輸出的module.exports對象，而ESM在編譯時就要確定接口，導入時，不允許解構語法

  import {readFile} from 'fs'

解決方案：

  //整體導入 
  import * as express from 'express'
  const app = express.default()
  
  //默認導入,更優
  import express from 'express'
  const app = express()