Question

我正在通过以下方式进行MVC项目：

苗条（3）组件
Webpack（3）
通天塔（7）。

在webpack上，具有以下设置：

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

我的组件可以在Chrome，Firefox和Edge上正常显示，但是如果我在svelte脚本中使用了传播运算符，后者就会中断。而且这些组件不会在IE11上呈现。

更改为：

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

它将svelte脚本（我在DevTool中检查了捆绑包）转换为ES5，但它不会在任何浏览器上呈现该组件而不会返回任何错误。在同一包中，我可以看到文件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上运行我的应用。

*更新16/09/2019 *

从Babel更改为Buble，它可以在Chrome和Edge上完美运行，但在IE11中则不能，因此Buble不是解决方案。

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

Answer 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上正常工作。

Answer 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（）”构造，但这是另一回事了……

Svelte + Babel（在Webpack上）不呈现元素

2 个答案: