程序员scholar
  • JS 超集语言 - TypeScript
  • TypeScript
scholar
2023-09-08
目录

TypeScript - 文件打包

# 1. Webpack 整合

在实际开发中，我们通常需要使用构建工具对代码进行打包。TypeScript 可以与构建工具一起使用，这里以 Webpack 为例，介绍如何将 TypeScript 与 Webpack 整合。

# 初始化项目

首先，在项目的根目录中，执行以下命令来初始化项目并创建 package.json 文件：

npm init -y
1

# 下载构建工具

接下来，安装构建工具和所需的依赖包：

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

安装了以下包：

  • webpack：构建工具。
  • webpack-cli：webpack 的命令行工具。
  • webpack-dev-server：webpack 的开发服务器。
  • typescript：TypeScript 编译器。
  • ts-loader：TypeScript 加载器，用于在 webpack 中编译 .ts 文件。
  • html-webpack-plugin：用于自动创建 HTML 文件的 webpack 插件。
  • clean-webpack-plugin：用于在构建时清理输出目录的插件。

# 配置 webpack

在项目根目录下创建 webpack.config.js 文件，配置 Webpack：

// 引入 Node.js 路径模块
const path = require("path");
// 引入 HtmlWebpackPlugin 插件，用于生成 HTML 文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入 CleanWebpackPlugin 插件，用于清理输出目录
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// 导出 Webpack 配置对象
module.exports = {
    // 优化配置
    optimization: {
        minimize: false // 关闭代码压缩（可选）
    },

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

    // 开发工具配置
    devtool: "inline-source-map",

    // 开发服务器配置
    devServer: {
        contentBase: './dist' // 指定开发服务器的内容目录
    },

    // 输出配置
    output: {
        path: path.resolve(__dirname, "dist"), // 输出目录
        filename: "bundle.js", // 输出文件名
        environment: {
            arrowFunction: false // 关闭 Webpack 生成的箭头函数（可选）
        }
    },

    // 模块解析配置
    resolve: {
        extensions: [".ts", ".js"] // 支持解析的文件扩展名
    },

    // 模块配置
    module: {
        rules: [
            {
                test: /\.ts$/, // 匹配 .ts 文件
                use: {
                    loader: "ts-loader" // 使用 ts-loader 处理 .ts 文件
                },
                exclude: /node_modules/ // 排除 node_modules 目录
            }
        ]
    },

    // 插件配置
    plugins: [
        new CleanWebpackPlugin(), // 清理输出目录
        new HtmlWebpackPlugin({
            title: 'TS测试' // 生成的 HTML 文件标题
        }),
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# 配置 TypeScript 编译选项

在项目根目录下创建 tsconfig.json 文件，根据需要配置 TypeScript 编译选项：

{
    "compilerOptions": {
        "target": "ES2015",  // 将 TypeScript 编译为 ES2015 版本的 JavaScript
        "module": "ES2015",  // 使用 ES2015 的模块系统
        "strict": true       // 启用所有的严格类型检查选项
    }
}
1
2
3
4
5
6
7

# 修改 package.json 配置

在 package.json 中添加以下脚本，以便使用 Webpack 构建和启动开发服务器：

{
    // ...
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",  // 使用 Webpack 构建项目
        "start": "webpack serve --open chrome.exe" // 启动开发服务器并在 Chrome 中打开
    },
    // ...
}
1
2
3
4
5
6
7
8
9

# 项目使用

  1. 在 src 目录下创建 TypeScript 文件（例如 index.ts），编写你的 TypeScript 代码。
  2. 使用以下命令编译代码：
npm run build
1
  1. 或者使用以下命令启动开发服务器：
npm start
1

通过以上步骤，你就可以使用 Webpack 对 TypeScript 项目进行构建和开发。通过 Webpack 的配置，可以根据需要自定义打包行为，使用插件进行优化和增强功能。

# 2. Webpack 常用插件

在使用 Webpack 进行项目开发时，可以借助插件来增强功能和优化开发体验。以下是一些常用的 Webpack 插件及其详细使用方法。

# html-webpack-plugin

  • 作用：html-webpack-plugin 插件用于在打包时自动生成 HTML 文件，并将打包生成的 JavaScript 文件自动注入到 HTML 中。
  • 安装：
npm i -D html-webpack-plugin
1
  • 配置：

在 webpack.config.js 中进行配置：

// 引入 Node.js 路径模块
const path = require('path');
// 引入 html-webpack-plugin 插件
const HTMLWebpackPlugin = require('html-webpack-plugin');

// Webpack 配置对象
module.exports = {

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

    // 输出配置
    output: {
        // 输出目录
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名
        filename: "bundle.js",
        // 不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },

    // 模块配置
    module: {
        // loader 规则
        rules: [
            {
                // 规则生效文件
                test: /\.ts$/, // 匹配 .ts 文件
                // 使用的 loader
                use: 'ts-loader',
                // 排除的目录
                exclude: /node-modules/
            }
        ]
    },

    // 插件配置
    plugins: [
        new HTMLWebpackPlugin({
            // 使用模板文件
            template: "./src/index.html" 
        }),
    ],

    // 解析模块配置
    resolve: {
        // 识别的模块扩展名
        extensions: ['.ts', '.js']
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# webpack-dev-server

  • 作用：webpack-dev-server 用于提供开发服务器功能，支持自动刷新浏览器，实现热更新，提升开发效率。
  • 安装：
npm i -D webpack-dev-server
1
  • 配置：

在 package.json 中添加启动命令：

"scripts": {
    "start": "webpack serve --open chrome.exe"
}
1
2
3

这样，运行 npm start 命令即可启动开发服务器并在 Chrome 浏览器中打开页面，实现热部署。

# clean-webpack-plugin

  • 作用：clean-webpack-plugin 用于在每次构建前清空输出目录，避免旧文件残留，保持目录整洁。
  • 安装：
npm i -D clean-webpack-plugin
1
  • 配置：

在 webpack.config.js 中配置插件：

// 引入 Node.js 路径模块
const path = require('path');
// 引入 html-webpack-plugin 插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入 clean-webpack-plugin 插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// Webpack 配置对象
module.exports = {

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

    // 输出配置
    output: {
        // 输出目录
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名
        filename: "bundle.js",
        // 不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },

    // 模块配置
    module: {
        // loader 规则
        rules: [
            {
                // 规则生效文件
                test: /\.ts$/, // 匹配 .ts 文件
                // 使用的 loader
                use: 'ts-loader',
                // 排除的目录
                exclude: /node-modules/
            }
        ]
    },

    // 插件配置
    plugins: [
        new CleanWebpackPlugin(),  // 清理输出目录
        new HTMLWebpackPlugin({
            // 使用模板文件
            template: "./src/index.html" 
        }),
    ],

    // 解析模块配置
    resolve: {
        // 识别的模块扩展名
        extensions: ['.ts', '.js']
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

通过这些插件，Webpack 可以更好地满足开发和生产环境的不同需求，提升构建和开发效率。插件的合理使用能够简化开发流程，优化打包输出，为项目开发提供更好的支持。

# 3. Babel

在现代前端开发中，为了确保代码能够在更多的浏览器中兼容运行，通常需要结合 Babel 来进行代码转换。虽然 TypeScript 编译器也支持一些代码转换，但它主要专注于类型检查，而 Babel 可以更好地处理 ES6+ 特性，比如 Promise、async/await 等。因此，将 Babel 引入项目可以增强代码的兼容性。

# 安装 Babel 相关依赖

首先，安装 Babel 及其相关工具：

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

共安装了以下 4 个包：

  • @babel/core：Babel 的核心工具，负责代码转换。
  • @babel/preset-env：Babel 的预设环境，自动根据目标环境配置插件。
  • babel-loader：Babel 在 Webpack 中的加载器，用于将 TypeScript 编译后的代码通过 Babel 进一步处理。
  • core-js：用于提供 Polyfill，使老版本的浏览器支持新版的 ES 语法。

# 配置 Webpack 使用 Babel

在 webpack.config.js 文件中，修改配置以集成 Babel：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        environment: {
            arrowFunction: false
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,  // 匹配 .ts 文件
                use: [
                    {
                        loader: "babel-loader",  // 使用 babel-loader
                        options: {
                            presets: [
                                [
                                    "@babel/preset-env",  // 使用 preset-env 预设
                                    {
                                        targets: {  // 指定要兼容的浏览器版本
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        "corejs": "3",  // 使用 core-js 的版本
                                        "useBuiltIns": "usage"  // 按需加载 polyfill
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        loader: "ts-loader",  // 使用 ts-loader 处理 .ts 文件
                    }
                ],
                exclude: /node_modules/  // 排除 node_modules 目录
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template: "./src/index.html"
        }),
    ],
    resolve: {
        extensions: ['.ts', '.js']
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# Babel 配置解析

  • babel-loader：用于将 TypeScript 编译后的 JavaScript 代码通过 Babel 进行处理，确保高级语法和特性兼容旧版浏览器。
  • @babel/preset-env：根据配置的目标环境，自动确定需要使用的 Babel 插件，将现代 JavaScript 转换为目标浏览器支持的版本。
  • targets：指定要兼容的浏览器及其版本，确保转换后的代码可以在这些环境中正常运行。
  • corejs：指定 core-js 的版本，用于提供必要的 polyfill 支持。
  • useBuiltIns: "usage"：按需加载 polyfill，只有在代码中用到的 ES 特性才会被引入，从而减少打包后的体积。

通过上述步骤，使用 TypeScript 编译后的代码将会再次被 Babel 处理，使得代码能够在更多的浏览器中直接运行。开发过程中可以根据项目需求在 targets 中指定要兼容的浏览器版本，从而实现更好的跨平台兼容性。

# 最终 Webpack 配置

以下是整合后的 Webpack 最终配置文件，开发中可以根据此文件进行修改：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        environment: {
            arrowFunction: false
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,  // 匹配 .ts 文件
                use: [
                    {
                        loader: "babel-loader",  // 使用 babel-loader
                        options: {
                            presets: [
                                [
                                    "@babel/preset-env",  // 使用 preset-env 预设
                                    {
                                        targets: {  // 指定要兼容的浏览器版本
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        "corejs": "3",  // 使用 core-js 的版本
                                        "useBuiltIns": "usage"  // 按需加载 polyfill
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'  // 使用 ts-loader 处理 .ts 文件
                ],
                exclude: /node_modules/  // 排除 node_modules 目录
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template: "./src/index.html"
        }),
    ],
    resolve: {
        extensions: ['.ts', '.js']
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

通过这个配置，Webpack 将会把 TypeScript 和 Babel 无缝集成到项目中，实现代码的编译、转换和打包，为项目的开发和生产环境提供良好的支持。

编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
TypeScript - 编译和配置
TypeScript - 接口

← TypeScript - 接口→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar