网上很多配置babel的方法,都是适用于老的webpack.config.js的格式,我搭了一个新的react项目,发现react里class下的静态函数用箭头函数声明会报错,就自己折腾了半天,终于发现了一个办法解决,不讲为什么,直接上代码
npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-react npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-plugin-transform-class-properties
装了四个babel的包, 然后在.babelrc中
{
"presets": [ "react","es2015","stage-0"],
"plugins": [
"transform-class-properties"
]
}
最后在webpack.config.js中
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
}
}
},
]
},
其实主要是第三步,这里use的写法和webpack老版本不一样。
在preset中,react放在前面可以支持箭头函数作为class的静态方法,es2015放在前面就不行。
原因还没闹明白,先记下解决办法,希望能帮助到更多人。