基于 VsCode 开发 TypeScript 工程化的 Autojs6 模板。
-
build
这个目录是构建支持,一般情况下不需要修改以及增加。
-
lib
这个目录是编写一些公共特征的库,可以划分模块,如 m1 / m2 然后再 tsconfig.json 文件中添加 paths 内容即可。 paths:{ "@lanaqi/m1": [ './lib/m1/index.ts' ] } 其中 index.ts 内容示例如下: import A from "./dir/a"; export { A };
-
src
这个目录是源码目录,其中 main.ts 是入口文件。 其中 ./src/assets/ 是资源目录。 多项目结构: ./src/${projectName}/main.ts 以及 ./src/${projectName}/assets/ 另外需要覆盖环境变量:PROJECT_NAME , 如 -env.PROJECT_NAME=a 这样。 需要注意的是,多项目时 tsup.config.ts 不需要传递 packageName 参数。 export default defineConfig((overrideOptions: TsupOptions) => TsupConfigBuilder.withNewConfig(overrideOptions)); 更多参考:./build/ 中实现的源码。
-
dist
这个目录是构建输出,编译后生成的源码以及资源在这个目录下,这个目录下以项目名方式分类,如下: dist/a dist/b
-
.gitignore
通用 git 忽略配置文件,可自行修改。
-
package.json
项目描述文件,可自行修改(一般情况下只需要修改 name & version 即可,多项目下需要注意传递项目名)。
-
tsconfig.json
TypeScript 配置文件,一般情况下按需修改。
-
tsup.config.ts
Tsup 配置文件,一般情况下单项目不需要修改。
- 复制工程目录所有到你的项目中。
- 打开 VsCode 开启服务。
- 使用 Autojs6 连接 VsCode 监听。
- 运行项目中 scripts 即可。
- 使用资源文件时,需先部署,否则无法读取(可以修改 DEPLOY_ACTION 为 both 值)。
应遵守以下代码编写方式。
// 不要这样
var circle = require('circle.js');
console.log("半径为 4 的圆的面积是 %d", circle.area(4));
// 应该这样(这个 circle.js 应遵守 es5+ 标准)
import circle from './circle';
console.log("半径为 4 的圆的面积是 %d", circle.area(4));
建议把这一类放置 src/static 目录下。
// 支持后缀:jpg / jpeg / ico / gif / svg / svgz / webp / png / bmp
import png from './my.png';
// 同时也支持对 .md / .txt / .text 文件读取为文本字符串
import txt from './test.txt';
// 在原始 js 中使用 ui 时,必须先在 main.js 的顶部 "ui"; 声明。
// 在这里不必声明,会自动注入,当使用 ui. 时注入。
// 不要这样
ui.layout(
<vertical>
<button text="第一个按钮"/>
<button text="第二个按钮"/>
</vertical>
);
// 静态模板(如果可以还是使用静态模板比较好)
// 建议放到 html 目录下(该目录受监控变动处理)
import mainHtml from './html/main.html';
import png from './my.png';
ui.layout(mainHtml);
// 动态修改属性
const myImg = ui.findView('id');
myImg.attr('src', `data:image/png;base64,${png}`);
// 动态模板
// 应该这样,更多参考:https://github.com/zspecza/common-tags
import { html } from 'common-tags';
import png from './my.png';
ui.layout(html`
<vertical>
<button text="第一个按钮"/>
<button text="第二个按钮"/>
<img src="data:image/png;base64,${png}" />
</vertical>
`);
// 尽量不要用 require 函数(某些情况下也需要该方式,如导入第三方库)
require('./test.txt');