NodeJS模塊與ES6模塊系統(tǒng)語法及注意點有哪些

這篇文章主要介紹了NodeJS模塊與ES6模塊系統(tǒng)語法及注意點有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

社區(qū)模塊規(guī)范:

1.CommonJS規(guī)范

規(guī)范實現(xiàn)者：

NodeJS 服務端

Browserify 瀏覽器

2.AMD規(guī)范 全稱 異步模塊定義

規(guī)范實現(xiàn)者：

RequireJS 瀏覽器

3.CMD規(guī)范 通用模塊定義

規(guī)范實現(xiàn)者：

seaJS 服務端和瀏覽器通用

官方模塊規(guī)范

1.ESM規(guī)范 就是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.模塊區(qū)分，知道即可

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

普通導出與默認導出使用的區(qū)別

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

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

3.導出值與模塊值是動態(tài)綁定的

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.可以使用,同時導出默認導出和常規(guī)導出

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

5.多次import同一模塊，只會執(zhí)行一次

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

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模塊變量遵循其規(guī)則，不會動態(tài)綁定

 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()
 
 //默認導入,更優(yōu)
 import express from 'express'
 const app = express()

感謝你能夠認真閱讀完這篇文章，希望小編分享的“NodeJS模塊與ES6模塊系統(tǒng)語法及注意點有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!