前端开发中JS的兼容性问题处理_babel replaceall-优快云博客

本文讲述了在Webpack项目中如何处理ES6、ES7的新语法兼容问题，使用Babel进行编译，并重点介绍了如何配置preset-env以处理Core-jspolyfill。特别提到，若项目已集成create-react-app，其配置可能已经包含默认设置。

开一个webpack项目的知识点记录系列，帮助自己记录相关项目中的点滴。

ES6、ES7等新语法的兼容问题，Webpack打包的项目中可以用Babel来进行向前兼容，需要注意的是ES7的编译需要Core-js这个polyfill（补丁/贴片），在配置中需要一点额外设置：

//babel的配置文件可以是.babelrc, .babelrc.js,.babelrc.json

//也可以是babelr.config.js, babelr.config.json

//或者在package.json中的babel，以上这些只需写期中一个就可，Babel会自动查找、读取它们

本文以babelr.config.js为例，其中babel的配置：

module.exports = {

    //智能预设将ES6的语法编译为低版本的es，以便向前兼容

    presets: [

        ["@babel / preset - env", {

            useBuiltIns: 'usage', //对ES7的编译可以按需加载需要的core-js模块，自动引入

            corejs: 3, //指定core-js版本

        }]，

    ],

};

如果直接引入相关框架的配置，比如react-app，已经内置了以上配置(具体可参考：create-react-app/packages/babel-preset-react-app/create.js at main · facebook/create-react-app · GitHub)，就不必再单独配置了：

module.exports = {
    presets: ["react-app"],
};