安装babel-loader和@babel/core
使用babel-loader(使用babel-loader实际上是使用babel-loader的各种插件,才可以将js进行转化,babel-loader的各种插件也需要安装)
安装babel预设(可以帮助我们免去各种babel的插件,babel预设相当于各种bebel插件的集合)
@babel/preset-env会根据.browserslistrc所需要适配的浏览器去决定需要添加做适配的babel插件
注: 建议使用babel预设的方式进行js适配
可以将babel的配置抽成单独的一个配置文件(和postcss抽成单独配置文件类似)
注: corejs:3指定3的版本,如果不指定默认为2的版本,会报错
总结:
babel-loader转化js主要通过@babel/preset-env的预设方式(相当于babel转换插件集合)进行转化。@babel/preset-env预设转化js根据.browserslistrc所需要适配的浏览器去决定需要添加适配的babel插件
polyfill的方法主要依赖core-js和regenerator-runtime两个包,通过设置useBuiltIns: "usage",来添加相应需要的api(例如Promise的浏览器适配),添加api的根据也是根据.browserslistrc所需要适配的浏览器, 且如果在代码中有用到相应api,则会添加目标浏览器需要的api(1.目标浏览器 2.有用到相应api)
如果使用useBuiltIns: "entry",那么需要在index.js中引入这两个包。只要是.browserslistrc中有的目标浏览器,都会添加上目标浏览器需要的api(1.目标浏览器 2.无论有没有用到相应api都会添加api)
安装babel对react的预设@babel/preset-react
总结: babel处理jsx主要是通过babel-loader结合@babel/preset-react的预设
安装typescript和ts-loader
在打包之前,我们需要通过命令tsc --init生成一个tsconfig.json的配置文件(ts的相关配置),不然打包ts文件会报错
总结: ts的打包处理是通过ts-loader(需要一个tsconfig.json的配置文件)