ES Module 在浏览器中的应用

分类讲解

基本使用

文件 /src/math.js

export function add(a, b) {
  return a + b
}

export function multi(a, b) {
  return a * b
}

测试文件 test1.html

<p>基本演示</p>

<script type="module">
  import {add, multi} from "./src/math.js";

  console.log('res add', add(2, 3)) // res add 5
  console.log('res multi', multi(2, 3)) // res multi 6
</script>

外链引入

文件 /src/index.js

import {add, multi} from "./math.js";

console.log('res add', add(2, 3)) // res add 5
console.log('res multi', multi(2, 3)) // res multi 6

测试文件 test2.html

<p>外链</p>

<script type="module" src="./src/index.js"></script>

远程引入

测试文件 test3.html

<p>远程引用</p>

<script type="module">
  import {createStore} from 'https://unpkg.com/[email protected]/es/redux.mjs';

  console.log('createStore', createStore)
  // createStore ƒ i(n,f,u){var c;if("function"==typeof f&&"function"==typeof u||"function"==typeof u&&"function"==typeof arguments[3])throw Error(r(0));if("function"==typeof f&&void 0===u&&(u=f,f=void 0),void 0!==u){i…
</script>

按需动态引入

测试文件 test4.html

<p>动态引入</p>
<button id="btn1">load1</button>
<button id="btn2">load2</button>

<script type="module">
  btn1.addEventListener('click', async () => {
    const add = await import('./src/add.js')
    console.log(add)
    // Module {Symbol(Symbol.toStringTag): 'Module'}
    // default: ƒ add(a, b)
    //   Symbol(Symbol.toStringTag): "Module"
    //   get default: ƒ ()
    //   set default: ƒ ()
    const res = add.default(1, 2)
    console.log('res add', res)
    // print add
    // res add 3
  })
  btn2.addEventListener('click', async () => {
    const {add} = await import('./src/math.js')
    console.log(add)
    // ƒ add(a, b) {
    //   return a + b
    // }
    const res = add(1, 2)
    console.log('res add', res) // res add 3
  })
</script>