空白诗007

这个屌丝很懒，什么也没留下！

热门标签

用TypeScript写贪吃蛇（1）：开发环境搭建_tsconfig 指定类型文件入口

作者：空白诗007 | 2024-08-19 14:05:36

踩

tsconfig 指定类型文件入口

0. 参考资料

尚硅谷2021版TypeScript教程: https://www.bilibili.com/video/BV1Xy4y1v7S2?p=22

TypeScript官方文档：https://www.tslang.cn/docs/home.html

webpack官方文档：https://webpack.docschina.org/concepts/

Babel官方文档：https://www.babeljs.cn/docs/

**最终项目效果：**实现基本的贪吃蛇逻辑。

1. 配置前端配置文件

前端文件package.json和webpack.config.js是必须，加上TypeScript的配置文件tsconfig.json，进行代码检测和编译风格设置。下面的配置文件对于开发贪吃蛇已经够了，直接复制粘贴即可。

1.1 package.json

package用于记录本前端项目所需的依赖。当然，安装nodejs是必须。

script中记录了后面常用的两个命令：npm run build和npm run start。

其中，npm run build用于最终webpack的打包，npm run start可以在源代码编写保存的时候立马重新编译和刷新，方便实时地在浏览器上查看项目效果。

同时可以看见，本文使用了less来编写HTML样式。less语法简单，详情见官方文档 https://less.bootcss.com/。

{
  "name": "snake",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.12.7",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "core-js": "^3.8.0",
    "css-loader": "^5.2.7",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.13.1",
    "less-loader": "^7.3.0",
    "postcss": "^8.3.5",
    "postcss-loader": "^4.3.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

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

1.2 tsconfig.json

因为本项目的编译的工作交给了webpack执行，因此ts的配置文件只有配置了严格模式，并且代码错误的时候不会进行编译。

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

1.3 webpack.config.js

以下是webpack的最终配置，配置特别长，有需要的话需要看官方文档。但是以下配置的注释也写的挺全了。从下面代码可以读到一些基本信息，打包的入口文件为src文件夹里的index.ts，所有的TypeScript和Less文件编译打包后产出的js文件的文件名为bundle.js，兼容的最低版本为IE11，模板HTML文件为src文件夹里的index.html，打包后的文件放在dist文件夹中。

// 引入一个包
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,
            const: false,
        },
    },

    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.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/,
            },

            // 设置less文件的处理
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",

                    // 引入postcss
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers: "last 2 versions",
                                        },
                                    ],
                                ],
                            },
                        },
                    },
                    "less-loader",
                ],
            },
        ],
    },

    // 配置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
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

2. 下载相关依赖

在项目根文件夹输入以下命令。

npm i
1

npm会根据package.json文件中记录的依赖进行下载。

下载完会会生成"node_modules"文件夹，里面包含了本文项目所需要的所有依赖文件。

如果有权限问题导致无法下载，执行以下指令放开权限。

sudo chown -R $USER ./
1

3. 测试开发环境安装情况

写一些简单代码测试一下开发环境是否管用。

3.1 编写入口ts文件index.ts

在src文件夹中创建index.ts。代码如下：

console.log(123);
1

3.2 创建模板HTML文件index.html

写完后，在src文件夹中创建一个index.html，书写最最基本的结构即可，不需要任何的js和css文件引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

3.3 webpack打包项目

使用webpack进行打包。在项目根目录运行命令：

npm build run
1

webpack打包没有报错的话，便可生成以下项目结构：

在这里插入图片描述

同时，查看浏览器控制台，如果输出了123，就表明环境搭建成功。

注意：

测试运行情况前，需要创建一个index.html，否则会报错，报错日志如下：

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
1

报错原因：

因为配置了一个html-webpack-plugin插件，而插件找不到该文件从而报错。所以需要在src文件夹中创建一个index.html。

// 配置Webpack插件
plugins: [
  new CleanWebpackPlugin(),
  new HTMLWebpackPlugin({
    // title: "这是一个自定义的title"
    template: "./src/index.html"
  }),
],
1
2
3
4
5
6
7
8

4. 编写less文件

4.1 相关依赖引入

css文件过于松散，所以本项目使用less语言编写后编译成css。本项目和less相关的依赖如下：

less less-loader css-loader style-loader
1

less:语言编译器；
less-loader: less与webpack整合；
css-loader：处理css代码；
style-loader：把css文件引入到项目中。

在webpack配置文件中与less有关的配置代码

// 设置less文件的处理
{
  test: /\.less$/,
  use:[
    // loader执行顺序：从下到上执行
    "style-loader",
    "css-loader",
    "less-loader"
  ]
}
1
2
3
4
5
6
7
8
9
10

4.2 测试

src文件夹里创建style文件夹，并在其中创建index.less文件，作为样式文件主入口。

less测试代码如下：

body {
    background-color: green;
}
1
2
3

同时在index.ts文件中引入样式文件：

// 引入样式
import "./style/index.less";

console.log(123);
1
2
3
4

再次使用npm run build命令进行打包，并打开dist文件夹中的HTML文件查看测试结果。如果HTML背景色为绿色，则less开发环境配置成功。

dist文件夹中并没有css文件，为何背景色还能改变呢？原因在于样式在bundle.js中实现了。

4.3 解决css兼容性问题

在有些版本的浏览器中并不兼容一些css语句，因此为了兼容，需要添加插件postcss以及相关依赖，以匹配不同浏览器的相应标准。