Polymer：vulcanizing/minifying 站点在 Firefox 中损坏了它

Question

我有一个 Polymer 站点的自定义构建过程（Polybuild 一直为每个人打破它）。它将入口点带入我的应用程序并通过 vulcanize 和一个缩小器运行它们。输出是一个扁平的 html 文件，其中大部分被缩小。 CSS 未缩小，因为缩小器破坏了新语法。

输出 HTML 在 Chrome 中正常工作，但在 Firefox 中不起作用。该站点未加载，控制台中记录了以下内容：

TypeError: document.registerElement is not a function
 localhost:3000:1:4877
TypeError: Polymer.Base._getExtendedPrototype is not a function
 localhost:3000:1:1090
TypeError: this._desugarBehaviors is not a function
 localhost:3000:1:2359
<snip repeated desugarBehaviors error>

你能告诉我为什么构建的版本不能在一个浏览器中运行而在另一个浏览器中运行，为什么 Firefox 失败？我在 Chrome.

中没有收到这些错误

我的构建过程如下：

build.sh

#!/bin/bash

build_html ( ) {
  ./node_modules/.bin/vulcanize --inline-css --inline-scripts .html > build/.pre.html
  ./minify-html.js build/.pre.html build/.html
}

echo 1. clean build dir
rm -r ./build
mkdir build

echo 2. copy assets in background
cp -r assets/ build/ &

echo 3. vulcanize and minify entry points
build_html index
build_html register
rm build/*.pre.html

echo 4. copy polyfills
mkdir -p ./build/bower_components/{classlist,webcomponentsjs}
cp ./bower_components/classlist/classList.min.js ./build/bower_components/classlist
cp ./bower_components/webcomponentsjs/webcomponents-lite.min.js ./build/bower_components/webcomponentsjs
cp ./bower_components/webcomponentsjs/webcomponents.min.js ./build/bower_components/webcomponentsjs

minify-html.js

#!/usr/bin/env node
var hmin = require('html-minifier');
var fs = require('fs');

var src = fs.readFileSync(process.argv[2]).toString();
var res = hmin.minify(src, {
  removeComments: true,
  removeCommentsFromCDATA: true,
  collapseWhitespace: true,
  conservativeCollapse: true,
  minifyJS: true,
  preventAttributesEscaping: true,
  minifyJS: true,
  customAttrAssign: [ /$=/ ]
});

fs.writeFileSync(process.argv[3], res);

Answer 1

您很可能缺少 webcomponents 库，它可能会在某些浏览器上填充 registerElement。确保在需要的地方导入它。

Polymer：vulcanizing/minifying 站点在 Firefox 中损坏了它

Polymer: vulcanizing/minifying site breaks it in Firefox

javascript

firefox

minify

polymer-1.0