javascript模块化之ESM

[[toc]]

ESM是什么

个人理解是:

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

demo1: 浏览器基本使用

<script type="module">
    import {
     func1} from 'my-lib';
    func1();
    console.log('this is es module')
script>

<script type="module">
    var a = 1
    console.log(a) // 正常
script>

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

<script src="./01_demo.js" type="module">script>
<p>测试p>

demo1: 浏览器+babel

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

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

<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