ES Modules特性
- 1、ESM 自动采用严格模式，忽略 ‘use strict’
- 2、每个ES Module 都是运行在单独的私有作用域中
- 3、ESM是通过CORS的方式请求外部JS模块的
- 4、ESM的script标签会延迟执行脚本 相当于defer属性
安装一个本地serve
npm i serve -g
serve . //运行文件
<!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>Document</title>
</head>
<body>
<!-- 通过给script 添加type = module 属性，就可以 以 ES Module 的标准执行js中的代码 -->
<script type="module">
console.log('this is es module');
</script>
<!-- 1、ESM 自动采用严格模式，忽略 ‘use 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="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<!-- 4、ESM的script标签会延迟执行脚本 相当于defer属性 -->
<!-- <script src='demo.js'></script> -->
<!-- <script type="module" src='demo.js'></script> -->
<script defer src='demo.js'></script>
<p>需要显示的内容</p>
</body>
</html>
ES Modules 导出
npm install -g browser-sync
启动 BrowserSync
// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css"
关键字 export
// 导出和重命名
export {
name as name1
hello as hello1
Person as Person1
}
ES Module 导入导出的注意事项
1、导出的成员并不是一个字面量对象为固定语法
export {name,age}
2、导入的时候不是解构,为固定语法
import {name,age} from './module.js'
3、导出的成员不是本身，只是导出了地址，外部的时候只是引用，只是只读成员，外部不能改变内部的值。
ES Module 导入用法
import { name } from "./module.js";
import { } from "./module.js";
import * as mod from "./module.js";
console.log(mod);
//动态加载
import('./module.js').then(function(module){
console.log(module);
})
//默认成员导出方法1
import { name ,age,default as title } from "./module.js";
//默认成员导出方法2
import title ，{ name ,age} from "./module.js";
ES Modules 导出导入成员
export { foo,bar } from './module.js'
ES Modules 浏览器环境兼容性Polyfill
https://unpkg.com/browse/browser-es-module-loader@0.4.1/dist/
<!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>Document</title>
</head>
<body>
<div>jkljlk</div>
<!-- Promise Polyfill 针对IE 2 只适合测试阶段使用-->
<script nomodule src="https://unpkg.com/browse/promise-polyfill@8.2.0/dist/polyfill.min.js"></script>
<!-- ES Module Loader 针对低版本 1 只适合测试阶段使用-->
<script nomodule src="https://unpkg.com/browse/browser-es-module-loader@0.4.1/dist/babel-browser-build.js"></script>
<script nomodule src="https://unpkg.com/browse/browser-es-module-loader@0.4.1/dist/browser-es-module-loader.js"></script>
<script type="module">
import { name1 } from '/02-export/module.js'
console.log(name1);
</script>
</body>
</html>
ES Modules in Node.js 支持情况
node --experimental-modules index.mjs 运行mjs
yarn add lodash 安装lodash
import { foo, bar } from "./module.mjs";
console.log(foo, bar);
import fs from "fs";
fs.writeFileSync("./foo.txt", "es module working");
// 内置模块兼容了ESM的提取成员方式
import {writeFileSync} from "fs";
fs.writeFileSync("./bar.txt", "es module working");
// import _ from 'lodash'
// console.log(_.camelCase('ES odule'));
// 不支持，因为第三方模块都是导出默认成员
// import { camelCase } from "lodash";
// console.log(camelCase("ES odule"));
ES Modules in Node.js 与 CommonJS交互
- ES Modules 中可以导入CommonJS 模块
- CommonJS 中不能导入ESModules模块
- COmmonJS 始终只会导出一个默认成员
- import 不是解构导出对象
ES Modules in Node.js 与 CommonJS差异
//cjs.js
// 加载模块函数
console.log(require);
// 加载模块对象
console.log(module);
// 导出对象别名
console.log(exports);
// 当前文件的绝对路径
console.log(__filename);
// 当前文件所在目录
console.log(__dirname);
//ems.mjs
// ESM 中没有CommonJS 中的那些模块全局成员了
import { fileURLToPath } from "url";
import { dirname } from "path";
const __filename = fileURLToPath(import.meta.url);
console.log(__filename+'1111111');
const __dirname = dirname(__filename);
console.log(__dirname+'22222');
ES Modules in Node.js 新版本进一步支持
新建package.json 添加type字段
{"type":"modules"} 就不需要将js修改为mjs
如果需要使用commonJS模块，则需要将common.js 的文件扩展名修改为.cjs 再次执行
ES Modules in Node.js - Babel 兼容方案
yarn add @babel/node @babel/core @babel/preset-env --dev
image.png
image.png
yarn babel-node index.js --presets=@babel/preset-env
新建 .babelrc 文件
{
“presets”:["@babel/preset-env"]
}
yarn babel-node index.js
