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

源码地址

微信小游戏版本技术选型使用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 之后就可以上传了