Как добавить плагин свойств класса в 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(), потому что он говорит, что это не конструктор.

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 859
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В идеале у вас должен быть файл .babelrc в корне вашего проекта (просто создайте его, если он не существует) и включите его в "plugins", в противном случае вы можете включить конфигурацию babel в свой package.json (не рекомендуется) или в свой Конфигурация веб-пакета babel-loader опции.

В итоге мне пришлось установить намного больше, используя npm, и изменить некоторые вещи в моем файле package.json, чтобы это наконец заработало (без вывода ошибок компиляции). Но, в конце концов, это сработало. Спасибо.

Pro Q 16.04.2019 03:02

Что вы все установили?

The M 11.08.2019 20:41

@Marc Вы можете просмотреть мой комплект React Bare Bones Kit: github.com/mattcarlotta/реагировать-бб-кит, который включает в себя настройку вручную: Webpack, babel, SCSS, stylelint, eslint ... и т. д. и какие пакеты требуются.

Matt Carlotta 11.08.2019 22:44

Другие вопросы по теме