reactjs - 哪个是处理 React JSX 的合适加载器?
问题描述
我正在尝试使 webpack4 生成带有 main.js 的输出文件夹,但不断返回“可能需要适当的加载程序来处理此文件类型”错误并指向 jsx 行。如何让 webpack 转换 jsx,或者我需要什么样的加载器?
我认为问题可能是 @babel/preset-env 和 @babel/preset-react 已过时,或者我需要使用更新的版本,但看起来情况并非如此。
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" ]
}
包.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"
}
}
应用程序.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.
解决方案
主要错误是您webpack
错误地命名了配置文件。
您将其命名,webpack.conf.js
但webpack
命令需要一个名为webpack.config.js
.
所以先重命名。
现在在 webpack 中,您没有提到entry
并且output
在您完成重命名后导致错误。
所以将你的 webpack 配置文件重写为。
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')
);
那就改变吧。
遵循这些步骤后,它应该可以工作。
推荐阅读
- flutter - Flutter 嵌套路由
- mysql - 通过迁移添加外键时,哪些表被锁定?
- r - 如何检查变量 A 影响变量 B?
- react-native - 弹出Expo,React Native,找不到libreactnativejni.so
- java - BufferedReader 的 readLine 方法中缺少行
- node.js - vue-cli开发模式如何与服务端api结合?
- javascript - JavaScript:使用具有特定属性的方法创建返回对象的工厂函数
- javascript - 为什么 $.getJSON 仅在使用字符串文字时有效,而在使用变量时抛出未定义的错误?
- javascript - javascript 如果状态函数不读取布尔值
- angular - Angular 基于角色的路由