模块化开发

ES Modules特性

1、ESM 自动采用严格模式，忽略 ‘use strict’
2、每个ES Module 都是运行在单独的私有作用域中
3、ESM是通过CORS的方式请求外部JS模块的
4、ESM的script标签会延迟执行脚本相当于defer属性

安装一个本地serve

npm i serve -g

serve .     //运行文件

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/[email protected]/dist/





    
    
    
    Document



    jkljlk

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

yarn babel-node index.js --presets=@babel/preset-env

新建 .babelrc 文件
{
“presets”:["@babel/preset-env"]
}

yarn babel-node index.js