使用 svelte、babel 和 webpack 构建时如何解决

Question

我正在尝试让 svelte、webpack 和 babel 一起工作。我正在制作缩小的捆绑包，但是，该捆绑包在将其加载到浏览器中时会引发错误。这需要在使用 ES6 语法时与 IE11 兼容。我明白了没有'new'就不能调用类构造函数我的 webpack 的相关部分如下所示      {            test: /\.(js|jsx|mjs|svelte)?$/,            exclude: /node_modules/,            use: [                {                    loader: 'babel-loader',                    options: {                        configFile: path.resolve(__dirname, 'babel.config.js')                    }                }            ]        },        {            test: /\.svelte$/,            exclude: /node_modules/,            use: {                loader: "svelte-loader",                options: {                    emitCss: false,                     hotReload: false                },            },        },babel.config 如下module.exports = {plugins: [    '@babel/plugin-proposal-class-properties',    'angularjs-annotate',    'lodash'],presets: [    ['@babel/preset-env', {        useBuiltIns: 'usage',        corejs: { version: 3, proposals: true }    }],    '@babel/preset-react'    ]};svelte 文件本身非常基本<script>    export let name = "World";</script><h1>Hello {name}!</h1>更新我可以通过在 babel config 中排除转换类来运行它exclude: ['transform-classes'],但是，这当然会破坏 IE11。

Answer 1

只需这样做：

$ yarn remove webpack-cli && yarn add --dev webpack-cli

这将删除旧的 cli 版本，重新安装新版本并重新编译所有内容。问题解决了

Answer 2

您需要更新 package.json 中的 webpack-cli 和 html-webpack-plugin 版本：

"webpack-cli": "^4.5.0",

"html-webpack-plugin": "^5.1.0",

然后，删除你的 node_modules 和 package-lock.json 文件并运行一个新的 npm install