关于javascript:CommonJs-与-ESM

主动采纳严格模式，疏忽 ‘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 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 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() 动静导入模块

ES Modules 中能够导入 CommonJS 模块
CommonJS 中不能导入 ES Modules 模块
CommonJS 始终只会导出一个默认成员
留神 import 不是解构导出对象

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

关于javascript:CommonJs-与-ESM

ES Modules

个性

export

import

ESM in Node.js