vite 通过插件（如 vite-plugin-externals）、build.lib 的 external 配置或 cdn 手动注入实现第三方 sdk 外部化，避免打包并依赖宿主环境提供，需配合 globals、类型声明及运行时校验确保正确性。
在 JavaScript 项目中，Vite 本身不内置类似 Webpack 的 externals 配置，但可以通过插件和构建配置实现第三方 SDK 的外部化——即让它们不被打包进最终产物，而由宿主环境（如页面全局变量、CDN 或已有脚本）提供。
用 viteExternalsPlugin 显式声明外部依赖
这是最直接的方式，尤其适合已知 SDK 会以全局变量形式注入的场景（比如高德地图、百度地图、微信 JS-SDK 等）。
- 安装插件：
npm install vite-plugin-externals -D（注意名称可能因版本略有差异，常用的是vite-plugin-externals或vite-externals-plugin） - 在
vite.config.js中配置：
AMap 和 WX 标记为外部依赖
import { defineConfig } from 'vite'<br>import externals from 'vite-plugin-externals'<p>export default defineConfig({<br> plugins: [<br> externals({<br> AMap: 'AMap', // import { AMap } from 'amap-jsapi' → 运行时读取 window.AMap<br> wx: 'WX'<br> })<br> ],<br>})</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java"><img
src="https://img.php.cn/upload/skill/000/000/081/178955835420587.jpg" alt="Alibabacloud Sdk Client Initialization For Java" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="overflowclass">Alibabacloud Sdk Client Initialization For Java</a>
<p class="overflowclass">在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
通过 build.lib + external 配置打包 SDK 库时排除依赖
当你用 Vite 打包一个供他人使用的 SDK（比如权限 SDK、GIS 工具包），通常希望使用者自行引入 React、Vue 或 axios 等基础库，这时需主动排除。
- 在
build.lib模式下，配合build.rollupOptions.external声明不打包的模块名 - 同时建议设置
build.rollupOptions.output.globals，指定这些模块在运行时对应的全局变量名（用于 UMD 格式）
build: {<br> lib: { /* ... */ },<br> rollupOptions: {<br> external: ['react', 'react-dom', 'axios'],<br> output: {<br> globals: {<br> react: 'React',<br> 'react-dom': 'ReactDOM',<br> axios: 'axios'<br> }<br> }<br> }<br>}
手动改写 import 路径 + CDN 注入（轻量级替代方案）
若不想引入插件，也可用更底层的方式：在 HTML 模板中提前加载 SDK 的 CDN，并在代码中用动态 import 或全局访问代替静态导入。
- 在
index.html中加入：<script src="https://webapi.amap.com/maps?v=2.0&key=xxx"></script> - 代码中不再写
import * as AMap from 'amap-jsapi'，而是直接使用window.AMap或封装成函数调用 - 配合 TypeScript，可添加类型声明：
declare const AMap: typeof import('amap-jsapi')，保证开发体验
注意依赖预构建对 external 的影响
Vite 开发时会预构建 node_modules 中的依赖。如果某个 SDK 被你标记为 external，但它的类型定义或副作用逻辑仍被其他包引用，可能引发类型错误或运行时缺失。
- 确保该 SDK 确实已在运行环境就绪（例如通过 script 标签、微前端共享、或父应用挂载）
- 避免在
define或resolve.alias中误覆盖 external 模块路径 - 调试时检查浏览器 Network 面板，确认没有因 external 导致的 404 请求
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
