正常情况下,大多数浏览器只能支持ES5的语法,react语法是不能识别的,需要进行babel的配置,将react的语法的代码转换为ES5的语法供浏览器解析执行
1 在package.json中安装需要的依赖
...
"dependencies": {
"@babel/runtime": "^7.12.1",
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.23.0",
...
}
npm install 进行安装
2 配置 webpack.config.js ,针对js jsx结尾的文件配置不同的转码器
...
module: {
rules: [
{
test: /.jsx?$/,
loader: ['babel-loader'],
exclude: /node_modules/,
}
]
},
3 配置.babelrc(babel-loader 会默认加载主工程目录下的.babelrc,而其内部就是转码的规则)
{
"presets": ["es2015", "react", "stage-0"],
"plugins": [
"babel-polyfill",
"transform-decorators-legacy"
]
}
这里表明先用stage-0 转码器转, 再用react转码器转, 最后用ES2015(ES6)转码器转
插件
transform-decorators-legacy: 用于babel6 获取babel7的特性
babel-polyfill: 用于转码一些ES2015 不提供的特殊语法的转码规则