Я пытаюсь заставить @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(), потому что он говорит, что это не конструктор.
Без этого плагина мой веб-пакет (который не может создать определенный файл .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. Под правильным я подразумеваю, что компилятор не бросает эта ошибка в конкретный файл, который я использую.





В идеале у вас должен быть файл .babelrc в корне вашего проекта (просто создайте его, если он не существует) и включите его в "plugins", в противном случае вы можете включить конфигурацию babel в свой package.json (не рекомендуется) или в свой Конфигурация веб-пакета babel-loader опции.
Что вы все установили?
@Marc Вы можете просмотреть мой комплект React Bare Bones Kit: github.com/mattcarlotta/реагировать-бб-кит, который включает в себя настройку вручную: Webpack, babel, SCSS, stylelint, eslint ... и т. д. и какие пакеты требуются.
В итоге мне пришлось установить намного больше, используя
npm, и изменить некоторые вещи в моем файлеpackage.json, чтобы это наконец заработало (без вывода ошибок компиляции). Но, в конце концов, это сработало. Спасибо.