node.js - React + Webpack + babel7 解析 es6 样式函数赋值失败
问题描述
我正在学习 React(udemy 课程)。我掉进了一个兔子洞,试图升级我的类项目以使用 ES6 风格的函数声明和赋值。是的,我试图找到发布的类似问题,但没有找到任何有效的方法。
这是我的 package.json:
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"webpack": "^2.7.0",
"webpack-dev-server": "^1.16.5"
},
"dependencies": {
"lodash": "^3.10.1",
"react": "16.3.2",
"react-dom": "16.3.2",
"react-redux": "5.0.7",
"redux": "4.0.0",
"yarn": "^1.10.1",
"youtube-api-search": "0.0.5"
}
}
和我的 .babelrc 文件:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
还有我的 webpack.config.js:
module.exports = {
entry: ['./src/index.js'],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env","@babel/preset-react"]
}
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './',
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
}
};
主 index.js 文件如下所示:
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
const API_KEY = 'xxx';
const App = function() {
return (
<div>
<SearchBar />
</div>
);
}
ReactDOM.render(
<App />, document.querySelector('.container'));
最后,search_bar.js 文件如下所示:
import React from 'react';
const SearchBar = () ==> {
return <input />;
}
export default SearchBar;
我已经完成了 npm 安装等,但是当我使用 npm start 运行应用程序时,出现错误:
./src/components/search_bar.js 中的错误模块构建失败:SyntaxError:/Users/xxxxx/ReactProjects/ReduxSimpleStarter/src/components/search_bar.js:意外令牌 (3:19)
1 | 从“反应”导入反应;2 |
3 | 常量搜索栏 = () ==> { | ^ 4 | 返回 ; 5 | } 6 | 在 _class.raise (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:3939:15) 在 _class.unexpected (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/ parser/lib/index.js:5248:16) 在 _class.parseParenAndDistinguishExpression (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:6509:12) 在 _class.parseExprAtom (/Users /xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:6284:21) 在 _class.parseExprAtom (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js :3635:52) 在 _class.parseExprSubscripts (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.
谁能帮助解释这里出了什么问题以及为什么它不起作用?谢谢。
解决方案
你有=
双const SearchBar = () ==>
推荐阅读
- react-native - 推送不在标签 wix v2 中的屏幕
- java - NoClassDefFoundError:Android 应用程序崩溃
- spring - hibernate 在执行时没有运行插入和更新
- javascript - 有没有办法对我的 vis.js 网络中的每个节点进行动态级别分离?
- r - 使用 visNetwork lib 在 R 中将节点制作为图像
- javascript - 在 Angular 4/5/6/7 中为不同的组件使用不同的样式表
- performance - 测量代码执行时间的“快速”方法
- java - Java中引用变量的大小差异。(列表与数组列表)
- python - 如何在 Python 列表中指定一般 (x,y) 位置?
- android - 如果正确执行 TRY 代码,则更改布尔变量