TS+WebPack搭建编译环境

⚒️ TS与WebPack搭配

使用TS编写项目的时候，我们通常还会安装WebPack打包工具来帮助我们打包ts，只有这两个的配合，才能完成项目的生产开发

使用webpack之前，需要安装的插件(版本按需搭配)：

"devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
}

配置webpack.config.js

//引入包
const path = require('path');
//引入html插件,这玩意会自动生成html文件，并自动引入js到html
const HTMLWebPlugin = require('html-webpack-plugin')
//引入clean插件（每次编译的时候会先删除dist文件全部重新编译）
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//webpack中的所有的配置信息都需要暴露出去
module.exports = {
    //指定入口文件
    entry: './src/index.ts',
    //指定打包文件所在的目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        //打包后文件的名字
        filename: 'bundle.js'
    },
    //指定webpack打包时要用的模块
    module: {
        //指定loader的规则
        rules: [
            {
                //指定规则生效的文件
                //我们要对ts文件生效
                test: /\.ts$/,
                //使用ts-loader插件
                use: 'ts-loader',
                //指定要排除的文件
                exclude: /node-modules/
            }
        ]
    },
    //用来支持引用模块
    resolve:{
        //设置能被webpack当作模块解析的文件后缀
        extensions:['.ts','.js'],
        //可以设置一个目录别名。这里设置 @ 就是nodejs运行的根目录
        alias:{
            "@":path.resolve(__dirname,'./')
        }
    },
    //配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebPlugin({
            title:"HELLO WEBPACK~",
            template:'./src/index.html'
        })
    ]
}

安装babel

虽然tsconfig内可以配置ts编译到指定版本的js，但是对于js新语法还是不能很好的兼容，这个时候就需要安装babel工具，替我们转换这些 “高级” 语法为老版本浏览器支持的语法

首先npm安装插件：

npm i -D @babel/core @babel/preset-env babel-loader core-js

检查依赖(版本自选)：

"devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.26.0",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
}

在webpack.config.js中配置:

...
use: [
    {
        //指定加载器
        loader:'babel-loader',
        //设置babel
        options:{
            //设置预定义环境
            presets:[
                [
                    //指定环境插件
                    "@babel/preset-env",
                    // 配置信息
                    {
                        //要兼容的目标浏览器
                        targets:{
                            "chrome":"80"
                            // "ie":"11"
                        },
                        //指定corejs版本
                        "corejs":"3",
                        //使用corejs的方式[按需、全局]
                        "useBuiltIns":"usage"
                    }
                ]
            ]
        }
    },
    'ts-loader'
],
...

P.S:设置兼容浏览器的时候，别忘了在tsconfig.json编译选项中设置对应语言的目标版本

注意：引入corejs的作用是，当我们需要对js新的特性做兼容的时候（比如Promise），babel是不能帮我们直接翻译的，而corejs内置了这些语法的兼容写法，所以才需要借助corejs

以上配置写完后，我赶紧去下了个ie试了试，发现报错了。。。

原因是因为webpack编译的时候会默认往所有代码前面套一个立即执行的箭头函数，然而ie并不支持箭头函数，而且这个最外层的箭头函数他不会被babel识别替换。。

解决方法：在 webpack.config.js 的 output 属性中添加：

//禁用箭头函数（以便于支持ie），默认套的一层箭头函数不经过babel的转译，略坑
environment:{
    arrowFunction:false
}

还好 IE 已经淘汰了，令人感叹