ES Modules特性

ES Modules基本特性

• 自动采用严格模式，忽略’use strict’
• 每个ESM模块都是单独的私有作用域
• ESM是通过CORS去请求外部JS模块的
• ESM的script标签会延迟执行脚本

导入导出注意事项

• export{ }是语法，不是导出一个对象

var name = 'jack'
var age = 18
var obj = {name,gae}
// export{ }是语法，不是导出一个对象
export {name,age}
//导出一个对象
export default {name,age} //此时import {name,age} 会报错找不到
// import { }也是语法，不是结构赋值
import {name,age} from './module.js'

• import 是把引用给外部，不是拷贝了一份
• import 暴露的成员是只读的

import特性

• 引用路径必须是完整的文件名，不能省略

// import {name} from './module'
import {name} from './module.js'

• 引用路径必须是完整的路径，不能省略文件夹下的index.js文件

//import {lowercase} from './utils'
import {lowercase} from './utils/index.js'

• 引用路径中**./**不能删除 否则会认为是第三方模块
• 引用路径中可以用**/**的相对路径
• 引用路径中可以用完整的url来加载模块如cdn上面的文件
• 如果只引用不导出可以

import {} from './module.js'
//或
import './module.js'

• 导出成员特别多时

//mod 导出的成员都会作为mod的属性出现
import * as mod from './module.js'

• 不能作为变量和放在if语句中，可以动态导入

// 会返回一个promise函数，导出的成员会作为参数
import('./module.js').then(module=>{
	// module为导出的对象
})

• 默认成员和导出成员一起使用

export default name
export {name,age}

-----------------------------
import {name,age,default as title} from '/module.js'
import title, {name,age} from './module.js'

ESModule的兼容性

• 可以添加esmodule的polyfill

<-- promise 兼容-->
<--nomodule 属性只会在不支持module的时候工作-->
<script nomodule src="https://unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js"></script>
<-- babel 核心-->
<script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/babel-browser-build.js"></script>
<--es6+ 语法处理-->
<script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/browser-es-module-loader.js"></script>

<script type="module">
    import { foo } from './module.js'
    console.log(foo)
  </script>

node对ESModule的支持

• node 版本大于8.5
• 将文件名改为.mjs
• 工作时加参数 --experimental-modules --fileName
• 还在实验中
• 导出时，第三方模块不支持导出一个模块的成员，内置模块可以（做了兼容）
• 不能在CommonJS模块中通过require载入ESModule

const mod = require('./es-module.mjs')
console.log(mod)

• ESModule 可以导入CommonJS模块

import mod from './commonjs.js'
console.log(mod)

// 不能直接提取成员，注意 import 不是解构导出对象
import { foo } from './commonjs.js'
console.log(foo)

• ESModule 中 没有全局中没有模块全局成员了

// // 加载模块函数
// console.log(require)

// // 模块对象
// console.log(module)

// // 导出对象别名
// console.log(exports)

// // 当前文件的绝对路径
// console.log(__filename)

// // 当前文件所在目录
// console.log(__dirname)
// -------------

// require, module, exports 自然是通过 import 和 export 代替

// __filename 和 __dirname 通过 import 对象的 meta 属性获取
// const currentUrl = import.meta.url
// console.log(currentUrl)

// 通过 url 模块的 fileURLToPath 方法转换为路径
import { fileURLToPath } from 'url'
import { dirname } from 'path'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
console.log(__filename)
console.log(__dirname)

• 在高版本的node中可以在package.json 加"type": "module"字段，这时可以不用把文件名改为.mjs，使用CommonJS 时，把文件后缀名改为.cjs可以正常运行