TS练习 贪吃蛇案例

TS练习 贪吃蛇案例

环境配置

使用npm管理包，初始化项目，生成包管理文件package.json

npm init -y

安装打包工具webpack
webpack命令行工具webpack-cli可以通过命令行使用webpack
ts-loader:ts编译器在webpack中使用

cnpm i -D webpack webpack-cli typescript ts-loader # -D 开发依赖

package.json 新增build:"webpack"可以使用build来使用webpack

ts编译文件tsconfig.json

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

webpack配置文件webpack.config.js

创建src/index.ts为入口文件

需求1:将ts转换为js文件

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

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

    // 指定webpack打包时要使用模块
    module: {
   
   
        // 指定要加载的规则
        rules: [
            {
   
   
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件,b不需要被编译
                exclude: /node-modules/
            },
        ]
    },
};

需求2: 配置的目的是将js放入网页html中，html文件由webpack自动创建，html中需要引入哪些资源由webpack根据配置引入

1.需要下载插件html-webpack-plugin,帮助我们自动生成html文件 --> 下载成功package.json中会有记录

cnpm i -D html-webpack-plugin

2.修改webpack,增加如下代码

// 1.引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
//2.配置webpacl插件
module.exports = {
   
   
//.....

    // 配置Webpack插件
    plugins: [
    	//传实例对象，参数是配置项，可以在src下新建index.html作为模板，生成的dist的html会参考设置的模板
        new HTMLWebpackPlugin(),
    ],
}

使用npm run build 打包，打包成功

需求3:当项目修改后，自动重新构建项目，浏览器自动刷新展示最新结果 --> 实时更新修改

webpack的开发服务器webpack-dev-server

cnpm i -D webpack-dev-server

修改package.json

module.exports = {
   
   
//.....
"scripts": {
   
   
//....
    "start": "webpack serve --open" //使用start命令启动webpack服务器用浏览器打开
 }
//使用:npm run start，启动后自动打开服务器
}

**需求4:**默认打包时不会删除旧文件，当文件名一样时新文件会替换旧文件。需要每次编译前，先清空dist文件夹(防止删除了一些不要的文件后旧得dist还存在)，然后再放入新文件

1.需要下载插件clean-webpack-plugin 帮助我们删除dist文件夹

cnpm i -D clean-webpack-plugin

2.修改webpack，增加如下代码

//1.引入clean插件
const {
   
   CleanWebpackPlugin} = require('clean-webpack-plugin');
//2.注册插件
module.exports = {
   
   
//.....
    plugins: [
    	//....
        new CleanWebpackPlugin()//webpack5可以不用这个插件
    ]
}

需求5: 设置哪些文件可以作为模块去引用

修改webpack，增加resolve配置

module.exports = {
   
   
//.....
    // 用来设置引用模块
    resolve: {
   
   
        extensions: ['.ts', '.js']//ts和js结尾的都可以作为模块使用
    }
}

**需求6：**设置less文件的处理

1.安装less依赖

cnpm i -D less less-loader css-loader style-loader postcc postcss-loader postcss-preset-env

2.修改webpack文件

module: {
   
   
     // 指定要加载的规则
     rules: [
    // 设置less文件的处理
         {
   
   
           test: /\.less$/,
           use: [
              "style-loader",
               "css-loader",

               // 引入postcss
               // 类似于babel，把css语法转换兼容旧版浏览器的语法
               {
   
   
               loader: "postcss-loader",
                options: {
   
   
                postcssOptions: {
   
   
                   plugins: [
                          [// 浏览器兼容插件
                                        "postcss-preset-env",
                        {
   
   
                                            // 每个浏览器最新两个版本
                                            browsers: 'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
         ]
}

新建style/index.less 文件编写样式
在index.ts中引入样式文件import './style/index.less'

babel 处理兼容问题

ts编译配置可以使用target指定编译之后的版本，主要是进行语法转换。但是还有很多功能不能仅仅通过语法转化。

babel: 新语法–> 旧语法，支持promise、类等新技术

Babel进行ES6代码转ES5代码时,转换后默认严格模式

1.下载babel
@bable/core:npm核心包
@babel/preset-env:预设不同环境，不同环境有不同转码规则？
xx-loader:与webpack结合的一个工具
core.js: 模拟js运行环境，老版本浏览器用到新技术

cnpm i -D @babel/core @babel/preset-env babel-loader core.js

2.修改webpack，增加加载器，加载器的加载顺序从后往前加载

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