typescript | 贪吃蛇小项目_typescript贪吃蛇项目规划

贪吃蛇项目

使用typescript的基本是定义类，在类中写代码
gitee-Snake-详解.md

搭建webpack环境

1. 用npm全局安装 typescript（前提是安装了nodejs node -v查看版本号）

   • 进入命令行
   • 输入：npm i -g typescript

2. 搭建webpack环境

   1. 初始化项目

      进入项目根目录，执行命令 npm init -y

      主要作用：创建package.json文件

   2. 下载构建工具
      npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin html-webpack-plugin

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

      // webpack的配置信息
      
      // 1. 引入一个包
      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打包时要使用的模块
          module: {
             
              // 指定要加载的规则
              rules: [
                  {
             
                      // 指定规则生效的文件
                      test: /\.ts$/, // 匹配所有以ts结尾的文件
                      // 要使用的loader
                      use: 'ts-loader',
                      // 要排除的文件
                      exclude: /node_modules/,
                  },
              ]
          },
      
          // 配置webpack的插件
          plugins: [
              new HTMLWebpackPlugin({
             
                  // title: "这是一个自定义的title",
                  template: "./src/index.html", // 表示生成的网页根据这个模板生成的
              }), // 自动生成html文件
              new CleanWebpackPlugin(),
          ],
      
          // 用来设置引用模块
          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

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

      //  tsconfig.json
      {
             
          // tsconfig.json 是ts编译器的配置文件，ts编译器可以根据她的信息来对代码进行编译
          /* include 用来指定哪些ts文件需要被编译
                路径：**表示任意目录
                      * 表示任意文件
           */
          "include": [
              "./src/**/*"
          ],
          /*
              exclude 表示不需要被编译的文件目录
           */
          // "exclude": [
          //     "./src/hello/**/*" // hello 下的文件都不会被编译
          // ],
          /* 
              complierOptions 编译器的选项
           */
          "compilerOptions": {
             
              "target": "ES6", // 用来指定 ts被编译为js的版本
              "module": "CommonJS", // 指定要使用的模块化的规范
              "lib": ["DOM","ES2015"], // 指定项目中要使用的库
              "outDir": "./dist", // 用来指定编译后文件所在的目录
              // "outFile": "", // 将代码合并为一个文件（所有的全局作用域的代码合并到一个文件中）
              "allowJs": false, // 是否对js文件进行编译，默认是false
              "checkJs": false, // 是否检查js代码是否符合语法规范
              "removeComments": false, // 是否移除注释，默认是false
              "noEmit": false, // 不生成编译后的文件
              "noEmitOnError": true, // 当有错误时不生成编译后的文件
              "sourceMap": false, 
              "strict": true, // 所有严格检查的总开关
              "alwaysStrict": true, // 用来设置编译后的文件是否使用严格模式，默认false
              "noImplicitAny": false, // 是否禁止隐式的any类型
              "noImplicitThis": false, // 是否不允许类型不明确的this
              "strictNullChecks": false, // 严格的空值检查
          },
      }
      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

   5. 修改package.json添加如下配置

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

3. 运行 npm run build看是否打包成功

搭建其他配置环境

我们不仅需要typescript的配置环境，还需要css，less预处理器等配置

1. 下载依赖

   npm i -D less less-loader css-loader style-loader

2. 设定规则

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2oLmtbWT-1664174694192)(详解.assets/image-20220924160230465.png)]

   loader的执行顺序是 从下往上！！！

3. 查看是否配置成功

写一点less样式，然后在index.ts中引入，重新打包查看dist里面的index.html里面是否有样式

但是一些CSS3样式兼容不了旧浏览器，我们需要配置postcss，postcss-loader（加载器），postcss-preset-env（解决兼容性问题）

1. 下载依赖

   npm i -D postcss postcss-loader postcss-preset-env

2. 修改配置文件webpack.config.js

                   use: [
                       'style-loader',
                       'css-loader',
                       // 引入postcss
                       {
        
                           loader: "postcss-loader",
                           options: {
        
                               postcssOptions: {
        
                                   plugins: [
                                       [
                                           "postcss-preset-env",
                                           {
        
                                               // 兼容浏览器的信息
                                               browsers: "last 2 versions",// 最新的两个版本
                                           }
                                       ]
                                   ]
                               }
                           }
                       },
                       'less-loader'
                   ]
   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

3. 打包npm run build

配置环境的全部代码

tsconfig.json

//  tsconfig.json
{
   
    // tsconfig.json 是ts编译器的配置文件，ts编译器可以根据她的信息来对代码进行编译
    /* include 用来指定哪些ts文件需要被编译
          路径：**表示任意目录
                * 表示任意文件
     */
    "include": [
        "./src/**/*"
    ],
    /*
        exclude 表示不需要被编译的文件目录
     */
    // "exclude": [
    //     "./src/hello/**/*" // hello 下的文件都不会被编译
    // ],
    /* 
        complierOptions 编译器的选项
     */
    "compilerOptions": {
   
        "target": "ES6", // 用来指定 ts被编译为js的版本
        "module": "CommonJS", // 指定要使用的模块化的规范
        "lib": ["DOM","ES2015"], // 指定项目中要使用的库
        "outDir": "./dist", // 用来指定编译后文件所在的目录
        // "outFile": "", // 将代码合并为一个文件（所有的全局作用域的代码合并到一个文件中）
        "allowJs": false, // 是否对js文件进行编译，默认是false
        "checkJs": false, // 是否检查js代码是否符合语法规范
        "removeComments": false, // 是否移除注释，默认是false
        "noEmit": false, // 不生成编译后的文件<
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