Question

我正在开发一个Polymer 2元素项目，并且会生成一个捆绑的html文件，我可以将其导入到其他页面中。对于捆绑我使用的是 Polymer2 CLI 。

我遇到的问题是捆绑的文件导致Chrome出错。非捆绑版本在FireFox和Chrome中都运行良好，捆绑版本在FireFox中运行良好。

捆绑后，Chrome会返回以下错误：

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

这似乎是ES6-＆gt; ES5编译步骤中出现的问题，因为此处引发了错误：

babelHelpers.possibleConstructorReturn(
    this,
    (g.__proto__ || Object.getPrototypeOf(g)).apply(this, arguments)
)

我能够通过这个基本的文件夹结构在一个非常简单的设置中重现问题：

root
|
|__index.html       // File that will import the bundle
|
|__polymer-elements
    |
    |__index.html   // File that imports all Polymer elements
    |
    |__polymer.json 
    |
    |__src
        |
        |_el-1.html
        |
        |_el-2.html
        |
        |_el-3.html

polymer-elements/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>polymer-test</title>
    <meta name="description" content="polymer-test description">
    <link rel="import" href="src/el-1.html">
    <link rel="import" href="src/el-2.html">
    <link rel="import" href="src/el-3.html">
  </head>
  <body>
  </body>
</html>

polymer-elements/polymer.json

{
  "entrypoint": "index.html",
  "fragments": [],
  "sources": [
    "src/**/*",
    "index.html"
  ],
  "extraDependencies": [
    "bower_components/webcomponentsjs/*.js"
  ],
  "builds": [
    {
      "name": "es5-bundled",
      "bundle": true,
      "js": {
        "compile": true,
        "minify": true
      },
      "css": {
        "minify": true
      },
      "html": {
        "minify": true
      },
      "addServiceWorker": false,
      "addPushManifest": false,
      "insertPrefetchLinks": false
    }
  ],
  "lint": {
    "rules": [
      "polymer-2"
    ]
  }
}

当我从目录Polymer build运行polymer-elements时，会在build/es5-bundled/index.html中生成一个捆绑包。然后我像这样包括捆绑包：

index.html（root）

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="polymer-elements/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <!-- THE BUNDLED VERSION IS CAUSING ISSUES IN CHROME  -->
    <link rel="import" href="polymer-elements/build/es5-bundled/index.html"> 
    <!-- USING THE UNBUNDLED VERSION WOULD WORK FINE  -->
    <!-- <link rel="import" href="polymer-elements/index.html">  -->
  </head>
  <body>
    <el-1></el-1>
    <el-2></el-2>
    <el-3></el-3>
  </body>
</html>

我的设置有问题，还是在编译过程中出现这种错误？

更新1 有趣的是，当我将/webcomponents-loader.js的脚本引用添加到polymer-elements/index.html并将其从根索引中删除时，我发现Chrome正在按预期工作但FireFox失败（只是没有渲染Polymer元素而没有错误）。

更新2 潜在的问题似乎就是这个...... https://github.com/babel/babel/issues/4480 当我设置compile: false（跳过babel transile步骤）时，上面的设置适用于Chrome和FireFox，但显然会在IE中失败....

更新3 我设法通过将custom-elements-es5-adapter.js垫片包含在根索引中来解决问题。我不太明白为什么需要这样做，因为Polymer-cli构建过程已经注入了这个脚本。任何解释都将不胜感激。

以下工作示例： index.html（root）

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="polymer-elements/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script> 
    <script src="polymer-elements/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="polymer-elements/build/es5-bundled/index.html"> 
  </head>
  <body>
    <el-1></el-1>
    <el-2></el-2>
    <el-3></el-3>
  </body>
</html>

Polymer 2 CLI ES5捆绑Chrome问题

0 个答案: