ES Modules特性
- 1、ESM 自動采用嚴格模式，忽略 ‘use strict’
- 2梁棠、每個ES Module 都是運行在單獨的私有作用域中
- 3置森、ESM是通過CORS的方式請求外部JS模塊的
- 4、ESM的script標簽會延遲執(zhí)行腳本 相當于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 的標準執(zhí)行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標簽會延遲執(zhí)行腳本 相當于defer屬性 -->
<!-- <script src='demo.js'></script> -->
<!-- <script type="module" src='demo.js'></script> -->
<script defer src='demo.js'></script>
<p>需要顯示的內(nèi)容</p>
</body>
</html>
ES Modules 導(dǎo)出
npm install -g browser-sync
啟動 BrowserSync
// --files 路徑是相對于運行該命令的項目（目錄）
browser-sync start --server --files "css/*.css"
關(guān)鍵字 export
// 導(dǎo)出和重命名
export {
name as name1
hello as hello1
Person as Person1
}
ES Module 導(dǎo)入導(dǎo)出的注意事項
1沪伙、導(dǎo)出的成員并不是一個字面量對象為固定語法
export {name,age}
2、導(dǎo)入的時候不是解構(gòu),為固定語法
import {name,age} from './module.js'
3县好、導(dǎo)出的成員不是本身围橡，只是導(dǎo)出了地址，外部的時候只是引用缕贡，只是只讀成員翁授，外部不能改變內(nèi)部的值。
ES Module 導(dǎo)入用法
import { name } from "./module.js";
import { } from "./module.js";
import * as mod from "./module.js";
console.log(mod);
//動態(tài)加載
import('./module.js').then(function(module){
console.log(module);
})
//默認成員導(dǎo)出方法1
import { name ,age,default as title } from "./module.js";
//默認成員導(dǎo)出方法2
import title 晾咪，{ name ,age} from "./module.js";
ES Modules 導(dǎo)出導(dǎo)入成員
export { foo,bar } from './module.js'
ES Modules 瀏覽器環(huán)境兼容性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");
// 內(nèi)置模塊兼容了ESM的提取成員方式
import {writeFileSync} from "fs";
fs.writeFileSync("./bar.txt", "es module working");
// import _ from 'lodash'
// console.log(_.camelCase('ES odule'));
// 不支持收擦，因為第三方模塊都是導(dǎo)出默認成員
// import { camelCase } from "lodash";
// console.log(camelCase("ES odule"));
ES Modules in Node.js 與 CommonJS交互
- ES Modules 中可以導(dǎo)入CommonJS 模塊
- CommonJS 中不能導(dǎo)入ESModules模塊
- COmmonJS 始終只會導(dǎo)出一個默認成員
- import 不是解構(gòu)導(dǎo)出對象
ES Modules in Node.js 與 CommonJS差異
//cjs.js
// 加載模塊函數(shù)
console.log(require);
// 加載模塊對象
console.log(module);
// 導(dǎo)出對象別名
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 再次執(zhí)行
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
