要让企业级模块通过<script>标签直接引入使用，核心是输出UMD或IIFE格式bundle并挂载到window：Webpack需配置output.library、libraryTarget: "umd"、globalObject: "this"及externals；Vite则须启用build.lib模式，指定entry、name和formats: ["es", "umd"]，并设置external排除依赖。
要让企业级模块（比如 Vue 组件库、工具函数集合、UI 基础类）最终能通过普通 <script> 标签直接引入 HTML 使用，核心目标是：**输出一个全局可访问的 UMD 或 IIFE 格式 bundle，并自动挂载到 window 对象上**。Webpack 和 Vite 都支持该能力，但配置逻辑和默认行为不同。
Webpack：配置 output.library 生成可 script 引入的包
关键不是“能不能打包”，而是“打包成什么格式 + 暴露给谁用”。需在 webpack.config.js 中明确声明导出方式：
-
设置
output.library：指定库名，例如MyLib，后续在浏览器中可通过window.MyLib访问 - 设置
output.libraryTarget: "umd"</strong></li> <li><strong>设置 <code>output.globalObject: "this"</strong></li> <li><strong>入口文件统一导出对象</strong>：如 <code>src/index.js
导出一个含install方法或组件列表的对象，而不是默认的 default export -
避免默认
mode: "production"干扰：若依赖 Vue，确保外部已提供window.Vue，并在配置中用externals: { vue: "Vue" }排除 Vue 打包，防止体积膨胀
Vite：用 build.lib 模式替代常规应用构建
Vite 默认构建是为 SPA 服务的，要产出 script 可用库，必须切换为 build.lib 模式：
- 在
vite.config.js中配置build.lib</strong></li> <li><strong>entry 必须是具体文件路径</strong>（不能是目录），例如 <code>entry: resolve(__dirname, "src/index.ts")
-
name 对应全局变量名，如
name: "MyLib"→ 输出后可通过window.MyLib调用 -
formats 支持多格式输出，推荐同时输出
["es", "umd"]，UMD 用于 script 引入，ES 用于现代模块系统 -
external 排除非本库代码：如
external: ["vue"]，否则 Vue 会被打进包里，导致重复加载或版本冲突
通用关键细节：命名、注册与使用一致性
无论 Webpack 还是 Vite，光打包出 JS 文件还不够，前端使用时要能真正识别并注册组件或方法：
-
导出结构需匹配 script 场景：例如 Vue 组件库应在入口文件中显式调用
Vue.component("xxx", Comp)，或暴露install方法供手动安装 -
检查产物是否真的挂载到 window：打开浏览器控制台，输入
window.MyLib看是否有定义；若为 undefined，大概率是libraryTarget或name配置错误 -
CSS 需单独处理：Vite 的 lib 模式默认不提取 CSS，需配合
rollup-plugin-postcss或手动导出样式字符串；Webpack 则需mini-css-extract-plugin提取 CSS 文件并由用户手动<link> -
注意运行时依赖声明：在
package.json中把vue、lodash等设为peerDependencies，而非dependencies，避免使用者重复安装或版本错乱
验证与上线前必做检查
打包完成后，别急着发 npm，先本地验证是否真能“开箱即用”：
- 新建一个空白 HTML 文件，只引入 CDN 版 Vue 和你打包出的 JS（及 CSS）
- 在
<script>中尝试new Vue({ el: "#app", components: { MyButton } })或直接window.MyLib.install(Vue) - 打开开发者工具 → Sources，确认脚本加载无 404，且没有
Uncaught ReferenceError - 查看 network 面板，确认没有意外请求了
.js.map或其他未声明资源
