在开发**Shopify Theme Extension的过程中，我们经常会遇到这样一个问题：前端需要使用某个第三方JavaScript SDK（例如聊天 IM SDK、加密库、可视化库等），但是Theme Extension并不能像普通React/Vue项目一样直接使用npm install然后import来调用**。
如果你尝试在Theme Extension中直接写import xxx from 'xxx'，你会发现它根本没法跑起来。这是因为Theme Extension的运行环境和普通前端项目完全不同：
- 它最终会被编译为Liquid模板+ 静态资源。
- 它没有完整的打包器和模块解析能力。
那么，如何优雅地在Theme Extension中集成一个第三方库呢？今天我就来分享一个完整的解决方案。
背景问题
在一个实际的Shopify项目中，我需要在店铺前台调用一个第三方SDK（例如OpenIM、统计分析库、动画库等）。直接npm install引入当然是不行的，会报错。那我该怎么办？
于是，我总结了一条通用的思路：
这样一来，第三方库就能像普通前端资源一样正常使用了。
解决方案
下面我用一个示例来展示整个流程。
1. 新建打包工程
在Theme Extension之外，新建一个目录，用来专门打包第三方库，这里我用vite来打包（当然你也可以用webpack）。例如
mkdir sdk-build
cd sdk-build
npm init -y
npm install openim-sdk-js-wasm vite
2. 配置 vite.config.js
在sdk-build目录下新建vite.config.js：
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: {
entry: 'src/index.js',
name: 'OpenIMSDK', // 会注入到 window.MySDK
fileName: 'openim-sdk',
formats: ['iife'] // iife格式，Extension中可直接使用
}
}
})
3. 编写入口文件
在src/index.js中引入第三方库并导出：
import * as OpenIM from "openim-sdk-js-wasm";
export default OpenIM;
4. 执行打包
npm run build
Vite会在dist/目录下生成一个文件，例如：dist/openim-sdk.iife.js，这个就是我们最终需要放到Shopify Theme Extension的文件。
5. 放入Theme Extension
把 openim-sdk.umd.js 复制到Theme Extension的assets/目录下：
extensions/
my-extension/
assets/
openim-sdk.iife.js
blocks/
snippets/
...
6. 在Liquid文件中引用
在 snippets/xxx.liquid中引入：
<script src="{{ 'openim-sdk.iife.js' | asset_url }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 全局变量已经挂载在 window.OpenIMSDK
const OpenIM = window.OpenIMSDK;
// 举个例子：调用某个方法
console.log("OpenIM SDK 版本:", OpenIM.version);
});
</script>
这样，你就能在Theme Extension的前台环境 中，正常使用第三方 SDK 了。
通过这个方法，我们就能在Shopify Theme Extension中灵活地集成各种第三方库（无论是 IM SDK、图表库，还是加密算法库），而不受 Shopify 的限制。如果你在开发过程中也遇到了类似的问题，希望这篇文章能帮到你。
关于我：
曾在字节跳动等大厂工作超过8年，有资深的移动端、前端开发经验，目前在做Shopify相关业务的创业，关注我，我们一起探索Shopify的精彩世界。
卫星公众/小🍠：浅墨 momo
