`webpack`结合`Typescript`使用

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。

基本步骤

1. 初始化项目

进入项目根目录，执行命令 npm init -y
主要作用：初始化项目,创建package.json文件

2. 下载构建工具和对应的第三方包

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

共安装了7个包

webpack
- 构建工具webpack
webpack-cli
- webpack的命令行工具
webpack-dev-server
- webpack的开发服务器
typescript
- ts编译器
ts-loader
- ts加载器，用于在webpack中编译ts文件
html-webpack-plugin
- webpack中html插件，用来自动创建html文件
clean-webpack-plugin
- webpack中的清除插件，每次构建都会先清除目录

3. 根目录下创建`webpack`的配置文件`webpack.config.js`

// 1. 引入包
const path = require('path');// node内置模块,用于处理路径(拼接路径)
const HTMLWebpackPlugin = require('html-webpack-plugin');//帮助我们自动的生成html文件方便调试
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//

// 2. 正式开始配置webpack
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {

    // 1.指定入口文件
    entry:"./src/index.ts",

    // 2.指定打包后输出的文件路径
    output:{
        // 指定输出目录
        path: path.resolve(__dirname,'dist'),//输出为该目录下的dist目录
        // 打包后的文件名
        filename:'bundle.js',//打包成功后在dist目录下输出bundle.js
    },

    // 3.指定webpack在打包时要使用的模块
    module:{
        // 指定要加载的规则(loader的规则)
        rules:[
            {
                // test指定规则生效的文件
                test:/\.ts$/,//正则匹配以ts结尾的文件
                // 要使用到的loader
                use:'ts-loader',
                // 要排除的文件(不使用改规则)
                exclude:/node_modules/,
            }
        ],
    },

    // 4.配置webpack插件
    plugins:[
        //注册插件(里面可以传入一个配置对象)
        new CleanWebpackPlugin(),//清除插件，每次构建都会先清除输出目录
        new HTMLWebpackPlugin({//自动创建html文件插件
            // title:'自定义的网页标题(title)',//输出的网页标题
            template: "./src/index.html",//根据你定义的模板生成网页
        }), 
    ],

    // 5.设置模块的可引用文件
    resolve: {
        // 设置拓展名(后缀)为 .ts 以及 .js 可以作为模块引用
        extensions: ['.ts', '.js']
    },

    // 6.设置模式
    mode:'development'  //production(开发模式)
}

`package.json`

"start": "webpack serve --open chrome.exe":用于运行webpack内置的服务器,实现响应式热加载数据
"build":"webpack":运行该指令可以直接进行打包

{
  "name": "webpackts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack",
    "start": "webpack serve --open chrome.exe"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

`tsconfig.json`

{
    "compilerOptions": {
      "module": "ES2015",//模块使用版本
      "target": "ES2015",//生成的js版本
      "strict": true,//启动严格模式
    }
  }

结果展示:

`babel`设置

经过一系列的配置，使得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的预定义环境(里面预置了许多环境[浏览器环境如火狐,ie等])
- @babel-loader
  - babel在webpack中的加载器,与之结合使用
- core-js
  - core-js是一种运行环境,用来使老版本的浏览器支持新版ES语法

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

// 1. 引入包
const path = require('path');// node内置模块,用于处理路径(拼接路径)
const HTMLWebpackPlugin = require('html-webpack-plugin');//帮助我们自动的生成html文件方便调试
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//

// 2. 正式开始配置webpack
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {

    // 1.指定入口文件
    entry:"./src/index.ts",

    // 2.指定打包后输出的文件路径
    output:{
        // 指定输出目录
        path: path.resolve(__dirname,'dist'),//输出为该目录下的dist目录
        // 打包后的文件名
        filename:'bundle.js',//打包成功后在dist目录下输出bundle.js

    /*----------------------- 兼容老版本的浏览器(不认识箭头函数的浏览器版本) -------------------------*/ 
        // 设置兼容老版本的浏览器(高数webpack不使用箭头函数)
        environment:{
            arrowFunction:false
        }
    /* ----------------------------------------------------------------------------------------*/

    },

    // 3.指定webpack在打包时要使用的模块
    module:{
        // 指定要加载的规则(loader的规则)
        rules:[
            {
                // test指定规则生效的文件
                test:/\.ts$/,//正则匹配以ts结尾的文件

                /* ----------------------------- loader的多个使用写法 ---------------------------*/
                // 要使用到的loader
                use:[
                    // 配置babel
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // 设置babel
                        options:{
                            // 设置预定义的环境
                            presets:[
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        "targets":{
                                            "chrome": "57",// 兼容chrome浏览器到57版本,当时最高
                                            "ie": "11",// 兼容ie浏览器到11版本, 比较低,打包过后应该不会使用es6语法
                                        },
                                        // 指定corejs的版本
                                        "corejs":"3",// 使得老版本的浏览器能够兼容新语法,如promise,async await等..
                                        // 使用corejs的方式 "usage" 表示按需加载
                                        "useBuiltIns": "usage"//设置为按需加载
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        loader:'ts-loader',//这里需写在后面,因为加载器的执行顺序是从后往前执行的(谁最后谁先执行)
                    }
                ],
                /* --------------------------------------------------------------------------------------*/

                // 要排除的文件(不使用改规则)
                exclude:/node_modules/,
            }
        ],
    },

    // 4.配置webpack插件
    plugins:[
        //注册插件(里面可以传入一个配置对象)
        new CleanWebpackPlugin(),//清除插件，每次构建都会先清除输出目录
        new HTMLWebpackPlugin({//自动创建html文件插件
            // title:'自定义的网页标题(title)',//输出的网页标题
            template: "./src/index.html",//根据你定义的模板生成网页
        }), 
    ],

    // 5.设置模块的可引用文件
    resolve: {
        // 设置拓展名(后缀)为 .ts 以及 .js 可以作为模块引用
        extensions: ['.ts', '.js']
    },

    // 6.设置模式
    mode:'development'  //production(开发模式)
}

结果展示:

这里存在一个配置项的问题[environment],因为新版本的webpack基本上已经放弃了对非常老的浏览器版本进行维护了,就是一些不支持箭头函数的老古董级别的浏览器,因为,现在新版的webpack在打包过后会生成一个自调用的一个箭头函数来立即执行代码,就相当创建了一个大的作用域,使得代码在这个作用域中去执行,目的是为了避免代码之间会互相产生干扰! 也就是说,如今版本的webpack在打包使用过后生成的代码会不可避免的带有一个箭头函数(在你没有设置environment配置项的情况下),这对于老古董级别的浏览器是不支持的