Back to Details

es-modules

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Use ES modules (import/export)

使用 ES modules（import/export）

ES modules are statically analyzable — bundlers can determine at build time what code is actually used and eliminate the rest (tree-shaking). CommonJS require() is dynamic and prevents this optimization. ES modules are also the browser-native standard, reducing the need for build-time transformation.
ES modules 支持静态分析——bundler 可以在构建时确定实际被使用的代码，并移除其余未使用的代码（tree-shaking）。CommonJS 的 require() 是动态的，会阻碍这一优化。ES modules 同时也是浏览器原生标准，能够减少构建时转换的需求。

Quick Reference

快速参考

  • Use import/export syntax instead of require()/module.exports
  • Named exports improve IDE autocompletion and enable tree-shaking
  • Add type="module" to script tags or use a bundler to load ES modules in browsers
  • Default exports are fine but named exports scale better in large codebases
  • 使用 import/export 语法，而非 require()/module.exports
  • 命名导出可提升 IDE 自动补全体验，同时支持 tree-shaking
  • 在 script 标签中添加 type="module"，或使用 bundler 在浏览器中加载 ES modules
  • 默认导出也可以使用，但在大型代码库中命名导出的扩展性更好

Check

检查

Identify any use of require(), module.exports, or exports in this JavaScript file that should be converted to ES module syntax.
识别当前 JavaScript 文件中所有需要转换为 ES module 语法的 require()、module.exports 或 exports 的使用。

Fix

修复

Convert all require() and module.exports statements to ES module import/export syntax.
将所有 require() 和 module.exports 语句转换为 ES module 的 import/export 语法。

Explain

说明

Explain the benefits of ES modules over CommonJS, including tree-shaking, static analysis, and browser support.
解释 ES modules 相比 CommonJS 的优势，包括 tree-shaking、静态分析和浏览器支持。

Code Review

代码审查

Review scripts, client components, and browser execution paths related to Use ES modules (import/export). Flag exact imports, event handlers, runtime side effects, or blocking operations that violate the rule, and state how the change should be verified in the browser.
For full implementation details, code examples, and framework-specific guidance, see 
references/rule.md
.
Rule page: https://frontendchecklist.io/en/rules/javascript/es-modules
审查与 ES modules（import/export）相关的脚本、客户端组件和浏览器执行路径。标记违反规则的具体导入语句、事件处理函数、运行时副作用或阻塞操作，并说明如何在浏览器中验证修改效果。
如需完整的实现细节、代码示例和特定框架的指导，请参阅 
references/rule.md
。
规则页面：https://frontendchecklist.io/en/rules/javascript/es-modules