将带Webpacker的Rails应用迁移到Vite时如何引入shopify_app？

核心问题 #

Vite采用ES模块规范，不兼容Webpacker依赖的CommonJSrequire语法；同时Vite的模块解析逻辑无法自动识别shopify_app的默认路径，导致解析失败。

解决步骤 #

1. 配置Vite模块解析别名
   在项目根目录的vite.config.js（或vite.config.ts）中添加别名，指定shopify_app的实际路径：

   import { defineConfig } from 'vite'
   import RubyPlugin from 'vite-plugin-ruby'
   
   export default defineConfig({
     plugins: [RubyPlugin()],
     resolve: {
       alias: {
         // 情况1：若使用@shopify/app-bridge包
         'shopify_app': '@shopify/app-bridge',
         // 情况2：若shopify_app来自Shopify App Rails gem的内置JS，替换为你的gem实际路径
         // 'shopify_app': './vendor/bundle/ruby/3.2.0/gems/shopify_app-21.1.0/app/assets/javascripts/shopify_app'
       }
     }
   })
   

2. 使用ES模块语法导入
   修改app/javascript/application.js的导入语句：

   import 'shopify_app';
   

3. 确认依赖完整性
   如果是使用@shopify/app-bridge，确保已安装依赖：

   npm install @shopify/app-bridge --save
   # 或用yarn
   yarn add @shopify/app-bridge
   

关键说明 #

Webpacker会自动识别Rails gem中的资产路径，但Vite需要显式配置解析规则，所以必须通过别名或添加目录到resolve.root来让Vite找到shopify_app模块。

内容的提问来源于stack exchange，提问作者S.M. Pat