TypeScript——webpack

webpack

项目中的TypeScript源代码不会全部放在一个文件中，我们会根据组件、模块和功能等将源代码划分到不同的文件。在发布一个项目时，尤其Web前端应用，通常需要使用打包工具对源文件进行打包合并。使用打包工具至少有以下几个原因：

由于运行环境（浏览器）中不支持TypeScript代码中使用的模块格式（ES模块），因此会导致无法加载代码。打包工具能够解析模块间的依赖关系并将多个模块文件合并为运行环境能够直接加载的单一文件。
在浏览器环境中减少加载的资源文件数量能够显著提升Web应用的性能。如果使用打包工具将多文件合并为一个文件，那么浏览器只需加载一个文件即可。

1、webpack

webpack是一个流行的JavaScript应用打包器。webpack的主要用途是将多个JavaScript文件打包成一个或多个JavaScript文件。除此之外，webpack还能够打包其他类型的资源文件，如图片和CSS等。

2、实例演示

本节将通过一个简单的例子来演示如何将TypeScript与webpack结合使用。此例中，web-pack负责将多个TypeScript源文件打包合并为一个单独的JavaScript文件，具体如图所示。

与配置Babel的前四步相同，我们需要安装Node.js和TypeScript并且初始化工程。

假设当前工程的目录结构如下：

复制代码

C:\ts-webpack
|-- node_modules
|   |-- <省略了一部分代码包>
|   `-- typescript
|-- package.json
|-- package-lock.json
`-- tsconfig.json

package.json文件的内容如下：

json 复制代码

{
    "name": "ts-webpack",
    "version": "1.0.0",
    "devDependencies": {
        "typescript": "^3.8.2"
    }
}

tsconfig.json文件的内容如下：

json 复制代码

{
    "compilerOptions": {
        "target": "ES6",
        "strict": true,
        "outDir": "dist"
    }
}

2.1、添加TypeScript文件

为了演示webpack的打包功能，我们新建两个模块文件。在"C:\ts-webpack"目录下创建一个src文件夹并添加index.ts和utils.ts文件。

当前工程的目录结构如下：

复制代码

C:\ts-webpack
|-- node_modules
|   |-- <省略了一部分代码包>
|   `-- typescript
|-- src
|   |-- index.ts
|   `-- utils.ts
|-- package.json
|-- package-lock.json
`-- tsconfig.json

utils.ts文件的内容如下：

ts 复制代码

export function add(x: number, y: number) {
    return x + y;
}

index.ts使用了utils.ts中导出的add函数，index.ts文件的内容如下：

ts 复制代码

import { add } from './utils';

const total = add(1, 2);

console.log(total);

2.2、安装webpack

在"C:\ts-webpack"目录下，运行如下命令来安装webpack及相关工具：

shell 复制代码

npm install --save-dev webpack webpack-cli ts-loader

此时，"C:\ts-webpack"目录的结构如下：

复制代码

C:\ts-webpack
|-- node_modules
|   |-- <省略了一部分代码包>
|   |-- ts-loader
|   |-- typescript
|   |-- webpack
|   `-- webpack-cli
|-- src
|   |-- index.ts
|   `-- utils.ts
|-- package.json
|-- package-lock.json
`-- tsconfig.json

2.3、配置webpack

在默认情况下，webpack会使用"webpack.config.js"作为配置文件。在"C:\ts-webpack"目录下创建一个"webpack.config.js"文件，它的内容如下：

ts 复制代码

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

在该配置文件中，"entry"属性用来配置入口的模块文件，webpack将搜索该模块文件直接或间接依赖的其他模块文件，并将此依赖关系保存在一种称作"依赖图"的数据结构中。

"module.rules"属性用来配置文件加载器，文件加载器定义了如何解析一个文件以及如何打包该文件。webpack从"依赖图"中读取要加载的文件，然后根据文件的类型选择对应的文件加载器。webpack内置了JavaScript文件和JSON文件的加载器，若想要打包其他类型的文件，则必须安装和配置使用的加载器。此例中，我们想要让webpack能够打包TypeScript文件，因此必须安装能够处理TypeScript文件加载器。其中：

"test"属性定义了在哪些文件上使用"ts-loader"文件加载器。此例中，使用正则表达式匹配了以".ts"或".tsx"结尾的文件。
"use"属性定义了文件加载器的名字。此例中，使用的是前面安装的"ts-loader"文件加载器。

"resolve.extensions"属性定义了在文件名相同但文件扩展名不同时选择文件的优先级，第一个数组元素的优先级最高。例如，若同时存在utils.ts和utils.js文件，将优先使用index.ts文件。

"output"属性定义了打包生成的文件名及存放的位置。此例中，将打包生成的"bundle.js"存放在"C:\ts-webpack\dist"目录下。

现在，"C:\ts-webpack"目录的结构如下：

复制代码

C:\ts-webpack
|-- node_modules
|   |-- <省略了一部分代码包>
|   |-- ts-loader
|   |-- typescript
|   |-- webpack
|   `-- webpack-cli
|-- src
|   |-- index.ts
|   `-- utils.ts
|-- package.json
|-- package-lock.json
|-- tsconfig.json
`-- webpack.config.js

2.4、运行webpack

在"C:\ts-webpack"目录下运行webpack命令来打包文件，示例如下：

复制代码

npx webpack

运行webpack命令会在"C:\ts-webpack\dist"目录下生成打包后的文件，示例如下：

复制代码

C:\ts-webpack
|-- dist
|   `-- bundle.js
|-- node_modules
|   |-- <省略了一部分代码包>
|   |-- ts-loader
|   |-- typescript
|   |-- webpack
|   `-- webpack-cli
|-- package.json
|-- package-lock.json
|-- src
|   |-- index.ts
|   `-- utils.ts
|-- tsconfig.json
`-- webpack.config.js

运行打包后的"bundle.js"文件能够输出数字3，因为我们在index.ts中使用了utils.ts提供的add函数来计算并打印"1+2"的值。示例如下：

shell 复制代码

node dist/bundle.js

最后，我们将webpack命令添加为npm脚本。在package.json文件的"scripts"属性中定义一个"bundle"脚本，示例如下：

json 复制代码

{
    "name": "ts-webpack",
    "version": "1.0.0",
    "scripts": {
        "bundle": "webpack"
    },
    "devDependencies": {
        "ts-loader": "^6.2.1",
        "typescript": "^3.8.2",
        "webpack": "^4.41.6",
        "webpack-cli": "^3.3.11"
    }
}

现在可以通过"npm run"命令来运行该脚本，示例如下：

shell 复制代码

npm run bundle