我很希望你能帮我翻译一下,关于it技术的内容。需要翻译的内容是有关箭头函数在我的Webpack/Babel环境下无法正常工作的原因。我已经尝试了很多方法,但都没有成功。以下是当前项目的状态:
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
babel-preset-state-0
可能会有所帮助。将其包含在 webpack 预设中。如果你已经在 webpack 配置中使用了预设,那么就不需要在 babelrc 文件中再次使用它们。试一下,看看是否有帮助。 - Shubham Khatri