本篇可了解如何在小程序中使用和配置 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 即可在修改后就能让开发工具热重载你的代码了