如何将类属性插件添加到Webpack [英] How to add the class properties plugin to webpack
问题描述
我正在尝试获取 @babel/plugin-proposal-class-properties
与webpack一起使用.
I'm trying to get the @babel/plugin-proposal-class-properties
to work with webpack.
我已使用节点软件包管理器(npm
)安装了插件.
I have installed the plugin with node package manager (npm
).
我没有.babelrc
,所以我假设此插件应该放入webpack.config.js
.
I don't have a .babelrc
, so I'm assuming that this plugin is supposed to go into webpack.config.js
.
我找到了此页面,这使我相信以下内容是不错的设置将插件包含在webpack.config.js
文件中的方法:
I found this page which led me to believe that the following was a good setup for including the plugin in the webpack.config.js
file:
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)
当我看着它时,这似乎意味着我包括了插件错误,但我不确定如何.我还尝试了以下完全相同的错误:
When I looked into it, it seemed that this meant I was including the plugin incorrectly, but I'm not sure how. I've also tried the following with the exact same error:
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()
,因为它说它不是构造函数.
I also can't do new ClassPropertiesPlugin()
because it says it's not a constructor.
没有此插件,我的webpack(无法构建特定的.jsx
文件
这就是为什么我需要这个插件的原因,否则可以正常使用)
Without this plugin, my webpack (which fails to build a particular .jsx
file
which is why I need this plugin, but otherwise works fine) looks like
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.正确地说,我的意思是编译器不会针对特定错误抛出此错误我正在使用的文件.
I would like the npm run build
to work without throwing an error, and have the plugin compile the javascript correctly. By correctly, I mean that the compiler does not throw this error on a particular file I'm using.
推荐答案
理想情况下,您将拥有下,否则,您可以在其中包含babel配置您的package.json(不推荐)或您的Webpack配置的babel-loader 选项.
Ideally, you would have a .babelrc file at the root of your project (just create one if it doesn’t exist) and include it under "plugins"
, otherwise you can include a babel config in your package.json (not recommended) or in your webpack config’s babel-loader options.
这篇关于如何将类属性插件添加到Webpack的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!