React + Webpack + babel7 解析 es6 样式函数赋值失败

Posted

技术标签:

【中文标题】React + Webpack + babel7 解析 es6 样式函数赋值失败【英文标题】:React + Webpack + babel7 fails to parse es6 style function assignment 【发布时间】:2019-03-30 22:55:47 【问题描述】:

我正在学习 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 install 等,但是当我使用 npm start 运行应用程序时,出现错误:

./src/components/search_bar.js 中的错误 模块构建失败:SyntaxError: /Users/xxxxx/ReactProjects/ReduxSimpleStarter/src/components/search_bar.js: Unexpected token (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.js:5924:21) 在 _class.parseMaybeUnary (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5903:21) 在 _class.parseExprOps (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5812:21) 在 _class.parseMaybeConditional (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5784:21) 在 _class.parseMaybeAssign (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5731:21) @ ./src/index.js 3:0-48 @多./src/index.js webpack: 编译失败。

谁能帮助解释这里出了什么问题以及为什么它不起作用?谢谢。

【问题讨论】:

【参考方案1】:

你在const SearchBar = () ==&gt;中有双=

【讨论】:

天啊——这就是问题所在?我现在因为发布这样一个愚蠢的问题而感到难过。通常我的问题要复杂得多!谢谢!!显然我必须等待 10 分钟才能接受您的回答 没问题,您将受益于linter 指出那些微小的错误并提高您的代码质量。

以上是关于React + Webpack + babel7 解析 es6 样式函数赋值失败的主要内容,如果未能解决你的问题,请参考以下文章

使用 babel7 时,forwardRef 不是 buildReactRelayContainer 的函数

webpack打包react项目babel-loader转换es6语法中‘...’错误

想玩玩react,怎么装bable

Babel 7 - 未捕获的 ReferenceError:未定义 regeneratorRuntime

Babel 7 + Inversify 4 + WebPack 4 - @inject 上的意外字符'@'

无法使用Webpack 4和Babel 7导出默认值