介绍
简单说来，Simple-ESM 是一个浏览器可用的 ES6 模块 polyfill，它可以允许你使用 import/export 语句来加载和导出 ES6 模块，而不需要使用其他 transpiler 或者 bundler。
在过去的几年中，JavaScript 开发者的使用方式已经发生了一系列的变化。许多新兴的框架和工具被依次开发出来，更加远离传统的共享 script 模块。特别是，JavaScript 模块的使用方案正在发生改变，大部分开发者已经转向了 ES6 模块，也就是使用 import/export 语法。而 Simple-ESM 则是一种兼容浏览器直接使用 ES6 模块的解决方案。
安装
你可以通过 npm 安装该软件包，具体步骤如下：
--- ------- ----------
使用示例
当你安装 Simple-ESM 包并在你的项目中使用时，你需要添加以下代码来允许 ES6 模块在浏览器中加载和导出。
------- ------------- -------- --------------------------- ----------
在这里 type="module" 声明告诉浏览器该脚本是一个ES6的模块化脚本。 nomodule 声明告诉老浏览器该脚本非ES6的模块化脚本其的作用是防止老浏览器忽视本段代码。
现在，你可以方便地使用 import/export 语法来加载和导出 ES6 模块了。下面是一个示例：
--------- ------ ----- --- - --- -- -- - - -- ---------- ------ - --- - ---- ------------ ------------------ ---- -- -
导入 CommonJS/AMD 模块
在 Simple-ESM 中，你可以使用 ES6 import/export 语法导入传统的 CommonJS 或 AMD 模块。这是通过 ES6 的动态 import() 方法来实现的。
--------- ----- --- - --- -- -- - - -- ----------- - ---- ---------- ----------------------------- -- - ----------------------- ---- -- - ---
如果你使用此方法导入大量模块，可能会导致许多请求，可能会影响性能。建议使用打包工具来实现压缩合并。
完成
现在你知道如何使用 Simple-ESM 包来在浏览器中加载和导出 ES6 模块。虽然它在现代浏览器中工作得非常好，但请记住，我们仍然建议你使用构建工具（如 Webpack 或 Rollup）将你的代码放在生产环境中使用。如果您有任何疑问或问题，请随时在下面发布评论。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006726a3660cf7123b36795