如何在webpack/babel構建中使用CustomElement v1 polyfill？

Question

我在使用012pack在所有設備上正常工作時遇到了一些麻煩，雖然是webpack。

上我的設置一些背景資料： * Webpack2 +巴貝爾-6- *應用程序是用ES6，transpiling到ES5 *導入一個node_module包寫入ES6，它定義/登記在應用程序中使用的CustomElement

因此相關的WebPack dev的配置看起來是這樣的：

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聚裝*我需要<module that uses CustomElements>在我的應用程序之前加載 * <module that uses CustomElements>是ES6，因此我們正在對它進行編譯（因此包含在babel-loader中）。

如預期在現代ES6瀏覽器（IE的桌面版Chrome）以上的作品，無論其

它不會在舊的瀏覽器。我碰到下面的錯誤在舊的瀏覽器，例如iOS的8：

SyntaxError: Unexpected token ')' 

指向開放匿名函數在本機墊片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會必須transpiled到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()線在本機墊片：

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

---

唷。所以我很不清楚我們如何在基於webpack的構建中實際包含它，其中使用CustomElements的依賴項是ES6（並且需要轉譯）。

• Transpiling本地-墊片來ES5採用原生墊片作爲-是在束進入點的頂部爲iOS 8不工作不工作
• ，但確實爲Chrome
• 不包括Chrome瀏覽器和iOS的原生遊戲破解版

在這一點上，我對Web組件非常沮喪。我只想使用這種依賴性，它恰好與Web組件一起構建。我如何才能讓它在webpack構建中正常工作，並在所有設備上工作？我在這裏錯過了很明顯的東西嗎

我的。babelrc配置爲後人着想（DEV配置最相關的）：

{ 
    "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" 
    ] 
}