# babel
>Editor: Jung
:::info
- 經過一系列的配置，使得TS和webpack已經結合到了一起，除了webpack，開發中還經常需要結合babel來對程式碼進行轉換以使其可以兼容到更多的瀏覽器，在上述步驟的基礎上，通過以下步驟再將babel引入到專案中。

1. 安裝依賴包：
- ```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語法

2. 修改webpack.config.js配置文件

- ```javascript
...略...
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中指定要兼容的瀏覽器版本。
:::
###### tags: `TypeScript`