import和export在浏览器中的使用方式

import和export在浏览器中的使用方式

一般情况下，import 和 export 的使用通常是在 webpack、Vite 等构建工具中已模块的形式使用，而想在浏览器中直接使用，则需要通过一下方式：

export 模块

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

静态 import 引入

静态引入 import 时需要在 script 中添加 type=“module”该类型。

<script type="module">
   import add from './a.js';
   console.log(add(1, 2)); // 3
</script>

动态 import 引入

静态的 import 导入无法做到按需编译，从而降低首页加载速度，而需要动态的引入解决这些问题。

动态引入 import 时的关键字为 import()，而它返回的是一个 promise。

• 方式一：

<script>
    import('./a.js').then(module => {
    	let add = module.default
    	console.log(add(1, 3)); // 4
	})
</script>

• 方式二：

  从返回的对象中解构并重命名 “default” 键。

<script>
    (async () => {
    	const { default: add } = await import('./a.js');
    	console.log(add(3, 4)); // 7
	})()
</script>