Svelte + Babel（在 Webpack 上）不渲染元素答案

【问题标题】：Svelte + Babel (on Webpack) don't render elementsSvelte + Babel（在 Webpack 上）不渲染元素
【发布时间】：2020-01-17 08:14:42
【问题描述】：

我正在开发一个 MVC 项目：

精简 (3) 个组件
Webpack (3)
通天塔 (7)。

在 webpack 上，使用以下设置：

{
    test: /\.svelte$/,
    use: ['svelte-loader']
},

我的组件可以在 Chrome、Firefox 和 Edge 上正确呈现，但如果我在 svelte 脚本中使用扩展运算符，后者会中断。此外，组件不会在 IE11 上呈现。

改为：

{
    test: /\.svelte$/,
    use: ['babel-loader', 'svelte-loader']
},

它将纤细的脚本转换为 ES5（我在 DevTool 中检查了包），但它不会在任何浏览器上呈现组件而不会返回任何错误。在同一个包中，我可以看到文件 index.mjs（在 node_modules/svelte 中）不在 ES5 中，但我无法让它转译（检查下面的代码）。

这是 webpack.config.js 中的设置：

  module: {
    rules: [
      {
        test: /\.m?js$/,
        include: [/svelte/],
        use: ['babel-loader']
      },
      {
        test: /\.svelte$/,
        use: ['babel-loader', 'svelte-loader']
      },
      {
        test: /.(js|jsx)$/,
        include: [path.resolve(__dirname, 'src')],
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'eslint-loader',
            options: {
              exclude: /node_modules/
            }
          }
        ]
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefix()]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['././node_modules']
            }
          }
        ]
      },
      {
        test: /\.(gif|png|jpe?g|JPG?g)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: true
            }
          }
        ]
      },
      {
        test: /\.(ico)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: true
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]'
          }
        }
      }
    ]
  },

这些是 babel 的设置：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "ie": "11"
                },
                "forceAllTransforms": true,
                "useBuiltIns": "usage",
                "corejs": {
                    "version": 3,
                    "proposals": true
                }
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

我需要让我的应用在 IE11 上运行。

* 2019 年 9 月 16 日更新 *

从 Babel 改为 Buble，它在 Chrome 和 Edge 上完美运行，但在 IE11 中却不行，所以 Buble 不是解决方案。

在这个博客上：http://simey.me/svelte3-rollup-and-babel7/ 进入“问题”部分，它准确地描述了发生在我身上的事情。不幸的是，它的解决方案不适用于 Webpack。

【问题讨论】：

标签： javascript webpack babeljs svelte

【解决方案1】：

仅供参考：我通过 3 个（主要）步骤解决了这个问题：

1) 在“webpack.config.js”中，我必须更改：“优化”->“splitChunks”->“块”从“全部”改为“异步”

optimization: {    
    splitChunks: {
      chunks: 'async',
      ...
    }
  },

使用“all”时，它根本不渲染组件（但我很有可能在某处遇到了配置）。

2) 我已经安装了“document-register-element”模块并导入了 main.js。参考：https://github.com/WebReflection/document-register-element#how

3) 我已经安装了“whatwg-fetch”模块，并在导入库后用“window.fetch”更改了纤细的“fetch”。参考：https://www.npmjs.com/package/whatwg-fetch

现在它可以在 IE11 上正常运行。

【讨论】：

【解决方案2】：

webpack.config.js

我的工作设置

 {
  test: /\.(js|mjs)$/,
  exclude: /core-js/,
  loader: "babel-loader",
 },
 {
   test: /\.svelte$/,
   include: /src|svelte/,
   use: [
      "babel-loader",
      {
        loader: "svelte-loader",
        options: {
          preprocess: sveltePreprocess(),
          emitCss: true,
          hotReload: true,
        },
     },
   ],
 },

和 babel.config.js

module.exports = {
  presets: ["@babel/preset-env"]
};

是的，这就是 babel 的全部内容，我在 main.js

中包含了 "core-js" 库

import "core-js/stable";

对于路由，我使用“yrv”，并且必须为导航事件实现回退，因为 ie11 不支持“new Event()”构造，但这是另一回事...

【讨论】：