Polymer 2 CLI ES5捆绑Chrome问题-Java 学习之路

我正在研究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-> 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-elements 运行 Polymer build 时，会在 build/es5-bundled/index.html 中生成一个包 . 然后我像这样包括捆绑包：

index.html （根）

<!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>

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

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

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

UPDATE 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问题

相关问题