本篇可了解如何在小程序中使用和配置 TypeScript
,并配置热重载
项目结构
建议由官方开发工具生成的目录结构。(注意时间和版本区别导致结构的异同)
+ ├── config // 这层文件夹需不需要随便你 + │ │── index.js // 自动编译运行 js ├── app.js // 全局 js ├── miniprogram // 如果是官方工具生成项目,应该会有这个目录 │ │── app.ts │ │── component │ │ .... └── ....
|
- 编辑
/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 │ │ .... └── ....
|
- 最后,在
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" },
|
npm run dev
即可在修改后就能让开发工具热重载你的代码了