Node.js Import 而不是 Require

在 JavaScript 世界里，我们通常使用 require 来导入模块。然而，这个 API 来自于 Node.js，如果我们想要在浏览器或其他运行环境中使用，则需要使用打包工具来把模块转换为 CommonJS 或 AMD 规范。这个过程通常需要使用复杂的配置和工具链，并且会增加应用程序的体积。

import/export 语法是 ECMAScript 6 (ES6) 中引入的模块系统。它是一种在 JavaScript 中原生支持模块化的方式，可以在浏览器和其他 JavaScript 运行环境中直接使用，无需打包工具的支持。

使用 Import

ES6 之后，我们可以使用 import 关键字来导入模块，导入的内容可以是其它模块中导出的变量、函数、类等。

// 导入单个变量
import { name } from './person.js';

// 导入多个变量
import { name, age } from './person.js';

// 导入默认变量
import person from './person.js';

// 导入全部内容
import * as person from './person.js';

使用 Export

同样的，我们也可以使用 export 关键字来导出模块：

// 导出单个变量
export const name = 'John';

// 导出多个变量
export { name, age };

// 导出默认变量
export default Person;

// 导出全部内容
export * as person from './person.js';

支持 Import 的 JavaScript 运行环境

目前，大部分浏览器已经支持使用 import/export 语法来进行模块化开发了。以下是一些常见的 JavaScript 运行环境的支持情况：

• 浏览器：
  • Chrome 61 及以上版本
  • Firefox 60 及以上版本
  • Safari 10.1 及以上版本
  • Edge 16 及以上版本
  • Opera 48 及以上版本
• Node.js 13.2.0 及以上版本，需要在模块文件名后添加 .mjs 后缀

总结

import/export 语法是一种原生支持模块化开发的方式，可以让我们在浏览器和其他 JavaScript 运行环境中直接使用，无需打包工具的支持。因此，在使用 ES6 时，不妨尝试使用 import/export 语法来进行模块化开发。