文章目录
贪吃蛇项目
使用typescript的基本是定义类,在类中写代码
gitee-Snake-详解.md
搭建webpack环境
-
用npm全局安装 typescript(前提是安装了nodejs
node -v
查看版本号)- 进入命令行
- 输入:
npm i -g typescript
-
搭建webpack环境
-
初始化项目
进入项目根目录,执行命令
npm init -y
主要作用:创建package.json文件
-
下载构建工具
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin html-webpack-plugin
-
根目录下创建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'] // 表示 以这两个结尾的都可以模块来使用 } };
-
根目录下创建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, // 严格的空值检查 }, }
-
修改package.json添加如下配置
{ ...略... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode development", "start": "webpack serve --open --mode development" }, ...略... }
-
-
运行
npm run build
看是否打包成功
搭建其他配置环境
我们不仅需要typescript的配置环境,还需要css,less预处理器等配置
-
下载依赖
npm i -D less less-loader css-loader style-loader
-
设定规则
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2oLmtbWT-1664174694192)(详解.assets/image-20220924160230465.png)]
loader的执行顺序是 从下往上!!!
-
查看是否配置成功
写一点less样式,然后在index.ts中引入,重新打包查看dist里面的index.html里面是否有样式
但是一些CSS3样式兼容不了旧浏览器,我们需要配置postcss,postcss-loader(加载器),postcss-preset-env(解决兼容性问题)
-
下载依赖
npm i -D postcss postcss-loader postcss-preset-env
-
修改配置文件webpack.config.js
use: [ 'style-loader', 'css-loader', // 引入postcss { loader: "postcss-loader", options: { postcssOptions: { plugins: [ [ "postcss-preset-env", { // 兼容浏览器的信息 browsers: "last 2 versions",// 最新的两个版本 } ] ] } } }, 'less-loader' ]
-
打包
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"