TypeScript - 文件打包

Webpack 整合
Webpack 常用插件
Babel

# Webpack 整合

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包。

TS 同样也可以结合构建工具一起使用，下边以 Webpack 为例介绍一下如何结合构建工具使用 TS。

步骤如下：

# 初始化项目

进入项目根目录，执行命令 npm init -y，创建 package.json 文件。

# 下载构建工具

命令如下：

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 中的清除插件，每次构建都会先清除目录

# 配置 webpack

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

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

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$/,
               use: {
                   loader: "ts-loader"     
               },
               exclude: /node_modules/
           }
       ]
   },

   plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
           title:'TS测试'
       }),
   ]
}

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

# 配置 TS 编译选项

根目录下创建 tsconfig.json，配置可以根据自己需要

{
   "compilerOptions": {
       "target": "ES2015",
       "module": "ES2015",
       "strict": true
   }
}

1
2
3
4
5
6
7

# 修改 package.json 配置

修改 package.json 添加如下配置

{
   // ...
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack",
       "start": "webpack serve --open chrome.exe"
   },
   // ...
}

1
2
3
4
5
6
7
8
9

# 项目使用

在 src 下创建 ts 文件，并在并命令行执行 npm run build 对代码进行编译。

或者执行 npm start 来启动开发服务器。

# Webpack 常用插件

# html-webpack-plugin

html 插件能帮助我们在打包时自动地生成 html 文件，在上面的基础上进行配置该插件：

// 引入一个包
const path = require('path');
// 引入 html 插件
const HTMLWebpackPlugin = require('html-webpack-plugin');

// Webpack 中所有的配置信息都应该写在 module.exports 中
module.exports = {

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

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的名字
        filename: "bundle.js",
        //告诉 Webpack 不使用箭头函数
        environment: {
            arrowFunction: false
        }

    },
    // 指定 Webpack 打包时要使用的模块
    module: {
        // 指定要 loader 加载的规则
        rules: [
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/,//以 ts 结尾的文件
                // 要使用的 loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },
    
    //配置 Webpack 插件
    plugins: [
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"、
            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

该插件能自动响应浏览器更新。

安装：

npm i -D webpack-dev-server

在 package.json 中加上 start 命令：

"start": "webpack serve --open chrome.exe"

这样，就能在开发时实现热部署了。

# clean-webpack-plugin

clean 插件能在 build 前清空 dist 目录所有文件，避免旧文件的遗留。

安装：

npm i -D clean-webpack-plugin

使用

// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
//引入 clean 插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// Webpack 中所有的配置信息都应该写在 module.exports 中
module.exports = {

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

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的名字
        filename: "bundle.js",
        // 告诉 Webpack 不使用箭头函数
        environment: {
            arrowFunction: false
        }

    },
    // 指定 Webpack 打包时要使用的模块
    module: {
        // 指定要 loader 加载的规则
        rules: [
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/, // 以 ts 结尾的文件
                // 要使用的 loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },
    
    // 配置 Webpack 插件
    plugins: [
    	new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"、
            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

除了 Webpack，开发中还经常需要结合 babel 来对代码进行转换；

以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将 babel 引入到项目中。

虽然 TS 在编译时也支持代码转换，但是只支持简单的代码转换；

对于例如：Promise 等 ES6 特性，TS 无法直接转换，这时还要用到 babel 来做转换。

安装依赖包：

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 语法

修改 webpack.config.js 配置文件

...
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/
    }
  ]
}
// ...

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

如此一来，使用 ts 编译后的文件将会再次被 babel 处理。使得代码可以在大部分浏览器中直接使用。同时可以在配置选项的 targets 中指定要兼容的浏览器版本。

这样，Webpack 的基本配置就完成了，也是项目开发中常用的配置。下面是整合后的 最终配置文件，开发时可以根据这个来做修改。

// 指定 Webpack 打包时要使用的模块
module: {
  // 指定要 loader 加载的规则
  rules: [
    {
      // test 指定的是规则生效的文件
      test: /\.ts$/, // 以 ts 结尾的文件
      // 要使用的 loader
      use: [
        // 配置 babel
        {
          // 指定加载器
          loader: "babel-loader",
          // 设置 babel
          options: {
            // 设置预定义的环境
            presets: [
              [
                // 指定环境的插件
                "@babel/preset-env",
                // 配置信息
                {
                  // 要兼容的目标浏览器及版本
                  targets: {
                    "chrome": "58",
                    "ie": "11"
                  },
                  // 指定 corejs 的版本（根据 package.json 中的版本，只写整数）
                  "corejs": "3",
                  // 使用 corejs 的方式 "usage" 表示按需加载
                  "useBuiltIns": "usage" 
                }

              ]
            ]
          }
        },
        // 'babel-loader', // 简化版的配置
        'ts-loader'
      ],
      // 要排除的文件
      exclude: /node-modules/
    }
  ]
},

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

编辑此页

#TypeScript

更新时间: 2023/09/18, 16:34:13

← TypeScript - 编译和配置 TypeScript - 接口→