三、webpack打包TS项目

一、webpack

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

1、初始化项目

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

2、下载构建工具

npm i -D webpack webpack-cli typescript ts-loader

• webpack：构建工具webpack
• webpack-cli：webpack的命令行工具
• typescript：ts编译器
• ts-loader：ts加载器，用于在webpack中编译ts文件

3、配置webpack

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

// 引入一个路径包
const path = require("path")

// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
 // 指定入口文件
 entry: "./src/index.ts",

 // 指定打包文件的目录
 output: {
   // path: './dist',
   path: path.resolve(__dirname, "dist"),
   // 打包后文件名称
   filename: "bundle.js",
 },

 // 用来设置引用模块，可以将这些文件识别为模块(webpack配置.ts .js结尾的文件可为引用模块，相互export import)
 resolve: {
   extensions: ['.ts', '.js']
 },

 // 指定webpack打包时要使用的模块
 module: {
   // 指定loader加载的规则
   rules: [
     {
       // test指定规则生效的文件
       test: /\.ts$/,
       // 要使用的loader简写版
       use: '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

4、配置TS编译选项

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

{
   "compilerOptions": {
       "target": "ES2015",
       "module": "ES2015",
       "strict": true
   }
}
1
2
3
4
5
6
7

5、修改package.json配置

修改package.json添加如下配置

{
   ...
   "scripts": {
       "test": "echo \"Error: no useTools specified\" && exit 1",
       "build": "webpack",
   },
   ...
}
1
2
3
4
5
6
7
8

6、项目使用

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

7、配置扩展

npm i -D html-webpack-plugin clean-webpack-plugin

• html-webpack-plugin：webpack中html插件，用来打包后自动创建html文件
• clean-webpack-plugin：webpack中的清除插件，每次打包dist都会先清除目录

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

module.exports = {
   ...
   module: {
   ...
   },

   plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
           // 自定义生成html的title信息
           title:'TS测试',
           // 指定html生成模板
           // template: './src/index.html'
       }),
   ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

将服务器与项目相关联，当项目中内容修改时，服务器自动的重新构建，浏览器重新刷新结果

• npm i -D webpack-dev-server
• webpack-dev-server：webpack的开发服务器

修改package.json添加如下配置

{
   ...
   "scripts": {
       "test": "echo \"Error: no useTools specified\" && exit 1",
       "build": "webpack",
       "start": "webpack serve --open --mode production"
   },
   ...
}
1
2
3
4
5
6
7
8
9

执行npm start来启动开发服务器 ，此时修改项目中文件，项目实时更新

二、Babel

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

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

虽然TS的target在编译时也支持代码转换，但是只支持简单的代码转换；
对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换；

babel作用
1、支持新语法转换旧语法
2、新技术转换成旧浏览器中所支持的技术（如promise）

ts仅支持作用1，故我们开发时需结合babel打包工具扩展webpack功能

安装依赖包：

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

• @babel/core：babel的核心工具
• @babel/preset-env：babel的预定义环境
• @babel-loader：babel在webpack中的加载器
• core-js：模拟js运行环境代码，使老版本的浏览器支持新版ES语法

修改webpack.config.js配置文件

...
module: {
    rules: [
        {
          // loader 是从后向前执行的，先ts-loader将ts解析成js后，再执行babel-loader进行代码转换
            test: /\.ts$/,
            use: [
                // 配置babel
                {
                    // 指定加载器
                    loader: "babel-loader",
                    // 设置babel
                    options:{
                        // 设置预定义的环境
                        presets: [
                            [
                                // 指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器及版本
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    // 使用corejs的方式 "usage"  表示按需加载
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                '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

如此一来，使用ts编译后的文件将会再次被babel处理；

使得代码可以在大部分浏览器中直接使用；

同时可以在配置选项的targets中指定要兼容的浏览器版本；

三、webpack.config.js完整代码

// 引入一个路径包
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
  // 指定入口文件
  entry: "./src/index.ts",

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

  // 指定webpack打包时要使用的模块
  module: {
    // 指定loader加载的规则
    rules: [
      {
        // test指定规则生效的文件
        test: /\.ts$/,
        // 要使用的loader简写版
        // use: 'ts-loader',
        use: [
          // 配置babel
          {
            // 指定加载器
            loader: "babel-loader",
            // 设置babel
            options:{
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的目标浏览器及版本
                    "targets":{
                      "chrome": "58",
                      "ie": "11"
                    },
                    // 指定corejs的版本
                    "corejs":"3",
                    // 使用corejs的方式 "usage"  表示按需加载
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          },
          'ts-loader'
        ],
        // 排除的文件
        exclude: /node-modules/
      }
    ]
  },

  // 配置Webpack 插件
  // html-webpack-plugin：webpack中html插件，用来打包后自动创建html文件
  // clean-webpack-plugin：webpack中的清除插件，每次打包dist都会先清除目录
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 自定义生成html的title信息
      title:'TS测试',
      // 指定html生成模板
      // template: './src/index.html'
    }),
  ],

  // 用来设置引用模块，可以将这些文件识别为模块(webpack配置.ts .js结尾的文件可为引用模块，相互export import)
  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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85