经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。我们接下来看如何使用Babel
安装依赖包
在我们命令行工具中输入，以下指令
npm i -D @babel/core @babel/preset-env babel-loader core-js
共安装了4个包，分别是:
@babel/core
这个包是babel的核心工具
@babel/preset-env
babel的预定义环境
@babel-loader
babel在webpack中的加载器
core-js
core-js用来使老版本的浏览器支持新版ES语法
修改webpack.config.js配置文件
...略...
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader",
options:{
presets: [
[
"@babel/preset-env",
{
"targets":{
"chrome": "58",
"ie": "11"
},
"corejs":"3",
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
...略...
如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。
最后再详细贴上webpack.config.js的配置项包含其注释，如下所示：
// 引入一个包
const path = require('path');
// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// const { Extension } = require('typescript');
// webpack的配置信息都应该协助moudle.exports中
module.exports = {
mode:'development', // 指定当前的模式
// 指定入口文件
entry: './src/index.ts',
// 缓存配置
cache: {
type: 'filesystem', // 使用文件系统缓存
buildDependencies: {
// 配置构建依赖项，例如package.json文件或配置文件的变化应该使缓存失效
config: [__filename]
},
// 可以设置更详细的缓存策略，例如使用hash来控制缓存失效等
},
// 指定打包文件所在的目录
output:{
// 指定打包的目录
path:path.resolve(__dirname,'dist'), // 表示当前文件所在目录
// 打包好的文件名
filename:'bundle.js',
// 告诉webpack不使用箭头函数
environment:{
arrowFunction:false
}
},
// 指定webpack打包时要使用的模块
module:{
// 指定要加载的规则
rules:[
{
// test指定的是规定生效的文件
test:/\.ts$/,
// 要使用的loader
use:[
// 配置babel
{
// 指定加载器
loader:'babel-loader',
// 设置babel
options:{
// 设置预定义的环境
presets:[
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
"chrome":"58",
"ie":"11"
},
// 指定corejs的版本
corejs:"3",
// 使用corejs的方法 usage:按需加载
useBuiltIns:"usage"
}
]
]
}
},
'ts-loader',
],
// 排除node_modules下的文件
exclude:/node_modules/
}
]
},
// 配置webpack插件
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// title:"这是一个自定义的title"
template:'./src/index.html'
}),
],
// 用来设置引用模块
resolve:{
extensions:['.ts','.js'],
}
}
好了今天就介绍到这里，我们下次见，感谢大家观看
