Web 组件 IE11 与 Svelte

Question

我正在努力调整使用 Svelte 制作的 webcomponents for IE11。我设法在浏览器中显示了 webcomponents，但我没有设法使它们完全正常工作。

使用 Svelte 转换 时出现以下错误：

object doesn't support property or method "__shady_native_contains" 在@webcomponents 文件中 webcomponents-sd-ce.js.

我将 webpack 与 @webcomponents polyfills 一起使用。

这是我当前的 webpack 配置：

const sassCssConfig = {
    test: /\.s[ac]ss$/,
    use: [
        'style-loader', 'css-loader', 'sass-loader'
    ]
}

const resolveExtensions = {
    alias: {
        svelte: path.resolve('node_modules', 'svelte')
    },
    extensions: [".mjs", ".ts", ".tsx", ".js", ".json", ".svelte"]
}

module.exports = [{
    entry: ['whatwg-fetch', '@webcomponents/custom-elements', './src/main.ts'],
    mode: 'development',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'build'),
        libraryTarget: "window",
    },
    externals: [
        {
            bc: 'bc',
            kendo: 'kendo',
            jquery: 'jQuery'
        }
    ],
    target: ['web', 'es5'],
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /(\.m?js?$)|(\.svelte$)|(\.ts$)/,
                exclude:   /\bcore-js\b/,
                resolve: {
                    fullySpecified: false
                },
                use: [
                    // Then babel
                    {
                        loader: 'babel-loader',
                       
                        options: {
                            presets: [
                                [
                                    "@babel/preset-env",
                                    {
                                        targets: {
                                            browsers: ["ie >= 10"]
                                        },
                                        useBuiltIns: "usage",
                                        corejs: 3
                                    } // or whatever your project requires
                                ],
                                "@babel/preset-typescript",
                            ],
                            plugins: [
                                // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
                                // ["@babel/plugin-proposal-decorators", { legacy: true }],
                                // ["@babel/plugin-proposal-class-properties", { loose: true }],
                                ['@babel/plugin-transform-typescript', { "allowNamespaces": true }],
                                 ["@babel/plugin-transform-runtime", { regenerator: true }]
                            ],
                            sourceType: 'unambiguous'
                        }
                    } 
                ],
            },
            {
                test: /\.svelte$/,
                exclude: /node_modules/,
                
                use: {
                    loader: 'svelte-loader',
                    options: {
                        customElement: true,
                        emitCss: false,
                        preprocess: require('svelte-preprocess')({})
                    },
                }
            },
            sassCssConfig
        ],
    },
    resolve: resolveExtensions,
    plugins: [
        new CopyWebpackPlugin(
            {
                patterns: [
                    {
                        context: 'node_modules/@webcomponents/webcomponentsjs',
                        from: '**/*.js',
                        to: '.'
                    }
                ]

            }
        )

    ]
},

]

在我的 html 文件中，我有以下设置：

<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="~/Scripts/svelte-webpack/build/webcomponents-loader.js"></script>
<script>
  if (!window.customElements) { document.write('<!--'); }
</script>

<script src="~/Scripts/svelte-webpack/build/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

<script src="~/Scripts/svelte-webpack/build/bundle.js"></script>

作为旁注，在 main.ts 中，我为 core-js / regenerator-runtime / promise-polyfill 添加了以下内容

import "core-js/stable";
import "regenerator-runtime/runtime";
import 'promise-polyfill/src/polyfill';

有没有人遇到过类似的情况？我很感激在这个问题上能得到的任何帮助。

Answer 1

我终于可以在 IE11 上正常工作了。问题已通过将 /cdn.polyfill.io/v2/polyfill.min.js 文件替换为 cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js 来解决。我不能说出究竟有什么区别，但现在错误消失了。

这是 head 脚本中的工作配置以及工作汇总配置 (typescript/babel/svelte/:

在 index.html 文件中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
<script src="~/Scripts/svelte-webpack/build/custom-elements-es5-adapter.js"></script>
<script src="~/Scripts/svelte-webpack/build/webcomponents-loader.js"></script>
<script src="~/Scripts/svelte-rollup/build/bundle.js"></script>

export default {
  input: 'src/main.ts',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'build/bundle.js'
  },
  plugins: [
   
    svelte({
      dev: !production,
      customElement: true,
      emitCss: false,
      extensions: ['.svelte'],
      preprocess: sveltePreprocessor()
    }),
    // compile to IE11 compatible ES5
    babel({
        babelHelpers: 'runtime',
      extensions: [ '.js', '.mjs', '.html', '.svelte' ],
      exclude: [ 'node_modules/@babel/**', 'node_modules/core-js/**' ],
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              ie: '11'
            },
            useBuiltIns: 'usage',
            corejs: 3
          }
        ]
      ],
      plugins: [
        '@babel/plugin-syntax-dynamic-import',
        [
          '@babel/plugin-transform-runtime',
          {
            useESModules: true
          }
        ]
      ]
    }),

    resolve({
        browser: true,
        dedupe: ['svelte']
    }),
    commonjs(),
    typescript({ sourceMap: !production, inlineSources: !production }),

    production && terser()
  ],
  watch: {
    clearScreen: false
  }
}

我还在我的 ts 文件中添加了以下 pollyfill 作为导入：

import "core-js/stable";
import "regenerator-runtime/runtime";
import 'promise-polyfill/src/polyfill';

tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules/*"]
}

我想作为旁注添加，而不是我只是切换到汇总以查看是否有任何区别。首先，我遇到了与上面提到的相同的错误。所以答案确实是 polyfill.min.js 与 IE11 中的 webcomponents-sd-ce.js 不兼容，而不是捆绑方法。

Web 组件 IE11 与 Svelte

Web component IE11 with Svelte

internet-explorer

web-component

webpack

svelte