Reactjs 如何将类属性插件添加到网页包

我正在尝试让webpack工作

我已经安装了带有节点包管理器（

npm

）的插件

我没有

.babelrc

，所以我假设这个插件应该进入

webpack.config.js

我发现这让我相信以下是一个很好的设置，可以将插件包含在

webpack.config.js

文件中：

const webpack = require('webpack');
const ClassPropertiesPlugin = require("@babel/plugin-proposal-class-properties"); //installed via npm
const config = {
    entry:  __dirname + '/js/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file-loader?name=/public/[name].[ext]",
            },
            {
                test: /\.css$/,
                use: ['css-loader'],
            },
        ]
    },
    plugins: [ClassPropertiesPlugin]
};


module.exports = config;

然而，这导致了错误

<personal info>\static\node_modules\webpack\bin\webpack.js:348
                        throw err;
                        ^

TypeError: arguments[i].apply is not a function
    at Compiler.apply (<personal info><personal info>\static\node_modules\tapable\lib\Tapable.js:375:16)
    at webpack (<personal info>\static\node_modules\webpack\lib\webpack.js:33:19)
    at processOptions (<personal info>\static\node_modules\webpack\bin\webpack.js:335:15)
    at yargs.parse (<personal info>\static\node_modules\webpack\bin\webpack.js:397:2)
    at Object.Yargs.self.parse (<personal info>\static\node_modules\yargs\yargs.js:533:18)
    at Object.<anonymous> (<personal info>\static\node_modules\webpack\bin\webpack.js:152:7)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

我也不能做

newclasspropertiesplugin（）

，因为它说它不是构造函数

如果没有这个插件，我的webpack（无法构建特定的

.jsx

文件 这就是为什么我需要这个插件，但在其他方面效果很好）看起来像

const webpack = require('webpack');
const config = {
    entry:  __dirname + '/js/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file-loader?name=/public/[name].[ext]",
            },
            {
                test: /\.css$/,
                use: ['css-loader'],
            },
        ]
    },
};


module.exports = config;

---

我希望

npm运行build

能够正常工作而不抛出错误，并让插件正确编译javascript。正确地说，我的意思是编译器不会抛出我正在使用的特定文件。

理想情况下，您应该在项目的根目录下有一个文件（如果它不存在，只需创建一个），并将其包含在

“plugins”

下，否则您可以在package.json中包含一个babel配置（不推荐）或者在您的网页包配置的babel loader中。

我最终需要使用

npm

安装更多的东西，并更改我的

package.json

文件中的一些内容，以使其最终工作（不输出任何编译错误）。但是，这最终还是奏效了。谢谢。你们都安装了什么？@Marc你们可以查看我的React裸体套件：包括如何手动设置：Webpack、babel、SCSS、stylelint、eslint。。。等等，以及需要哪些包装。

const webpack = require('webpack');
const config = {
    entry:  __dirname + '/js/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file-loader?name=/public/[name].[ext]",
            },
            {
                test: /\.css$/,
                use: ['css-loader'],
            },
        ]
    },
};


module.exports = config;