除了webpack,开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器。
1、安装依赖包:
npm i -D @babel/core @babel/preset-env babel-loader core-js
@babel/core
:babel的核心工具
@babel/preset-env
:babel的预定义环境
@babel-loader
:babel在webpack中的加载器
core-js
:core-js用来使老版本的浏览器支持新版ES语法
2、修改webpack.config.js配置文件
...略...
module: {
rules: [
{
test: /\.ts$/,
use: [
// 配置 babel
{
// 指定加载器
loader: "babel-loader",
// 设置 babel
options:{
// 设置预定义的环境
presets: [
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器版本
"targets":{
"chrome": "88",
"ie": "11"
},
// 指定 corejs 的版本
"corejs":"3",
// 使用 corejs 的方式。"usage" 表示按需加载
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
...略...
如此一来,使用ts编译后的文件将会再次被babel处理,使得代码可以在大部分浏览器中直接使用,可以在配置选项的targets中指定要兼容的浏览器版本。