如何从不支持 ES6 模块的 js 文件中引入另一个 js 文件？

Question

我正在使用 Shopify 应用程序块扩展。

有一些荒谬的限制，例如

liquid

文件不能超过 100 KB 大小。还可以从

JS

文件的

schema

引用

liquid

文件，该文件应存储在 assets 文件夹内，并且此引用的

JS

文件不能超过 10 Kb 文件大小。

但是，资产文件夹的大小限制为 100 MB，并且可以灵活地在资产文件夹内创建所需数量的

JS

文件。

当我接受它们所有的大小限制时，我决定在

assets

文件夹中创建一个 helpers.js 文件，然后在

helpers.js

文件和引用的

liquid 

中调用此 liquid

 文件中的函数JS

文件。

现在的问题是我无法在liquid引用JS文件中使用import或使用

require

。

所以我想知道我可以采取什么步骤来解决这个问题？

谢谢！

Answer 1

我用来解决与文件大小限制相关的问题的方法是将所有函数移动到在

helpers.js

文件夹中创建的

assets

文件中，该文件没有任何大小限制。然而，包含 helpers.js 文件的

folder

的 size 限制为 10mb。

因此，要从

js

文件连接

liquid

文件，我采用了以下方法：

<script>
  var script = document.createElement('script');
  script.src = "{{ "../assets/helpers.js" | asset_url }}";  
  script.onload = function() {
    // Ensuring the helpers are loaded before running the rendeing logics.
    initializeCustomDesign(); 
    console.log("Loaded the helpers.js");
  };
  document.head.appendChild(script);

  "{{ "hola007" }}"
</script>

我将所有设计移至

initializeCustomDesign()

函数内，以便在初始化设计之前加载所有用于创建设计的辅助函数。