CommonJs 与 ESM

ES Modules

特性

自动采用严格模式，忽略 'user strict'
每个 ES Module 都是运行在单独的私有作用域中
ESM 通过 CORS 请求外部 JS 模块
ESM 的 script 标签会延迟执行脚本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES Module</title>
  </head>
  <body>
    hahhha
  </body>
  <script type="module">
    console.log("this is es module");
  </script>
  <!-- 1 自动采用严格模式，忽略 'user strict' -->
  <script type="module">
    console.log(this);
  </script>
  <!-- 2 每个 ES Module 都是运行在单独的私有作用域中 -->
  <script type="module">
    var foo = 100;
    console.log(foo);
  </script>
  <script type="module">
    console.log(foo);
  </script>
  <!-- 3 ESM 通过 CORS 请求外部 JS 模块 -->
  <script type="module" src=""></script>
  <!-- 4 ESM 的 script 标签会延迟执行脚本 -->
  <script defer>
    alert("hello");
  </script>
</html>

export

可以单独导出变量，函数，类

export var name = "foo module";

export function hello() {
  console.log("hello");
}

export class Person {}

可以在尾部统一导出

var name = "foo module";

function hello() {
  console.log("hello");
}

class Person {}

export { name, hello, Person };

导出重命名

var name = "foo module";

export { name as fullName };

// 导入
// import { fullName } from "./module.js";
// console.log(fullName);

default

var name = "foo module";

function hello() {
  console.log("hello");
}

class Person {}

export default { name, hello };

// 导入
// import mode from "./module.js";
// console.log(mode.name);
// console.log(mode.hello());

var name = "foo module";

function hello() {
  console.log("hello");
}

export { hello as default, name };

// 导入
// import { default as hello, name } from "./module.js";
// console.log(name);
// console.log(hello());

注意事项

export {} 不是字面量对象，import 引入的也不是解构，都是固定语法
通过 export 导出的不是值，而是值的地址，外部取值会受到内部值修改的影响
外部导入的成员属于只读成员（常量），无法修改

import

import xx from './module.js' 路径名称必须完整不能省略（可以使用绝对或相对路径），./ 或 / 不能省略，否则会认为是加载模块
import xx from 'http://module.js'可以使用完整的 url 访问
import {} from './module.js'只会执行模块，不会提取成员，等同于 import './module.js'
import * as all from './module.js' 导入所有方法，通过 all.xx 使用成员
import() 动态导入模块

ESM in Node.js

ES Modules 中可以导入 CommonJS 模块
CommonJS 中不能导入 ES Modules 模块
CommonJS 始终只会导出一个默认成员
注意 import 不是解构导出对象

将 package.json 中添加 type = 'module'

CommonJs 与 ESM

ES Modules

特性

export

import

ESM in Node.js

我都说不要了

引用和评论

Vue 3.0 简介

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

原生JS大揭秘—JS代码执行原理解刨

使用CSS给标题添加书名号并超出省略