npm 包 Simple-ESM 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

简单说来，Simple-ESM 是一个浏览器可用的 ES6 模块 polyfill，它可以允许你使用 import/export 语句来加载和导出 ES6 模块，而不需要使用其他 transpiler 或者 bundler。

在过去的几年中，JavaScript 开发者的使用方式已经发生了一系列的变化。许多新兴的框架和工具被依次开发出来，更加远离传统的共享 script 模块。特别是，JavaScript 模块的使用方案正在发生改变，大部分开发者已经转向了 ES6 模块，也就是使用 import/export 语法。而 Simple-ESM 则是一种兼容浏览器直接使用 ES6 模块的解决方案。

安装

你可以通过 npm 安装该软件包，具体步骤如下：

npm install simple-esm

使用示例

当你安装 Simple-ESM 包并在你的项目中使用时，你需要添加以下代码来允许 ES6 模块在浏览器中加载和导出。

<script
  type="module"
  nomodule
  src="path/to/simple-esm.js"
></script>

在这里 type="module" 声明告诉浏览器该脚本是一个ES6的模块化脚本。 nomodule 声明告诉老浏览器该脚本非ES6的模块化脚本其的作用是防止老浏览器忽视本段代码。

现在，你可以方便地使用 import/export 语法来加载和导出 ES6 模块了。下面是一个示例：

//math.js
export const sum = (a, b) => a + b;

//index.js
import { sum } from './math.js';

console.log(sum(1, 2)); // 3

导入 CommonJS/AMD 模块

在 Simple-ESM 中，你可以使用 ES6 import/export 语法导入传统的 CommonJS 或 AMD 模块。这是通过 ES6 的动态 import() 方法来实现的。

//math.js
const sum = (a, b) => a + b;
exports.sum = sum;

//index.js
import('./math.js').then(math => {
  console.log(math.sum(1, 2)); // 3
});

如果你使用此方法导入大量模块，可能会导致许多请求，可能会影响性能。建议使用打包工具来实现压缩合并。

完成

现在你知道如何使用 Simple-ESM 包来在浏览器中加载和导出 ES6 模块。虽然它在现代浏览器中工作得非常好，但请记住，我们仍然建议你使用构建工具（如 Webpack 或 Rollup）将你的代码放在生产环境中使用。如果您有任何疑问或问题，请随时在下面发布评论。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6006726a3660cf7123b36795