reactjs - 如何将类属性插件添加到 webpack
问题描述
我正在尝试@babel/plugin-proposal-class-properties
使用 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)
当我查看它时,这似乎意味着我错误地包含了插件,但我不确定如何。我还尝试了以下完全相同的错误:
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'],
},
]
},
plugins: ["@babel/plugin-proposal-class-properties"]
};
module.exports = config;
我也不能这样做new ClassPropertiesPlugin()
,因为它说它不是构造函数。
如果没有这个插件,我的 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 run build
不引发错误的情况下工作,并让插件正确编译 javascript。正确地说,我的意思是编译器不会在我正在使用的特定文件上抛出这个错误。
解决方案
推荐阅读
- java - 将信息存储在 PNG 文件中而不扭曲图像?
- scala - Scala中带有类对象的Case Switch语句
- python - 为什么 `json.dump()` 没有以 `\n` 结尾?
- android - 将实现行添加到 build.gradle 后,Android 资源链接失败
- excel - 更改 Excel VBA 创建的条形码形状的位置
- tensorflow - 如何在java中读取tensorflow模型的输出
- github - 有没有办法在 GitHub 分支保护中排除特定的分支名称/模式?
- objective-c - 使用 PMPrintSession 时使用系统对话框进行打印
- python-3.x - Django 日期过滤器 - 查找介于两者之间的日期
- javascript - 如何使用javascript从输入数据值中获取onclick值