avatar

微信小程序 - typeScript 的配置与热加载

本篇可了解如何在小程序中使用和配置 TypeScript,并配置热重载

小程序

项目结构

建议由官方开发工具生成的目录结构。(注意时间和版本区别导致结构的异同)

+ ├── config // 这层文件夹需不需要随便你
+ │ │── index.js // 自动编译运行 js
├── app.js // 全局 js
├── miniprogram // 如果是官方工具生成项目,应该会有这个目录
│ │── app.ts
│ │── component
│ │ ....
└── ....
  1. 编辑 /config/index.js

    没有依赖先安装依赖:npm child_process node-watch -S -D

const exec = require('child_process').exec;
const watch = require('node-watch');

const path = require('path');
// 路径,根据自己的情况更换
const basicPath = './miniprogram/';

// 监听文件
watch([
// 文件目录或文件的路径,路径不存在会报错哦,请根据实际情况添加
path.join(basicPath, 'app.ts'),
path.join(basicPath, 'pages'),
path.join(basicPath, 'component'),
], { recursive: true }, function(evt, name) {
if (name.split('.').pop() === 'ts') {
console.log('监听到TypeScript文件改动,重新编译中...');
exec('npm run compile');
}
});

console.log('TypeScript自动编译脚本已成功运行...');

TIPS: TS 文件的结构需要如下才能完成编译

├── component
// js ts文件都需创建
│ │── aaa.ts
│ │── aaa.js
│ │ ....
└── ....
  1. 最后,在package.json.script 中添加脚本

    /package.json

  "scripts": {
"compile": "./node_modules/typescript/bin/tsc",
"tsc": "node ./node_modules/typescript/lib/tsc.js",
+ "dev": "node ./config/index.js"
},
  1. npm run dev 即可在修改后就能让开发工具热重载你的代码了

文章作者: kshao
文章链接: https://ksh7.com/2020/05/27/wx-typescript/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 kshao-blog
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论