ios - 如何在 webpack/babel 构建中使用 CustomElement v1 polyfill？

Question

我在获取 this WebComponents polyfill + native-shim 时遇到一些问题通过 webpack 可以在所有设备上正常工作。

我的设置的一些背景:* Webpack2 + babel-6* 应用程序是用 ES6 编写的，转换为 ES5* 导入 node_module用 ES6 编写的包，它定义/注册了 CustomElement在应用程序中使用

所以相关的 webpack 开发配置看起来像这样:

const config = webpackMerge(baseConfig, {
  entry: [
    'webpack/hot/only-dev-server',
    '@webcomponents/custom-elements/src/native-shim',
    '@webcomponents/custom-elements',
    '<module that uses CustomElements>/dist/src/main',
    './src/client',
  ],
  output: {
    path: path.resolve(__dirname, './../dist/assets/'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
        include: [
          path.join(NODE_MODULES_DIR, '<module that uses CustomElements>'),
          path.join(__dirname, '../src'),
        ],
      },
    ],
  },
...

要点:* 我需要在 <module that uses CustomElements> 之前加载 CustomElement poly* 我需要<module that uses CustomElements>在我的应用程序加载之前加载* <module that uses CustomElements>是 ES6，所以我们正在转译它(因此包含在 babel-loader 中)。

以上内容在现代 ES6 浏览器( IE 桌面 Chrome )中按预期工作

它在旧版浏览器中不起作用。我在旧版浏览器(例如 iOS 8)中收到以下错误:

SyntaxError: Unexpected token ')'

指向 native 填充程序 pollyfill 中打开的匿名函数:

(() => {
  'use strict';

  // Do nothing if `customElements` does not exist.
  if (!window.customElements) return;

  const NativeHTMLElement = window.HTMLElement;
  const nativeDefine = window.customElements.define;
  const nativeGet = window.customElements.get;

所以在我看来就像 native-shim需要转译为 ES5:

        include: [
+         path.join(NODE_MODULES_DIR, '@webcomponents/custom-elements/src/native-shim'),
          path.join(NODE_MODULES_DIR, '<module that uses CustomElements>'),
          path.join(__dirname, '../src'),
        ],

...但这样做现在会破坏 Chrome 和 iOS 8，并出现以下错误:

app.js:1 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at new StandInElement (native-shim.js:122)
    at HTMLDocument.createElement (<anonymous>:1:1545)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:504)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at Object.updateChildren (ReactChildReconciler.js:121)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)

..这将我带到这个constructor() native 垫片中的行:

  window.customElements.define = (tagname, elementClass) => {
    const elementProto = elementClass.prototype;
    const StandInElement = class extends NativeHTMLElement {
      constructor() {

<小时/>

唷。因此，我非常不清楚我们如何将其实际包含在基于 webpack 的构建中，其中使用 CustomElements 的依赖项是 ES6(并且需要转译)。

• 将 native-shim 转译为 es5 不起作用
• 在 bundle 入口点顶部按原样使用 native-shim 不适用于 iOS 8，但适用于 Chrome
• 不包含 native-shim 会破坏 Chrome 和 iOS

此时我对 Web 组件真的感到非常沮丧。我只想使用这个恰好是用 Web 组件构建的依赖项。如何让它在 webpack 构建中正常工作，并在所有设备上工作？我在这里遗漏了一些明显的东西吗？

为了后代的缘故，我的 .babelrc 配置(开发配置最相关):

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    "transform-custom-element-classes",
    "transform-object-rest-spread",
    "transform-object-assign",
    "transform-exponentiation-operator"
  ],
  "env": {
    "test": {
      "plugins": [
        [ "babel-plugin-webpack-alias", { "config": "./cfg/test.js" } ]
      ]
    },
    "dev": {
      "plugins": [
        "react-hot-loader/babel",
        [ "babel-plugin-webpack-alias", { "config": "./cfg/dev.js" } ]
      ]
    },
    "dist": {
      "plugins": [
        [ "babel-plugin-webpack-alias", { "config": "./cfg/dist.js" } ],
        "transform-react-constant-elements",
        "transform-react-remove-prop-types",
        "minify-dead-code-elimination",
        "minify-constant-folding"
      ]
    },
    "production": {
      "plugins": [
        [ "babel-plugin-webpack-alias", { "config": "./cfg/server.js" } ],
        "transform-react-constant-elements",
        "transform-react-remove-prop-types",
        "minify-dead-code-elimination",
        "minify-constant-folding"
      ]
    }
  }
}

Answer 1

我能够使用下面的 .babelrc 插件管道实现类似的目标。看起来唯一的区别是 https://babeljs.io/docs/plugins/transform-es2015-classes/和 https://babeljs.io/docs/plugins/transform-es2015-classes/ ，但老实说我不记得那些具体解决了什么问题:

{
  "plugins": [
    "transform-runtime",
    ["babel-plugin-transform-builtin-extend", {
      "globals": ["Error", "Array"]
    }],
    "syntax-async-functions",
    "transform-async-to-generator",
    "transform-custom-element-classes",
    "transform-es2015-classes"
  ]
}