Shopify应用块扩展中无法用ES6模块时如何引入外部JS文件？

针对你遇到的Shopify限制问题，这里有几个实用的解决思路：

• 全局挂载助手函数到window对象
  把helpers.js里的所有工具函数挂载到全局window对象上，这样所有后续加载的JS文件都能直接访问。
  示例（helpers.js）：

  window.shopifyHelpers = {
    formatCurrency: function(amount) {
      return `$${(amount / 100).toFixed(2)}`;
    },
    trimText: function(text, maxLength) {
      return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
    }
    // 其他助手函数
  };
  

  在liquid文件中先加载helpers.js，再加载依赖它的功能JS：

  {{ 'helpers.js' | asset_url | script_tag }}
  {{ 'feature-script.js' | asset_url | script_tag }}
  

  之后在feature-script.js里直接调用：shopifyHelpers.formatCurrency(999)。

• 用Liquid的{% include %}合并JS代码
  把helpers.js拆分成多个小代码片段（比如单个函数一个文件），在需要的功能JS文件里通过Liquid的{% include %}直接嵌入。
  示例：创建snippets/format-currency.js.liquid，内容是单个helper函数：

  function formatCurrency(amount) {
    return `$${(amount / 100).toFixed(2)}`;
  }
  

  然后在你的功能JS文件（比如product-card.js.liquid）里引入：

  {% include 'format-currency.js.liquid' %}
  // 功能代码
  document.querySelector('.price').textContent = formatCurrency(productPrice);
  

  这样生成的最终JS文件是完整的，无需import语法，同时能控制单个文件不超过10KB限制。

• 本地构建时拆分合并文件
  本地开发时用构建工具（比如Webpack、Rollup）把helpers.js的代码按需拆分到各个功能JS文件中，打包成多个不超过10KB的独立文件后上传到assets文件夹。比如给每个功能模块打包时，只引入它需要的helper函数，避免冗余，确保单个文件符合大小要求。

• 将前端逻辑转成Liquid Snippets
  如果helper函数是处理渲染相关的逻辑（比如格式化文本、条件判断），可以把这些逻辑写成Liquid Snippets，直接在liquid文件中调用，再通过data属性把结果传递给JS。
  示例：创建snippets/format-price.liquid：

  {%- assign formatted = price | money_with_currency -%}
  {{ formatted }}
  

  在liquid模板中使用并传递给JS：

  <div class="product-price" data-formatted-price="{% render 'format-price', price: product.price %}"></div>
  

  JS中直接读取：

  const formattedPrice = document.querySelector('.product-price').dataset.formattedPrice;
  

内容的提问来源于stack exchange，提问作者Wakil Ahmed