JavaScript 中 ES Modules 怎么实现按需导出组件库-js教程-PHP中文网

es modules 实现组件库按需导出的核心是：每个组件单独文件命名导出、入口仅转发不聚合、package.json 配置 exports 支持子路径导入、构建输出颗粒化文件，确保 tree-shaking 有效。

javascript 中 es modules 怎么实现按需导出组件库

ES Modules 实现组件库按需导出，核心在于 **每个组件单独导出、入口文件不默认全量引入、配合构建工具做静态分析**。用户 import 单个组件时，打包器（如 Vite、Webpack）才能真正只打包用到的代码。

1. 组件独立定义与命名导出

每个组件写在单独文件中，使用 named export，不依赖 default export：

// src/button/index.js
export const Button = {
  name: 'Button',
  render() {
    return h('button', { class: 'btn' }, this.$slots.default?.())
  }
}

// src/icon/index.js
export const Icon = {
  name: 'Icon',
  props: ['name'],
  render() {
    return h('i', { class: `icon-${this.name}` })
  }
}

2. 入口文件只做统一命名导出（不聚合实例）

根目录的 index.js 仅做“转发”，避免创建新对象或执行逻辑，确保 tree-shaking 可生效：

// src/index.js
export { Button } from './button'
export { Icon } from './icon'
export { Input } from './input'
// ❌ 不要这样：export default { Button, Icon } —— 会阻碍摇树
// ❌ 不要这样：export const components = { Button, Icon } —— 同样难被剔除

3. 支持模块解析的 package.json 配置

告诉工具链你的库支持 ESM，并提供正确的入口：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

{
  "main": "dist/index.cjs.js",       // CommonJS 入口（兼容旧环境）
  "module": "dist/index.esm.js",     // ESM 入口（推荐给现代打包器）
  "exports": {
    ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.cjs.js"
    },
    "./button": {
      "import": "./dist/button.esm.js",
      "require": "./dist/button.cjs.js"
    },
    "./icon": {
      "import": "./dist/icon.esm.js",
      "require": "./dist/icon.cjs.js"
    }
  }
}

这样用户可直接 import { Button } from 'my-lib/button'，跳过主入口，彻底按需。

4. 构建输出颗粒化文件（关键一步）

用 Rollup/Vite 打包时，启用 output.preserveModules: true 或手动配置 output.manualChunks，确保每个组件生成独立文件（如 button.js、icon.js），而不是全部塞进一个 index.js。

Vite 库模式默认开启颗粒化输出（基于入口和 exports 字段）
Rollup 需配合 preserveModules: true + output.dir，并设置 inlineDynamicImports: false
最终 npm 包结构应类似：dist/button.esm.js、dist/icon.esm.js、dist/index.esm.js

只要满足这四点，用户无论是 import { Button } from 'my-lib' 还是 import Button from 'my-lib/button'，都能实现真正的按需加载，无多余代码进入产物。