React中Babel的配置

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：