ES Modules【浏览器端的模块开发规范】_浏览器esm特性

目录

一、ES Modules 特性

二、ES Modules 导出

三、ES Modules 浏览器环境 Polyfill 

四、ES Modules in Node.js - 支持情况

五、 ES Modules in Node.js - 与 CommonJS 交互

六、ES Modules in Node.js - 与 CommonJS 的差异

七、ES Modules in Node.js - 新版本进一步支持 

八、 ES Modules in Node.js - Babel 兼容方案 

---

一、ES Modules 特性

• 特性1：EMS 自动采用严格模式，忽略 ‘use strict’ 

  <script type="module">
    console.log(this)
  </script>

• 特性2：每个 ES module 都是运行在单独的私有作用域中 

  <script type="module">
    var foo = 100
    console.log(foo) //100
  </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 标签会延迟执行脚本

二、ES Modules 导出

• import 是载入模块
   

   
  import { name, hello, Person } from './module.js'
  console.log(name, hello, Person)
   
  import { name } from './module.js' //不能省略 .js
   
  import { name } from './module.js' //不能省略 ./
  import { name } from '04-import//module.js'
   
  import {  } from './module.js' //只是导出模块，并不会提取成员
  import './module.js'
   
  import * as mod from './module.js' //导出所有成员
   
  import('./module.js').then(function (modile) { //动态导入模块
      console.log(modile)
  })
   
  import { name, age, default as title } from './module.js' //导出默认成员
  import title, { name, age } from './module.js'
  

• export 是导出模块 

  //index.js
  export { default as button } from './button.js'
  export { Avatar } from './avatar.js'
   
  //button.js
  export var BUtton = 'Button Component'
   
  export default Button
   
  //avatar.js
  export var Avatar = '