admin管理员组

文章数量:1624782

目录

一、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/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 = '

本文标签： 模块浏览器esModules

版权声明：本文标题：ES Modules【浏览器端的模块开发规范】 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728913295a1179379.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。