無法獲取箭頭函數（React，Babel，Webpack，ES6）

絕望地希望我能找到能夠告訴我爲什麼我不能使用箭頭函數與我的Webpack/Babel設置一起工作的人，一直在嘗試一堆東西，迄今沒有任何工作。該項目的當前狀態：無法獲取箭頭函數（React，Babel，Webpack，ES6）

的package.json：

{ 
    "name": "..", 
    "version": "1.0.0", 
    "description": "..", 
    "main": "app.jsx", 
    "author": "..", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-transform-class-properties": "^6.22.0", 
    "babel-plugin-transform-react-jsx": "^6.22.0", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "babel-preset-stage-2": "^6.22.0", 
    "css-loader": "^0.26.1", 
    "node-sass": "^4.5.0", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.3.0" 
    }, 
    "dependencies": { 
    "lodash": "^4.17.4", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^3.0.2" 
    } 
}

webpack.config.js：

var path = require('path'); 

module.exports = { 
    entry: './src/router.jsx', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'public') 
    }, 
    watch: true, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /(node_modules)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader' 
     }, 
    ] 
    } 
};

.babelrc

{ 
    "plugins": [ 
    "transform-react-jsx", 
    "transform-class-properties" 
    ], 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-2" 
    ], 
}

組件：

import React from 'react' 

import './styles.scss' 

class Button extends React.Component { 
    asdf =() => { 
    return ['btn', this.props.size].join(' ') 
    } 

    render() { 
    return (
     <button className={this.asdf}> 
     {this.props.children} 
     </button> 
    ) 
    } 
} 

export default Button

錯誤：

ERROR in ./src/app/ui-kit/button.jsx 
Module build failed: SyntaxError: Missing class properties transform. 

    4 | 
    5 | class Button extends React.Component { 
> 6 | asdf =() => { 
    | ^
    7 |  return ['btn', this.props.size].join(' ') 
    8 | } 
    9 | 

@ ./src/app/components/signup.jsx 13:14-45 
@ ./src/app/app.jsx 
@ ./src/router.jsx

來源

2017-02-04 Carl

我覺得'babel-preset-state-0'可能會有所幫助。將其包含在webpack預設中。如果你已經在webpack配置中使用它們，你不需要在babelrc文件中預置。試試吧，讓我知道它是否有幫助 –

謝謝@ShubhamKhatri，babel-preset-state-0做到了！ – Carl

結帳我的巴貝爾包和.babelrc工作在我目前的項目，並與你的比較：

.babelrc：

{ 
    "presets": ["react", "es2015" , "stage-0"], 
    "plugins": [ 
    ["transform-decorators-legacy"] 
    ]  
}

packages.json

"babel-core": "^6.4.5", 
"babel-eslint": "^6.1.2", 
"babel-loader": "^6.2.1", 
"babel-plugin-react-transform": "^2.0.0", 
"babel-plugin-transform-decorators-legacy": "^1.3.4", 
"babel-polyfill": "^6.3.14", 
"babel-preset-es2015": "^6.3.13", 
"babel-preset-react": "^6.3.13", 
"babel-preset-react-hmre": "^1.0.1", 
"babel-preset-stage-0": "^6.3.13",

來源

2017-02-05 10:33:57

謝謝！把第二階段改爲第二階段的訣竅。 – Carl

無法獲取箭頭函數（React，Babel，Webpack，ES6）

回答

相關問題