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

原创

已于 2022-02-18 10:14:33 修改 · 5.1k 阅读

标签

#typescript #webpack #微信小游戏

于 2022-02-10 11:39:52 首次发布

本文详细介绍了如何在微信小游戏上使用TypeScript进行开发，包括设置环境、配置Webpack、添加tsconfig和eslint支持、转换js代码、声明微信环境的类型文件，以及dev和prod的Webpack配置。通过这个过程，开发者可以实现使用TypeScript开发并编译成JavaScript，以适应微信小游戏的运行环境。

源码地址

微信小游戏版本技术选型使用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',
        libraryExpor

最低0.47元/天解锁文章