Babel的配置因为继承了Facebook的官方配置,自己项目中需要做的配置就简单得多了,但是仍需注意React的官方大致都完成了什么配置,可参考github上的create-react-app/packages/babel-preset-react-app/create.js at main · facebook/create-react-app · GitHubhttps://github.com/facebook/create-react-app/blob/main/packages/babel-preset-react-app/create.js1.Webpack配置文件中相关设置:
module: {
rules: [
//处理js
{
test: /\.jsx?$/,
include: path.resolve(__dirname, "../src"),
loader: "babel-loader",
options: {
cacheDirectory: true, //缓存,第二次打包速度会提高
cacheCompression: false, //缓存不做压缩,打包速度也会快一点
plugins: ['react-refresh/babel'], //使能JS的HMR
},
}
]
},
2. Babel配置文件中直接继承React的官方配置
module.exports = {
presets: ["react-app"],
};
如果查看官方提供的配置文件就会发现,已经配置好了一些常用的插件,比如用于编译es6语法的preset-env: