微信小程序 - 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
即可在修改后就能让开发工具热重载你的代码了
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录!
评论