开一个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"],
};