使用 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