webpack + typescript 开发微信小游戏实践

article/2025/8/26 16:40:06

源码地址

微信小游戏版本技术选型使用typescript开发

但是微信小游戏原生不支持 typescript 开发，于是探索一下使用ts开发微信小游戏

1. 创建小游戏

使用测试号，创建一个使用官方示例的小游戏

会生成一个可以直接运行的打飞机小游戏

2. 准备工作

2.1 安装依赖

首先 npm init一下，生成package.json

在 package.json 写入如下 devDeoendencies, npm install一下

"devDependencies": {"@babel/core": "^7.6.4","@babel/plugin-proposal-object-rest-spread": "^7.6.2","@babel/plugin-syntax-dynamic-import": "^7.2.0","@babel/preset-env": "^7.6.3","@commitlint/cli": "^8.2.0","@commitlint/config-conventional": "^8.2.0","@typescript-eslint/eslint-plugin": "^4.26.1","@typescript-eslint/parser": "^4.26.1","babel-eslint": "^10.0.3","babel-loader": "^8.0.6","babel-plugin-transform-object-rest-spread": "^6.26.0","eslint": "^7.28.0","eslint-config-standard": "^14.1.0","eslint-loader": "^3.0.2","eslint-plugin-import": "^2.18.2","eslint-plugin-node": "^10.0.0","eslint-plugin-promise": "^4.2.1","husky": "^3.0.9","lint-staged": "^9.4.2","progress-bar-webpack-plugin": "^2.1.0","ts-loader": "^6.2.1","typescript": "^3.7.4","webpack": "^4.41.2","webpack-cli": "^3.3.9","webpack-dev-server": "^3.8.2"
},

2.2 增加webpack配置

新建 webpack-config 目录，新建dev和prod配置文件

在这里插入图片描述

内容分别如下：

dev.js: dev 环境devtool使用 cheap-source-map ，因为微信小游戏环境不支持eval

const path = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');module.exports = {watch: true,devtool: 'cheap-source-map',mode: 'development',entry: path.resolve('./', 'src/index.ts'),output: {path: path.resolve('./', 'dist'),filename: 'main.min.js',library: 'WXMiniGameTs',libraryTarget: 'umd',libraryExport: 'default',globalObject: 'this',},externals: {},module: {rules: [{test: /(.ts)$/,use: {loader: 'ts-loader'}}, {test: /(.js)$/,use: [{loader: 'babel-loader',}]}, {test: /(.js)$/,loader: 'eslint-loader',enforce: 'pre',exclude: /node_modules/,options: {configFile: './.eslintrc.js'}}]},plugins: [new ProgressBarPlugin(),],resolve: {extensions: [ '.tsx', '.ts', '.js' ],},
};

prod.js

const path = require('path');
const webpack = require('webpack');module.exports = {mode: 'production',entry: path.resolve('./', 'src/index.ts'),output: {path: path.resolve('./', 'dist'),filename: 'main.min.js',library: 'WXMiniGameTs',libraryTarget: 'umd',libraryExport: 'default',globalObject: 'this',},externals: {},module: {rules: [{test: /(.ts)$/,use: {loader: 'ts-loader'}}, {test: /(.js)$/,use: [{loader: 'babel-loader',}]}]},resolve: {extensions: [ '.tsx', '.ts', '.js' ],},
};

package.js script 添加:

"dev": "webpack --config webpack-config/dev.js",
"build": "webpack --config webpack-config/prod.js",

2.3 增加 tsconfig

根目录新建 tsconfig.json:

{"compilerOptions": {"baseUrl": ".","outDir": "dist","sourceMap": false,"target": "es5","module": "esnext","moduleResolution": "node","allowJs": true,"noUnusedLocals": true,"strictNullChecks": true,"noImplicitAny": true,"noImplicitThis": true,"experimentalDecorators": true,"resolveJsonModule": true,"esModuleInterop": true,"removeComments": false,"jsx": "preserve","lib": ["esnext", "dom"],"rootDir": ".","noEmit": false,"paths": {}},"include": ["src/**/*","game.js"],"exclude": ["./node_modules",]
}

2.4 eslint 支持

需要vscode 安装 eslint插件

根目录新增 .eslintrc.js

module.exports = {parser: '@typescript-eslint/parser',plugins: ['@typescript-eslint'],"globals": {"window": true,"console": true,"module": true,"require": true,"Promise": true},"env": {"browser": true,},"parserOptions": {"sourceType": "module" // ts 中使用 es 模块},"rules": {'no-var': "error",// 优先使用 interface 而不是 type'@typescript-eslint/consistent-type-definitions': ["error","interface"],"@typescript-eslint/no-unused-vars": "error", // 使用 ts 未使用变量的规则 比如枚举类型在es中会报错"no-extend-native": 0,"no-new": 0,"no-useless-escape": 0,"no-useless-constructor": 0,"no-trailing-spaces": ["error", { "skipBlankLines": true }],"indent": ["error", 4, {"SwitchCase": 1}],"space-infix-ops": ["error", {"int32Hint": false}],"space-before-function-paren": ["error", {"anonymous": "always","named": "always","asyncArrow": "always"}],"semi": ["error", "always"],"comma-dangle": 0,"no-console": 0,"no-debugger": 0,"id-length": 0,"eol-last": 0,"object-curly-spacing": ["error", "never"],"arrow-spacing": "error","no-multiple-empty-lines": "error","spaced-comment": "error","quotes": ["error", "single", { "allowTemplateLiterals": true }],"no-unreachable": "error","keyword-spacing": "error","space-before-blocks": "error","semi-spacing": "error","comma-spacing": "error","key-spacing": "error","no-undef": "error","prefer-const": ["error", {"destructuring": "any","ignoreReadBeforeAssign": false}]}
};

新建 .eslintignore 文件

/dist
.eslintrc.js
/webpack-config
/game.js
/src/js/libs
commitlint.config.js

package.json script 增加

"lint": "eslint src --ext js"

2.5 增加 babel

根目录新建 .babelrc 文件

{"presets": [["@babel/preset-env",{"useBuiltIns": "entry","targets": {"esmodules": true,"chrome": "58","ie": "11"}}]],"plugins": ["@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-object-rest-spread"]
}

2.6 commintlint （非必要）

根目录新建 commitlint.config.js 文件

module.exports = {extends: ['@commitlint/config-conventional'],rules: {'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert']],'subject-full-stop': [0, 'never'],'subject-case': [0, 'never']}
};

package.json 增加 husky

    "husky": {"hooks": {"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}},

3. 代码改造

3.1 src源码目录

新建src 目录并且将 js文件迁移到 src目录内

在这里插入图片描述

为了能够快速启动游戏，这里我们使用 ts调用js的方式来改造，暂时不对官方js demo代码进行改造，tsconfig.json中配置了支持这种调用

src 目录下新建 index.ts

import './js/libs/weapp-adapter'
import './js/libs/symbol'import Main from './js/main'new Main()

3.2 game.js 改造

game.js 只需要调用打包的 main.min.js 即可

import './dist/main.min';

3.3 wx.d.ts

增加微信环境的声明文件 以使ts支持使用微信小游戏的api

src目录下新建 type/wx.d.ts文件 该文件太长 请到此处复制使用

dev运行

执行 npm run dev 会以 watch mode 开启webpack打包，有代码变更时会自动更新main.min.js文件

打开微信开发者工具，就可以看到项目运行起来了， 其他的改造和coding就自己发挥啦

在这里插入图片描述

project.config.json 文件修改 ignore 配置，忽略掉不需要上传的源码文件及sourcemap等文件

"packOptions": {"ignore": [{"type": "file","value": "dist/main.min.js.map"},{"type": "file","value": ".babelrc"},{"type": "file","value": ".eslintignore"},{"type": "file","value": ".eslintrc.js"},{"type": "file","value": ".gitignore"},{"type": "file","value": "commitlint.config.js"},{"type": "file","value": "package.json"},{"type": "file","value": "README.md"},{"type": "file","value": "tsconfig.json"},{"type": "file","value": "package-lock.json"},{"type": "folder","value": "node_modules"},{"type": "folder","value": "src"},{"type": "folder","value": "webpack-config"}]},

发布时 执行 npm run build 之后就可以上传了


http://chatgpt.dhexx.cn/article/QZQblAUL.shtml

相关文章

小游戏开发引擎CocosCreator

小游戏开发引擎CocosCreator

小游戏 六彩跳棋 已经通过审核并且发布了好几天了，对跳棋感兴趣的朋友可以去看看，在微信游戏里搜索 六彩跳棋 ，点击 立即玩 吧！进去游戏后，需要点击 获取头像昵称 才能得到玩家数据，然后 划动屏幕 选择游戏…
阅读更多...
unity开发微信小游戏1

unity开发微信小游戏1

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、准备工作二、官方文档三、WX开发者工具四、获得Appid五、获得AppidError: app.json: app.json六、资源下载失败404总结 前言 最开使用unity3d开发微信小游…
阅读更多...
【微信小游戏】微信小游戏开发设置竖屏

【微信小游戏】微信小游戏开发设置竖屏

微信小游戏开发环境默认横屏，对竖屏游戏非常不方便。 设置竖屏的入口十分隐蔽，以至于一度令我以为不能设置竖屏。 网上也根本搜不到解决方法，经过我的不懈努力，最终还是找到了设置方法。 原本是横屏的 按下面路径设置竖屏 开发…
阅读更多...
使用pygame开发一个小游戏

使用pygame开发一个小游戏

学习了pygame，身为一个IKUN所以，做了一个简单的小游戏。游戏规则是，使用键盘的方向键控制坤坤，当坤坤触碰到篮球，就会爆发出音乐”只因你太美“。代码如下： import random import sys import pygame pygam…
阅读更多...
微信小游戏开发教程

微信小游戏开发教程

微信小游戏开发教程-前言 自18年年初对开发者开放小游戏接口以后小游戏越来越火热，本文就是对小游戏开发的入门教程，希望这篇文章能够帮到想要入门开发游戏的你。 哈哈哈，看到有人说我故意分成好几篇刷PV，改了一下删了两篇&…
阅读更多...
支持小游戏开发的“引擎四剑客”

支持小游戏开发的“引擎四剑客”

2017年12月28日，微信发布了一款叫“跳一跳”的微信小程序的一个小游戏，无需下载安装，即点即玩，只需要在微信客户端的小程序界面搜索“跳一跳”，点击即可加载进入该游戏玩。游戏小而精，借助于微信巨大的社交…
阅读更多...
小程序开发小游戏注意事项

小程序开发小游戏注意事项

今天研究小游戏开发，总结了一些自己遇到的问题 : 一. 注册appId 用小程序开发的小游戏跟用小程序开发其他项目不是公用的一个appId 如果你现在的小程序账号已经选了别的类目（非游戏），那你就需要另外注册一个账号来单独申请小游戏…
阅读更多...
【小程序】快来开发你的第一个微信小游戏（详细流程）

【小程序】快来开发你的第一个微信小游戏（详细流程）

🥳 作者：伯子南 😎 坚信： 好记性不如乱笔头，独乐乐不如众乐乐 💪 个人主页：https://blog.csdn.net/qq_34577234?spm1010.2135.3001.5421 👬🏻 觉得博主文章不错的话&…
阅读更多...
小游戏开发

小游戏开发

小游戏开发 1、游戏发展历史 广义：一种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的。在英语中，体育比赛(Game)也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏。 狭义…
阅读更多...
小游戏开发指南及过程中的难点问题

小游戏开发指南及过程中的难点问题

如果仅仅针对个人开发者来讲，要独立开发一款大型游戏几乎无可能，更大成功的可能还是开发一款类似《羊了个羊》这样洗脑的小程序游戏。 所以这里主要论述小游戏开发的情况，也就是小程序游戏，首先从小游戏的开发流程来看&#xff1…
阅读更多...
oracle数据库中的注释

oracle数据库中的注释

oracle数据库中的注释 单行注释-- --这是oracle中的单行注释 SELECT SYSDATE FROM dual; 多行注释/**/ /*这是oracle中的多行注释*/ SELECT 6 6 AS "计算结果" FROM dual;
阅读更多...
MYSQL数据库如何写注释

MYSQL数据库如何写注释

方式一 注意：在写注释时，–与注释之间必须要一个空格 select * from stu -- 注释方式二 注意：这种方式比较随意，加不加空格不影响 select * from t_info #注释select * from t_info#注释select * from t_info # 注释方式三 s…
阅读更多...
Idea连接数据库，显示表注释

Idea连接数据库，显示表注释

idea设置显示数据库表名注释 操作步骤： View Apperarance Details in Tree View选上
阅读更多...
达梦数据库中的注释的使用

达梦数据库中的注释的使用

在管理规模较大的数据库时，我们往往需要面对大量的表与视图，与此同时在表与视图中可能会存在着许多的字段，让人难以迅速分辨，不利于对于数据库对象的管理。除了在命名时，对于有意义的表、视图及列，应尽量赋…
阅读更多...
Jpa 自动建表的时候在数据库中添加注释。

Jpa 自动建表的时候在数据库中添加注释。

github地址 本项目可以让 Jpa 自动建表的时候在数据库中添加注释。 为什么做这件事 过去想要让 Jpa 在建表的时候自动添加注释一般需要使用 Column#columnDefinition 属性。示例如下： Column(columnDefinition "INT COMMENT ...") private int unitI…
阅读更多...
达梦数据库中迁移过来的数据，在Mysql中批量添加注释，修改注释

达梦数据库中迁移过来的数据，在Mysql中批量添加注释，修改注释

一、原因 数据是从达梦数据库中迁移过来的，迁移完成注释丢失 二、方法 利用 information_schema.COLUMNS 这个表 三、执行步骤 1.这是达梦数据库导出的注释2.达梦的数数据库数据导出时是和创建表和索引都在一起，因此需要单独把注释这一块的给提取出…
阅读更多...
2021.3.17丨致病菌毒力因子（VFDB）数据库注释

2021.3.17丨致病菌毒力因子（VFDB）数据库注释

摘要 接到一个常规细菌的组装注释项目，不过客户提出想要获取关于组装结果与病毒之间的联系/按之前的操作，dfast没有病毒相关的数据库，无法满足客户需求。一番查阅，发现大家用这个VFDB数据库进行常规的病毒注释，下面将介…
阅读更多...
【TP5】获取数据库注释信息

【TP5】获取数据库注释信息

author：咔咔 wechat：fangkangfk table为表名 $data Db::query(SHOW FULL COLUMNS FROM .$table);
阅读更多...
SpringBoot中使用Mybatis逆向工程（实体类含数据库注释）

SpringBoot中使用Mybatis逆向工程（实体类含数据库注释）

Mybatis逆向工程：根据创建好的数据库表，生成对应的实体类、DAO、映射文件 文章目录 开发环境1.新建SpringBoot应用2.添加逆向工程插件依赖3.执行逆向生成 开发环境 开发工具：IntelliJ IDEA 2021.3.3 (Ultimate Edition)SpringBoot版本&#…
阅读更多...
达梦数据库中注释的使用

达梦数据库中注释的使用

在管理规模较大的数据库时，我们往往需要面对大量的表与视图，与此同时在表与视图中可能会存在着许多的字段，让人难以迅速分辨，不利于对于数据库对象的管理。除了在命名时，对于有意义的表、视图及列，应尽量赋…
阅读更多...
推荐文章

Copyright @ 2022~2023