AEM项目VSCode自动编译ts

AEM项目VSCode自动编译ts

环境

node：v20.18.1

系统：windows

安装主要包

npm install -g nodemon

修改package.json文件

修改项目根目录下的package.json文件，增加如下带代码

"scripts": { "build": "node webpack/component.js --entry \".\\ui.apps\\src\\main\\content\\jcr_root\\apps\\xxx\\components\\xxx\\clientlibs\\js\\index.ts\"", "watch": "nodemon --watch ui.apps/src/main/content/jcr_root/apps/xxx/components/xxx/clientlibs/js/xxx.ts --watch ui.frontend/src/main/webpack/components/xxx --ext ts,tsx,scss,sass --exec \"npm run build\"" },

监听ui.apps/src/main/content/jcr_root/apps/xxx/components/xxx/clientlibs/js/index.ts文件和ui.frontend/src/main/webpack/components/xxx文件夹下修改，存在修改执行npm run build，编译入口文件是ui.apps/src/main/content/jcr_root/apps/xxx/components/xxx/clientlibs/js/xxx.ts

自己根据需要修改监听和编译入口文件地址

入口路径必须.\\开头

修改编译配置文件webpack\component.js

const path = require('path') ... if (typeof (options.entry) === 'string') { ... config.output = { ...(config.output), // 需要使用绝对路径 path: path.resolve(__dirname, '../', pathList.join("\\")), ... }; } ... config.entry = options.entry.split('\\').join('/'); ... compile.run((err) => { console.log('End....'); compile.close((closeErr) => { console.log('Close....'); }); });

运行

npmrunwatch

以前使用的WebStorm配置的watch文件自动编译，只能监听ui.apps里面的ts文件。并且习惯使用VSCode的我，开发时候要打开两个编辑器，很麻烦。

如果不确定修改是不是影响别人，就不要提交修改，只在自己本地使用

欢迎关注公众号：前端da