对esm模块import理解

// 模块a.js
export let a = 1;
export function addA() {
  a++;  
}

// index.js
import { a, addA } from './a.js';
console.log('a=', a); // 1
addA();
console.log('a=', a); // 2

// other.js
import { a, addA } from './a.js';
console.log('a=', a); // 2
addA();
console.log('a=', a); // 3

index.js这里的 

impot { a, addA } from './a.js';

和commonJs引入写法的:

const{ a, addA } = require('./a.js');
不同,commonJs的{a, addA}是解构赋值,而esm的{a, addA},是把a.js的引用变量(index.js类似导出了指针&a)添加进index.js中了。
但是有一个问题:在index.js或者other.js中是不能手动直接修改变量a的(类似修改一个const变量),只能通过引入暴露出的addA来修改。

chrome 60+版本已经支持esm。


posted @ 2024-01-20 15:45  筑潇  阅读(48)  评论(0编辑  收藏  举报