Webpack和React-意外令牌
我是新来的反应和Webpack。我正在设置我的第一个项目，当我试图运行webpack开发服务器时，我的代码没有编译！
下面的更新答案是正确的。我需要添加'react'到babel装载机预设。您可以在此处查看project的完整源代码：https://github.com/cleechtech/redux-todo
错误：
$ webpack-dev-server
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./dist
Hash: d437a155a1da4cdfeeeb
Version: webpack 1.12.14
Time: 5938ms
Asset Size Chunks Chunk Names
bundle.js 1.51 kB 0 [emitted] main
chunk {0} bundle.js (main) 28 bytes [rendered]
[0] multi main 28 bytes {0} [built] [1 error]
ERROR in ./src/index.js
Module build failed: SyntaxError: /Users/connorleech/Projects/redux-todo/src/index.js: Unexpected token (7:16)
console.log(ReactDOM);
ReactDOM.render(<App />,document.getElementById('root'));
src/index.js：
var react = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App');
console.log(ReactDOM);
ReactDOM.render(<App />,document.getElementById('root'));
SRC/组件/App.js
var React = require('react');
var App = React.createClass({
render: function() {
return (
<div>
<h1>I am app!</h1>
</div>
);
}
});
console.log(App);
module.exports = App;
dist/index.html
<!doctype html>
<head>
<title>Redux todo</title>
</head>
<body>
<h1>Hello world</h1>
<div id='root'></div>
<script src='bundle.js'></script>
</body>
最后这里是我的webpack配置和package.json：
module.exports = {
// starting point
entry: [
'./src/index.js'
],
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
// create bundle.js file
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
package.json
{
"name": "redux-todo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cleechtech/redux-todo.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/cleechtech/redux-todo/issues"
},
"homepage": "https://github.com/cleechtech/redux-todo#readme",
"dependencies": {
"react": "^0.14.8",
"react-dom": "^0.14.8",
"react-redux": "^4.4.1",
"redux": "^3.3.1"
},
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"webpack": "^1.12.14"
}
}
共有1个答案
您还需要将react预设添加到babel加载程序配置中
而且必须在es2015
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015', 'react']
}
}
您遇到的问题是因为babel需要知道如何传输JSX—它应该知道它的语法，而不是现成的。
正如在评论中提到的那样，您还必须安装babel-preet-reactnpm包（这很明显，因为Babel无论如何都会在第一次运行时告诉您）。
参考资料：
- https://babeljs.io/docs/plugins/preset-react/
-
问题内容： 我是React和Webpack的新手。我正在设置我的第一个项目，当我尝试运行webpack-dev-server时，我的代码无法编译！ *下面的 *更新 答案是正确的。我需要添加到babel loader预设中。您可以在这里查看项目的完整资源：https：//github.com/cleechtech/redux- todo 错误： src / index.js： src / comp
-
问题内容： 我已经开始研究 Node JS了 。 这是我的文件。 index.html app.js webpack.config.js 更新 bundle.js 因此，当我点击一个 app.js 并访问地址（localhost：3000）时，我在控制台中得到了错误。 bundle.js：1未捕获的SyntaxError：意外的令牌< 另外我的JS文件没有运行。有人可以建议一些解决办法吗？ 提前致
-
确切的错误信息是
-
问题内容： 我可能会缺少装载机吗？我以为我们应该能够在组件主体中使用这些ES6函数，而不必执行语法reactdocs 我的.babelrc具有以下内容： 我正在使用js / jsx文档 问题答案： 您需要使用才能使用类字段，您可以像安装它 并将其用作插件 用于其余的传播语法，例如 根据 文档 ： 提出了两个相关的建议：和 。 描述打算在类的实例上存在的属性（并且可以选择包括用于所述属性的初始化器表
-
我正在学习反应，我想测试我的一个组件，但我坚持这个错误： 以下是我在阅读stackoverflow和github上的帖子时尝试过的一些东西 添加了测试预设和这些插件“变换-es2015-moids-Common js”、动态导入节点”到我的babel配置 在我的包裹里。json Jest属性具有以下设置： 我的实际组件是用ES6和typescript构建的，如果这对您有帮助的话：） 从我所读到的内
-
更新： 代码推送到 初始职位： 我知道有数百个线程，有些在webpack配置中有错别字，有些以错误的方式使用加载器，有些解决了它，有些仍然打开。但是经过无数次尝试，我仍然无法让这个工作，一个简单的“你好世界”使用Webpack 4，反应js。 我做过的事 我是按照这个视频教程一行行：反应 我的package.json 我的webpack.config.js 我的. babelrc 我的目录结构 预