跳到主要内容

ES Module✅

ES Module 的基本语法与特性​

答案

ES Module（ESM）是 ES6 引入的官方模块化方案，支持静态分析和编译时优化。

  • 使用 import 引入模块，export 导出变量、函数、类等。
  • 只能在模块顶层使用 import/export，不能动态声明。
  • 默认严格模式，支持异步加载（import()）。
  • 每个模块有独立作用域，导入值为只读引用。
// a.js
export const foo = 1
export default function bar() {}

// b.js
import bar, { foo } from './a.js'
console.log(foo) // 1
bar()

答案解析
ESM 让 JS 支持原生模块化，提升了代码组织和依赖管理能力。

面试官视角

  • 核心考察点：能否写出 import/export 基本用法
  • 评分标准：
    • 差：只会用 script 标签
    • 良：能写出 import/export
    • 优：能说明静态分析和只读引用

ES Module 与 CommonJS 的区别？​

答案
  • ESM 静态引入，编译时确定依赖，支持 tree-shaking；CJS 动态 require，运行时加载。
  • ESM 导出为只读引用，CJS 导出为值拷贝（require 缓存）。
  • ESM 支持异步加载（import()），CJS 不支持。
  • ESM 默认严格模式，CJS 默认非严格。
  • ESM 适合浏览器和现代 Node.js，CJS 主要用于 Node.js。
// CommonJS
const foo = require('./foo')
module.exports = { bar: 1 }

// ES Module
import { foo } from './foo.js'
export const bar = 1

答案解析
理解两者差异有助于跨平台开发和模块迁移。

面试官视角

  • 核心考察点：能否说出 ESM/CJS 的本质区别
  • 评分标准：
    • 差：混淆 require 和 import
    • 良：能说出静态/动态加载
    • 优：能结合 tree-shaking、只读引用说明

ES Module 的导入导出方式有哪些？​

答案
  • 命名导出：export const foo = 1
  • 默认导出：export default function() {}
  • 批量导出：export { foo, bar }
  • 导入：import { foo } from './a.js'
  • 默认导入：import bar from './a.js'
  • 全部导入：import * as mod from './a.js'
  • 动态导入：import('./a.js').then(...)
// a.js
export const foo = 1
export default function() {}

// b.js
import bar, { foo } from './a.js'
import * as mod from './a.js'

答案解析
掌握多种导入导出方式，能灵活组织模块代码。

面试官视角

  • 核心考察点：能否写出多种 import/export 语法
  • 评分标准：
    • 差：只会默认导出
    • 良：能用命名/批量导入
    • 优：能用动态导入和 * as

ES Module 的静态分析和 tree-shaking 原理？​

答案
  • ESM 的 import/export 必须在顶层，编译时可确定依赖关系。
  • 静态分析让打包工具（如 webpack、rollup）能检测未使用的导出，进行 tree-shaking（摇树优化），减少最终包体积。
  • CJS 动态 require 无法静态分析，不能 tree-shaking。

答案解析
理解静态分析和 tree-shaking，有助于优化前端构建性能。

面试官视角

  • 核心考察点：能否说明 ESM 优势
  • 评分标准：
    • 差：不知 tree-shaking
    • 良：能说出静态分析
    • 优：能结合打包优化说明

ES Module 如何在浏览器和 Node.js 中使用？​

答案
  • 浏览器：使用 <script type="module">，支持 import/export，自动严格模式，支持跨域加载。
  • Node.js：需 .mjs 后缀或 package.json 设置 "type": "module"，支持 import/export。
  • 注意路径必须写全（如 ./foo.js），不能省略扩展名。
// 浏览器
// Node.js
// package.json: { "type": "module" }
// main.mjs
import { foo } from './foo.mjs'

<script type="module" src="main.js"></script>

答案解析
了解 ESM 在不同环境的用法，能解决实际开发兼容问题。

面试官视角

  • 核心考察点：能否正确配置 ESM 环境
  • 评分标准：
    • 差：只会用 CJS
    • 良：能写出 type="module"
    • 优：能说明 Node.js 配置和路径细节
55%