鍓嶇妯″潡鍖栫殑浠婄敓

鑳屾櫙

浼楁墍鍛ㄧ煡锛屾棭鏈� JavaScript 鍘熺敓骞朵笉鏀寔妯″潡鍖栵紝鐩村埌 2015 骞达紝TC39 鍙戝竷 ES6锛屽叾涓湁涓�涓鑼冨氨鏄� ES modules锛堜负浜嗘柟渚胯〃杩帮紝鍚庨潰缁熶竴绠�绉� ESM锛夈�備絾鏄湪 ES6 瑙勮寖鎻愬嚭鍓嶏紝灏卞凡缁忓瓨鍦ㄤ簡涓�浜涙ā鍧楀寲鏂规锛屾瘮濡� CommonJS锛坕n Node.js锛夈�丄MD銆侲SM 涓庤繖浜涜鑼冪殑鍏卞悓鐐瑰氨鏄兘鏀寔瀵煎叆锛坕mport锛夊拰瀵煎嚭锛坋xport锛夎娉曪紝鍙槸鍏惰涓虹殑鍏抽敭璇嶄篃涓�浜涘樊寮傘��

CommonJS

// add.js
const add = (a, b) => a + b
module.exports = add
// index.js
const add = require('./add')
add(1, 5)

AMD

// add.js
define(function() {
  const add = (a, b) => a + b
  return add
})
// index.js
require(['./add'], function (add) {
  add(1, 5)
})

ESM

// add.js
const add = (a, b) => a + b
export default add
//index.js
import add from './add'
add(1, 5)

鍏充簬 JavaScript 妯″潡鍖栧嚭鐜扮殑鑳屾櫙鍦ㄤ笂涓�绔狅紙銆婂墠绔ā鍧楀寲鐨勫墠涓栥��)锛夊凡缁忔湁鎵�浠嬬粛锛岃繖閲屼笉鍐嶈禈杩般�備絾鏄� ESM 鐨勫嚭鐜颁笉鍚屼簬鍏朵粬鐨勮鑼冿紝鍥犱负杩欐槸 JavaScript 瀹樻柟鎺ㄥ嚭鐨勬ā鍧楀寲鏂规锛岀浉姣斾簬 CommonJS 鍜� AMD 鏂规锛孍SM閲囩敤浜嗗畬鍏ㄩ潤鎬佸寲鐨勬柟寮忚繘琛屾ā鍧楃殑鍔犺浇銆�

ESM瑙勮寖

妯″潡瀵煎嚭

妯″潡瀵煎嚭鍙湁涓�涓叧閿瘝锛�export锛屾渶绠�鍗曠殑鏂规硶灏辨槸鍦ㄥ０鏄庣殑鍙橀噺鍓嶉潰鐩存帴鍔犱笂 export 鍏抽敭璇嶃��

export const name = 'Shenfq'

鍙互鍦� const銆乴et銆乿ar 鍓嶇洿鎺ュ姞涓� export锛屼篃鍙互鍦� function 鎴栬�� class 鍓嶉潰鐩存帴鍔犱笂 export銆�

export function getName() {
  return name
}
export class Logger {
    log(...args) {
    console.log(...args)
  }
}

涓婇潰鐨勫鍑烘柟娉曚篃鍙互浣跨敤澶ф嫭鍙风殑鏂瑰紡杩涜绠�鍐欍��

const name = 'Shenfq'
function getName() {
  return name
}
class Logger {
    log(...args) {
    console.log(...args)
  }
}

export { name, getName, Logger }

鏈�鍚庝竴绉嶈娉曪紝涔熸槸鎴戜滑缁忓父浣跨敤鐨勶紝瀵煎嚭榛樿妯″潡銆�

const name = 'Shenfq'
export default name

妯″潡瀵煎叆

妯″潡鐨勫鍏ヤ娇鐢�import锛屽苟閰嶅悎 from 鍏抽敭璇嶃��

// main.js
import name from './module.js'

// module.js
const name = 'Shenfq'
export default name

杩欐牱鐩存帴瀵煎叆鐨勬柟寮忥紝module.js 涓繀椤讳娇鐢� export default锛屼篃灏辨槸璇� import 璇硶锛岄粯璁ゅ鍏ョ殑鏄�default妯″潡銆傚鏋滄兂瑕佸鍏ュ叾浠栨ā鍧楋紝灏卞繀椤讳娇鐢ㄥ璞″睍寮�鐨勮娉曘��

// main.js
import { name, getName } from './module.js'

// module.js
export const name = 'Shenfq'
export const getName = () => name

濡傛灉妯″潡鏂囦欢鍚屾椂瀵煎嚭浜嗛粯璁ゆā鍧楋紝鍜屽叾浠栨ā鍧楋紝鍦ㄥ鍏ユ椂锛屼篃鍙互鍚屾椂灏嗕袱鑰呭鍏ャ��

// main.js
import name, { getName } from './module.js'

//module.js
const name = 'Shenfq'
export const getName = () => name
export default name

褰撶劧锛孍SM 涔熸彁渚涗簡閲嶅懡鍚嶇殑璇硶锛屽皢瀵煎叆鐨勬ā鍧楄繘琛岄噸鏂板懡鍚嶃��

// main.js
import * as mod from './module.js'
let name = ''
name = mod.name
name = mod.getName()

// module.js
export const name = 'Shenfq'
export const getName = () => name

涓婅堪鍐欐硶灏辩浉褰撲簬浜庡皢妯″潡瀵煎嚭鐨勫璞¤繘琛岄噸鏂拌祴鍊硷細

// main.js
import { name, getName } from './module.js'
const mod = { name, getName }

鍚屾椂涔熷彲浠ュ鍗曠嫭鐨勫彉閲忚繘琛岄噸鍛藉悕锛�

// main.js
import { name, getName as getModName }

瀵煎叆鍚屾椂杩涜瀵煎嚭

濡傛灉鏈変袱涓ā鍧� a 鍜� b 锛屽悓鏃跺紩鍏ヤ簡妯″潡 c锛屼絾鏄繖涓や釜妯″潡杩橀渶瑕佸鍏ユā鍧� d锛屽鏋滄ā鍧� a銆乥 鍦ㄥ鍏� c 涔嬪悗锛屽啀瀵煎叆 d 涔熸槸鍙互鐨勶紝浣嗘槸鏈変簺绻佺悙锛屾垜浠彲浠ョ洿鎺ュ湪妯″潡 c 閲岄潰瀵煎叆妯″潡 d锛屽啀鎶婃ā鍧� d 鏆撮湶鍑哄幓銆�

// module_c.js
import { name, getName } from './module_d.js'
export { name, getName }

杩欎箞鍐欑湅璧锋潵杩樻槸鏈変簺楹荤儲锛岃繖閲� ESM 鎻愪緵浜嗕竴绉嶅皢 import 鍜� export 杩涜缁撳悎鐨勮娉曘��

export { name, getName } from './module_d.js'

涓婇潰鏄� ESM 瑙勮寖鐨勪竴浜涘熀鏈娉曪紝濡傛灉鎯充簡瑙ｆ洿澶氾紝鍙互缈婚槄闃�佸笀鐨� 銆奅S6 鍏ラ棬銆�銆�

ESM 涓� CommonJS 鐨勫樊寮�

棣栧厛鑲畾鏄娉曚笂鐨勫樊寮傦紝鍓嶉潰涔熷凡缁忕畝鍗曚粙缁嶈繃浜嗭紝涓�涓娇鐢� import/export 璇硶锛屼竴涓娇鐢� require/module 璇硶銆�

鍙︿竴涓� ESM 涓� CommonJS 鏄捐憲鐨勫樊寮傚湪浜庯紝ESM 瀵煎叆妯″潡鐨勫彉閲忛兘鏄己缁戝畾锛屽鍑烘ā鍧楃殑鍙橀噺涓�鏃﹀彂鐢熷彉鍖栵紝瀵瑰簲瀵煎叆妯″潡鐨勫彉閲忎篃浼氳窡闅忓彉鍖栵紝鑰� CommonJS 涓鍏ョ殑妯″潡閮芥槸鍊间紶閫掍笌寮曠敤浼犻�掞紝绫讳技浜庡嚱鏁颁紶鍙傦紙鍩烘湰绫诲瀷杩涜鍊间紶閫掞紝鐩稿綋浜庢嫹璐濆彉閲忥紝闈炲熀纭�绫诲瀷銆愬璞°�佹暟缁勩�戯紝杩涜寮曠敤浼犻�掞級銆�

涓嬮潰鎴戜滑鐪嬩笅璇︾粏鐨勬渚嬶細

CommonJS

// a.js
const mod = require('./b')

setTimeout(() => {
  console.log(mod)
}, 1000)

// b.js
let mod = 'first value'

setTimeout(() => {
  mod = 'second value'
}, 500)

module.exports = mod

$ node a.js
first value

ESM

// a.mjs
import { mod } from './b.mjs'

setTimeout(() => {
  console.log(mod)
}, 1000)

// b.mjs
export let mod = 'first value'

setTimeout(() => {
  mod = 'second value'
}, 500)

$ node --experimental-modules a.mjs
# (node:99615) ExperimentalWarning: The ESM module loader is experimental.
second value

鍙﹀锛孋ommonJS 鐨勬ā鍧楀疄鐜帮紝瀹為檯鏄粰姣忎釜妯″潡鏂囦欢鍋氫簡涓�灞傚嚱鏁板寘瑁癸紝浠庤�屼娇寰楁瘡涓ā鍧楄幏鍙� require/module銆�__filename/__dirname 鍙橀噺銆傞偅涓婇潰鐨� a.js 鏉ヤ妇渚嬶紝瀹為檯鎵ц杩囩▼涓� a.js 杩愯浠ｇ爜濡備笅锛�

// a.js
(function(exports, require, module, __filename, __dirname) {
    const mod = require('./b')
  setTimeout(() => {
    console.log(mod)
  }, 1000)
});

鑰� ESM 鐨勬ā鍧楁槸閫氳繃 import/export 鍏抽敭璇嶆潵瀹炵幇锛屾病鏈夊搴旂殑鍑芥暟鍖呰９锛屾墍浠ュ湪 ESM 妯″潡涓紝闇�瑕佷娇鐢� import.meta 鍙橀噺鏉ヨ幏鍙� __filename/__dirname銆�import.meta 鏄� ECMAScript 瀹炵幇鐨勪竴涓寘鍚ā鍧楀厓鏁版嵁鐨勭壒瀹氬璞★紝涓昏鐢ㄤ簬瀛樻斁妯″潡鐨� url锛岃�� node 涓彧鏀寔鍔犺浇鏈湴妯″潡锛屾墍浠� url 閮芥槸浣跨敤 file: 鍗忚銆�

import url from 'url'
import path from 'path'
// import.meta: { url: file:///Users/dev/mjs/a.mjs }
const __filename = url.fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

鍔犺浇鐨勫師鐞�

姝ラ锛�

1. Construction锛堟瀯閫狅級锛氫笅杞芥墍鏈夌殑鏂囦欢骞朵笖瑙ｆ瀽涓簃odule records銆�
2. Instantiation锛堝疄渚嬶級锛氭妸鎵�鏈夊鍑虹殑鍙橀噺鍏ュ唴瀛樻寚瀹氫綅缃紙浣嗘槸鏆傛椂杩樹笉姹傚�硷級銆傜劧鍚庯紝璁╁鍑哄拰瀵煎叆閮芥寚鍚戝唴瀛樻寚瀹氫綅缃�傝繖鍙仛銆巐inking(閾炬帴)銆忋��
3. Evaluation锛堟眰鍊硷級锛氭墽琛屼唬鐮侊紝寰楀埌鍙橀噺鐨勫�肩劧鍚庢斁鍒板唴瀛樺搴斾綅缃��

妯″潡璁板綍

鎵�鏈夌殑妯″潡鍖栧紑鍙戯紝閮芥槸浠庝竴涓叆鍙ｆ枃浠跺紑濮嬶紝鏃犺鏄� Node.js 杩樻槸娴忚鍣紝閮戒細鏍规嵁杩欎釜鍏ュ彛鏂囦欢杩涜妫�绱紝涓�姝ヤ竴姝ユ壘鍒板叾浠栨墍鏈夌殑渚濊禆鏂囦欢銆�

// Node.js: main.mjs
import Log from './log.mjs'

鍊煎緱娉ㄦ剰鐨勬槸锛屽垰寮�濮嬫嬁鍒板叆鍙ｆ枃浠讹紝鎴戜滑骞朵笉鐭ラ亾瀹冧緷璧栦簡鍝簺妯″潡锛屾墍浠ュ繀椤诲厛閫氳繃 js 寮曟搸闈欐�佸垎鏋愶紝寰楀埌涓�涓ā鍧楄褰曪紝璇ヨ褰曞寘鍚簡璇ユ枃浠剁殑渚濊禆椤广�傛墍浠ワ紝涓�寮�濮嬫嬁鍒扮殑 js 鏂囦欢骞朵笉浼氭墽琛岋紝鍙槸浼氬皢鏂囦欢杞崲寰楀埌涓�涓ā鍧楄褰曪紙module records锛夈�傛墍鏈夌殑 import 妯″潡閮藉湪妯″潡璁板綍鐨� importEntries 瀛楁涓褰曪紝鏇村妯″潡璁板綍鐩稿叧鐨勫瓧娈靛彲浠ユ煡闃�tc39.es銆�

妯″潡鏋勯��

寰楀埌妯″潡璁板綍鍚庯紝浼氫笅杞芥墍鏈変緷璧栵紝骞跺啀娆″皢渚濊禆鏂囦欢杞崲涓烘ā鍧楄褰曪紝涓�鐩存寔缁埌娌℃湁渚濊禆鏂囦欢涓烘锛岃繖涓繃绋嬭绉颁负銆庢瀯閫犮�忥紙construction锛夈��

妯″潡鏋勯�犲寘鎷涓嬩笁涓楠わ細

1. 妯″潡璇嗗埆锛堣В鏋愪緷璧栨ā鍧� url锛屾壘鍒扮湡瀹炵殑涓嬭浇璺緞锛夛紱
2. 鏂囦欢涓嬭浇锛堜粠鎸囧畾鐨� url 杩涜涓嬭浇锛屾垨浠庢枃浠剁郴缁熻繘琛屽姞杞斤級锛�
3. 杞寲涓烘ā鍧楄褰曪紙module records锛夈��

瀵逛簬濡備綍灏嗘ā鍧楁枃浠惰浆鍖栦负妯″潡璁板綍锛孍SM 瑙勮寖鏈夎缁嗙殑璇存槑锛屼絾鏄湪鏋勯�犺繖涓楠や腑锛岃鎬庝箞涓嬭浇寰楀埌杩欎簺渚濊禆鐨勬ā鍧楁枃浠讹紝鍦� ESM 瑙勮寖涓苟娌℃湁瀵瑰簲鐨勮鏄庛�傚洜涓哄浣曚笅杞芥枃浠讹紝鍦ㄦ湇鍔＄鍜屽鎴风閮芥湁涓嶅悓鐨勫疄鐜拌鑼冦�傛瘮濡傦紝鍦ㄦ祻瑙堝櫒涓紝濡備綍涓嬭浇鏂囦欢鏄睘浜� HTML 瑙勮寖锛堟祻瑙堝櫒鐨勬ā鍧楀姞杞介兘鏄娇鐢ㄧ殑

涓嬭浇濂界殑妯″潡锛岄兘浼氳杞寲涓烘ā鍧楄褰曠劧鍚庣紦瀛樺埌 module map 涓紝閬囧埌涓嶅悓鏂囦欢鑾峰彇鐨勭浉鍚屼緷璧栵紝閮戒細鐩存帴鍦� module map 缂撳瓨涓幏鍙栥��

// log.js
const log = console.log
export default log

// file.js
export { 
  readFileSync as read,
  writeFileSync as write
} from 'fs'

妯″潡瀹炰緥

鑾峰彇鍒版墍鏈変緷璧栨枃浠跺苟寤虹珛濂� module map 鍚庯紝灏变細鎵惧埌鎵�鏈夋ā鍧楄褰曪紝骞跺彇鍑哄叾涓殑鎵�鏈夊鍑虹殑鍙橀噺锛岀劧鍚庯紝灏嗘墍鏈夊彉閲忎竴涓�瀵瑰簲鍒板唴瀛樹腑锛屽皢瀵瑰簲鍏崇郴瀛樺偍鍒般�庢ā鍧楃幆澧冭褰曘�忥紙module environment record锛変腑銆傚綋鐒跺綋鍓嶅唴瀛樹腑鐨勫彉閲忓苟娌℃湁鍊硷紝鍙槸鍒濆鍖栦簡瀵瑰簲鍏崇郴銆傚垵濮嬪寲瀵煎嚭鍙橀噺鍜屽唴瀛樼殑瀵瑰簲鍏崇郴鍚庯紝绱ф帴鐫�浼氳缃ā鍧楀鍏ュ拰鍐呭瓨鐨勫搴斿叧绯伙紝纭繚鐩稿悓鍙橀噺鐨勫鍏ュ拰瀵煎嚭閮芥寚鍚戜簡鍚屼竴涓唴瀛樺尯鍩燂紝骞朵繚璇佹墍鏈夌殑瀵煎叆閮借兘鎵惧埌瀵瑰簲鐨勫鍑恒��

鐢变簬瀵煎叆鍜屽鍑烘寚鍚戝悓涓�鍐呭瓨鍖哄煙锛屾墍浠ュ鍑哄�间竴鏃﹀彂鐢熷彉鍖栵紝瀵煎叆鍊间篃浼氬彉鍖栵紝涓嶅悓浜� CommonJS锛孋ommonJS 鐨勬墍鏈夊�奸兘鏄熀浜庢嫹璐濈殑銆傝繛鎺ュ埌瀵煎叆瀵煎嚭鍙橀噺鍚庯紝鎴戜滑灏遍渶瑕佸皢瀵瑰簲鐨勫�兼斁鍏ュ埌鍐呭瓨涓紝涓嬮潰灏辫杩涘叆鍒版眰鍊肩殑姝ラ浜嗐��

妯″潡姹傚��

姹傚�兼楠ょ浉瀵圭畝鍗曪紝鍙杩愯浠ｇ爜鎶婅绠楀嚭鏉ョ殑鍊煎～鍏ヤ箣鍓嶈褰曠殑鍐呭瓨鍦板潃灏卞彲浠ヤ簡銆傚埌杩欓噷灏卞凡缁忚兘澶熸剦蹇殑浣跨敤 ESM 妯″潡鍖栦簡銆�

ESM鐨勮繘灞�

鍥犱负 ESM 鍑虹幇杈冩櫄锛屾湇鍔＄宸叉湁 CommonJS 鏂规锛屽鎴风鍙堟湁 webpack 鎵撳寘宸ュ叿锛屾墍浠� ESM 鐨勬帹骞夸笉寰椾笉璇磋繕鏄崄鍒嗚壈闅剧殑銆�

瀹㈡埛绔�

鎴戜滑鍏堢湅鐪嬪鎴风鐨勬敮鎸佹儏鍐碉紝杩欓噷鎺ㄨ崘澶у鍒� Can I Use 鐩存帴鏌ョ湅锛屼笅鍥炬槸 2019/11鐨勬埅鍥俱��

鐩墠涓烘锛屼富娴佹祻瑙堝櫒閮藉凡缁忔敮鎸� ESM 浜嗭紝鍙渶鍦� script 鏍囩浼犲叆鎸囧畾鐨� type="module" 鍗冲彲銆�

鍙﹀锛屾垜浠煡閬撳湪 Node.js 涓紝瑕佷娇鐢� ESM 鏈夋椂鍊欓渶瑕佺敤鍒� .mjs 鍚庣紑锛屼絾鏄祻瑙堝櫒骞朵笉鍏冲績鏂囦欢鍚庣紑锛屽彧闇�瑕� http 鍝嶅簲澶寸殑MIME绫诲瀷姝ｇ‘鍗冲彲锛�Content-Type: text/javascript锛夈�傚悓鏃讹紝褰� type="module" 鏃讹紝榛樿鍚敤 defer 鏉ュ姞杞借剼鏈�傝繖閲岃ˉ鍏呬竴寮� defer銆乤sync 宸紓鍥俱��

鎴戜滑鐭ラ亾娴忚鍣ㄤ笉鏀寔 script 鐨勬椂鍊欙紝鎻愪緵浜� noscript 鏍囩鐢ㄤ簬闄嶇骇澶勭悊锛屾ā鍧楀寲涔熸彁渚涗簡绫讳技鐨勬爣绛俱��

杩欐牱鎴戜滑灏辫兘閽堝鏀寔 ESM 鐨勬祻瑙堝櫒鐩存帴浣跨敤妯″潡鍖栨柟妗堝姞杞芥枃浠讹紝涓嶆敮鎸佺殑娴忚鍣ㄨ繕鏄娇鐢� webpack 鎵撳寘鐨勭増鏈��

棰勫姞杞�

鎴戜滑鐭ラ亾娴忚鍣ㄧ殑 link 鏍囩鍙互鐢ㄤ綔璧勬簮鐨勯鍔犺浇锛屾瘮濡傛垜闇�瑕侀鍏堝姞杞� main.js 鏂囦欢锛�

濡傛灉杩欎釜 main.js 鏂囦欢鏄竴涓ā鍧楀寲鏂囦欢锛屾祻瑙堝櫒浠呬粎棰勫厛鍔犺浇鍗曠嫭杩欎竴涓枃浠舵槸娌℃湁鎰忎箟鐨勶紝鍓嶉潰鎴戜滑涔熻杩囷紝涓�涓ā鍧楀寲鏂囦欢涓嬭浇鍚庤繕闇�瑕佽浆鍖栧緱鍒版ā鍧楄褰曪紝杩涜妯″潡瀹炰緥銆佹ā鍧楁眰鍊艰繖浜涙搷浣滐紝鎵�浠ユ垜浠緱鎯冲姙娉曞憡璇夋祻瑙堝櫒锛岃繖涓枃浠舵槸涓�涓ā鍧楀寲鐨勬枃浠讹紝鎵�浠ユ祻瑙堝櫒鎻愪緵浜嗕竴绉嶆柊鐨� rel 绫诲瀷锛屼笓闂ㄧ敤浜庢ā鍧楀寲鏂囦欢鐨勯鍔犺浇銆�

鐜扮姸

铏界劧涓绘祦娴忚鍣ㄩ兘宸茬粡鏀寔浜� ESM锛屼絾鏄牴鎹� chrome 鐨勭粺璁�锛屾湁鐢ㄥ埌