Какой загрузчик подходит для работы с React JSX? - PullRequest
Новая
       9

Какой загрузчик подходит для работы с React JSX?

0 голосов
/ 04 января 2019

Я пытаюсь сделать webpack4 для создания выходной папки с main.js, но продолжает возвращаться "возможно, потребуется соответствующий загрузчик для обработки ошибки этого типа файла" и указать на строки jsx.Как мне сделать так, чтобы webpack трансформировал jsx, или какой загрузчик мне нужен?

Я подумал, что проблема может заключаться в том, что @ babel / preset-env и @ babel / preset-реакции устарели, или мне нужно использовать более свежую версию, но, похоже, это не так.

webpack.config.js 

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: { loader: 'babel-loader' }
            }
        ]
    }
};

.babelrc 

{
    "presets": [ "@babel/preset-env", "@babel/preset-react" ]
}

package.json 

{
  "name": "github_battle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.0"
  }
}

App.js 

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render (
        <p>React in here</p>
    );
};

export default App;

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

index.js 

import App from './App';

Я ожидаюкод реакции должен быть правильно преобразован и упакован в dist / main.js.

Фактический результат: 

> github_battle@1.0.0 dev D:\WORK\github_battle
> webpack --mode development

Hash: a88a6be7f290c6ab30a1
Version: webpack 4.28.3
Time: 186ms
Built at: 01/04/2019 9:06:55 AM
    Asset      Size  Chunks             Chunk Names
main.js  4.58 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/App.js] 238 bytes {main} [built] [failed] [1 error]
[./src/index.js] 28 bytes {main} [built]

ERROR in ./src/App.js 7:8
Module parse failed: Unexpected token (7:8)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
|     render (
>         <p>React in here</p>
|     );
| };
 @ ./src/index.js 2:0-24
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! github_battle@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the github_battle@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely 
additional logging output above.

1 Ответ

0 голосов
/ 04 января 2019

Основная ошибка в том, что вы указали неверный файл конфигурации webpack.

Вы назвали его webpack.conf.js, но команда webpack ожидает файл с именем webpack.config.js.

Так что переименуй это первым.

Теперь в веб-пакете вы не упомянули entry и output, которые вызывают ошибку после того, как вы закончили с переименованием.

Перепишите файл конфигурации вашего веб-пакета как. 

module.exports = {
    entry: "./src/App.js",
    output: {
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: { loader: 'babel-loader' }
            }
        ]
    }
};

Теперь для App.js вы неправильно написали код ReactJS. должно быть 

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return (
            <p> React in here</p >
        );
    }
};

export default App;

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Так что измени это потом.

Должно работать после выполнения этих шагов.

...