如何使用Liquid内联丑化Javascript-Shopify

Question

所以今天我了解到最小化js.liquid文件中的JavaScript是一场噩梦。

我用gulp&typescript:

这是来自我的条目TypeScript文件的调用，该文件使用液体内联：

ajaxLoader("{{ 'logo_black.svg' | asset_url }}")

这是ajaxLoader的模块

export function ajaxLoader ( URI : string | URL ) : XMLHttpRequest {
let ajax = new XMLHttpRequest();
ajax.open( "GET", URI, true );
ajax.send();
ajax.onload = (e : any) => {
let parser = new DOMParser();
let doc = parser.parseFromString( ajax.responseText, "image/svg+xml" );
document.getElementsByTagName("body")[0].appendChild(doc.getElementsByTagName("svg")[0]);
};

return ajax;
}

我的任务之一如下：

function typescript ( done ) {
let $browserify = browserify({
entries : paths.entry
})
.plugin(tsify, _typescriptConfig)
.on("error", log)
.bundle()
.on("error", log)
.pipe(source("theme.js"))
.on("error", log)
.pipe(buffer())
.on("error", log)
.pipe($.uglify())
.on("error", log)
.pipe($.rename((path) => {
path.extname = ".js.liquid";
}))
.pipe(gulp.dest(paths.build))
;
done();
}

这运行时没有任何错误，并构建了文件，无论好坏。然而，当涉及到Shopify CLI同步资产文件夹时，它在现在最小化的文件中发现一个{{，并给出以下错误：

XX:XX:XX ERROR  » update assets/theme.js.liquid:
Liquid syntax error (line 1): Variable '{{var t=r,i=l,n=e,s=a.slice(1);const o=i[n]||{}' was not properly terminated with regexp: /}}/

有没有一种(本地开发方面(方法可以解决这个问题，仍然允许我对文件进行丑化，或者我必须在所需页面上的内联脚本标记中进行所有的液体调用？

还是我最好只使用氢

这篇文章没有任何帮助

Answer 1

您可以将javascript分离到assets文件夹中的.js文件中，然后使用url过滤器将其导入回。