使用 svelte、babel 和 webpack 构建时如何解决“没有 new 就无法调用类构造函数”错误答案

【问题标题】：How to resolve 'class constructor cannot be invoked without new' error when building with svelte, babel, and webpack使用 svelte、babel 和 webpack 构建时如何解决“没有 new 就无法调用类构造函数”错误
【发布时间】：2020-07-01 21:07:04
【问题描述】：

我正在尝试让 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。

【问题讨论】：

你在调用哪个构造函数？该异常的堆栈跟踪是什么？

标签： javascript webpack babeljs svelte

【解决方案1】：

只需这样做：

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

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

【讨论】：

【解决方案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

【讨论】：