ts项目构建

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

步骤：

初始化项目

进入项目根目录，执行命令 npm init -y
主要作用：创建package.json文件
下载构建工具

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin html-webpack-plugin @babel/core @babel/preset-env babel-loader core-js

webpack
构建工具webpack
webpack-cli
webpack的命令行工具
webpack-dev-server
webpack的开发服务器：

能够实时更新页面 下载后需要在package.json 中配置 “start”: “webpack serve --open” open后可以加浏览器，不加就为默认浏览器，配置完成后就可以使用 npm start 启动项目

typescript
ts编译器
ts-loader
ts加载器，用于在webpack中编译ts文件
html-webpack-plugin
webpack中html插件，用来自动创建html文件
clean-webpack-plugin
webpack中的清除插件，每次构建都会先清除目录

解决兼容问题的包:

@babel/core:

babel核心库

@babel/preset-env:

预置环境

babel-loader:

babel与webpack结合的工具

core-js:

模拟js的运行环境

根目录下创建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",//关键1

output: {
   //关键2
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    environment: {
   
        arrowFunction: false // 关闭webpack的箭头函数，可选
    }
},

 mode 设置生产环境 默认为production 而mode的选择项有production 和 development。
"mode":'devolpment',//关键3

// 用来设置 可以被引用的模块
resolve: {
   
    extensions: [".ts", ".js"]
},

module: {
   //关键4
    rules: [
        {
   
            test: /\.ts$/,
            //先执行的放在下面
            use: [ 
                 //指定加载器
                 {
   
                   //配置babel
                   loader:"babel-loader",
                   options:{
   
                     //设置预定义的环境
                     presets:[
                       [
                         //指定环境的插件
                         "@babel/preset-env",
                         // 配置信息
                         {
   
                           // 指定兼容的浏览器版本
                           targets:{
   
                             "chrome":"88",
                             "ie":"11"
                           },
                           //指定corejs的版本 将代码中的新语法等 兼容浏览器没有的语法 用别的方法实现
                           "corejs":"3",
                           // 使用corejs的方式 "usage" 表示按需加载
                           "useBuiltIns":"usage"
                         }
                         ]
                       ]
                   }
                 }
                 ,"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
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

HtmlWebpackPlugin插件

HtmlWebpackPlugin插件作用
1：为html文件引入外部资源，如css,js，动态添加每次compile后的hash,防止引用缓存的外部文件问题
2：可以生成创建html入口文件，比如单页面可以生成一个html入口文件，那要是多个页面就配置多个html-webpack-plugin可以生成多个页面入口

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
   
  //插件
	plugins: [
		//new webpack.optimize.UglifyJsPlugin(),
		new HtmlWebpackPlugin({
   
			//文件title标签标题
			title:"test",
			//输出的文件名称
			filename:"test.html",
			
1
2
3
4
5
6
7
8
9
10
11
12
13