javascript模块化之ESM

[[toc]]

ESM是什么

个人理解是:

• EcmaScript Modules
• 常说的 es modules
• 常说的 es模块
• 常说的 前端模块化

demo1: 浏览器基本使用

<!-- 【1】 浏览器基本使用
  script 标签设置 type = module，
  浏览器就会以 ES modules 的标准去执行 JavaScript 代码。
  默认情况下，代码是以严格模式执行的。 -->
<script type="module">
    import {
     func1} from 'my-lib';
    func1();
    console.log('this is es module')
</script>

<!-- 【2】 私有作用域 
  设置 type=module 的标签内都会形成一个私有作用域。
  作用域之间的变量不能直接共享。 -->
<script type="module">
    var a = 1
    console.log(a) // 正常
</script>

<script type="module">
    console.log(a) // 报错 a is not defined
</script>

<!-- 【3】延迟执行，不会阻塞浏览器渲染，作用与 defer 一致 
  未设置 type = module 前，会先执行完 01_demo.js 的代码。p 标签的渲染会被阻塞。
  设置 type = module 后，p 标签的渲染不会被阻塞。-->
<script src="./01_demo.js" type="module"></script>
<p>测试</p>

demo1: 浏览器+babel

doc/doc-mmxsw/docs/front-tools/babel/5.demo1.md

demo2:浏览器支持es6的模块化

<!-- test1.html -->
<script type="module">
  import {
     addTextToBody} from './utils.js';
  addTextToBody('Modules are pretty cool.');
</script>

// utils.js
export function addTextToBody(text) {
   
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

启动方式:

• vscode插件: open with live server
• 浏览器下可执行
  

demo3: export 和 import关系

启动方式: start/start-js/es6/module/readme.md

具名导出

• Name Export
• 可以导出多个

// 下面2个export效果相同
// export1
export let myVariable = Math.sqrt