webpack babel加载程序未能编译jsx
webpack babel加载程序未能编译jsx
提问于 2016-11-01 09:58:39
我试图运行一个简单的样板反应+ webpack +热模块更换。但我实际上是被babel/jsx的一步困住了，需要帮助。我在跟踪这篇文章。
目前我有：
webpack.config.js
module.exports = {
context: __dirname + "/app",
entry: "./app.js",
output: {
filename: "app.js",
path: __dirname + "/dist",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ["babel-loader"],
}
],
},
}app/app.js
import React from "react";
import Greeting from "./greeting";
React.render(
<Greeting name="World"/>,
document.body
);和app/greetings.js
import React from "react";
export default React.createClass({
render: function() {
return (
<div className="greeting">
Hello, {this.props.name}!
</div>
);
},
});在package.json中
"devDependencies": {
"babel-core": "^6.18.0",
"babel-loader": "^6.2.7",
"webpack": "^1.13.3"
},
"dependencies": {
"react": "^15.3.2"
}当我在控制台中只运行webpack时，如教程所述，它应该运行webpack (以及下面的babel )并捆绑整个应用程序，但是它没有--相反，它抛出了以下错误：
$ webpack
Hash: 9a56cc72acac2de6f40c
Version: webpack 1.13.3
Time: 543ms
+ 1 hidden modules
ERROR in ./app.js
Module build failed: SyntaxError: C:/Users/abc/Tests/webpack-react-hmr/app/app.js: Unexpected token (7:2)
5 |
6 | React.render(
> 7 | <Greeting name="World"/>,
| ^
8 | document.body
9 | );
10 |我对这个话题很陌生，所以我不知道问题出在哪里，但毫无疑问，webpack不懂JSX语法。也许本教程的这一部分不是错了就是过时了：
幸运的是，Babel加载器支持同时转换ES2015和JSX，这意味着我们可以使用单个加载程序，而不必同时使用babel-加载程序和jsx-加载程序。 我们可以使用以下命令安装babel加载程序： npm安装babel-加载程序--保存-dev
我该怎么做才能修复webpack/jsx/babel的设置？
回答 2
Stack Overflow用户
发布于 2016-11-01 10:06:31
您需要babel预置来编译react和其他ES6、ES7特性。
所需预置的清单：
- 最新版本
- 反应
- 阶段-0
将此文件作为.babelrc添加到根目录中。
{
"presets": ["latest", "react", "stage-0"],
}然后做这个安装
npm install --save-dev babel-preset-latest babel-preset-react babel-preset-stage-0现在，让webpack跑。应该管用的！
Stack Overflow用户
发布于 2020-11-10 15:09:33
你需要安装巴贝尔。这是编译jsx文件的关键。
首先安装它：
npm i -D @babel/preset-react @babel/preset-env @babel/core babel-loader @babel/plugin-proposal-class-properties然后创建以下文件，并设置如下配置
/
.babelrc
webpack.config.js.babelrc文件：
{
"presets": [
[ "@babel/preset-env", {
"modules": false,
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
} ],
"@babel/preset-react"
],
"plugins": [ "@babel/plugin-proposal-class-properties" ]
}webpack.config.js文件：
module.exports = {
...
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_module/,
use: 'babel-loader'
},
]
}
};现在跑webpack。一定很好用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40357731
复制相关文章
相似问题
腾讯云开发者
