玩转Angular1(17)--脚本自动更新并注册指令
更新日期:
AngularJS(v1.5.8)已经成为项目们的基本框架,《玩转Angular1》系列用于记录项目中的一些好玩或者比较特别的思路。
本文介绍使用脚本自动生成指令注册的文件,该脚本参考来自组内小朋友。
指令的管理
指令的注册
前面也提到过,我们在注入编写的指令、服务、控制器等等的时候,可以使用两种方法:
- 通过在模块中注册。
- 通过添加模块依赖,该模块依赖中已含有需要注入的对象。
目前我们维护的指令已经在不断增长了,这样我们每次新加一个指令的时候,都需要在bootstrap.ts
中获取并注册到模块中,不是很方便。
我们可以编写一个简单的脚本,将所有的指令都在shared/components
文件夹的index.ts
文件中注入模块,然后返回该模块,在bootstrap.ts
文件中注册。
这样,每次我们新建、更改、删除一些指令的时候,我们只需要运行一下这个脚本就可以了。
基本思路
我们的指令们的命名遵守的规律:
- [指令名].directive.ts
如此,我们可以从文件名拿到指令的名字,这样就可以自动获取指令名,并合并后统一导出。
既然我们是javascript的执行者,这时候当然要选择node去执行我们的脚本:
- 获取
fs
文件依赖 - 通过
fs.readdir()
去读取app/shared/components
文件夹下的文件,匹配出指令名 - import所有的指令
- 通过
export default
导出合入后的指令
fs服务
readFile()
用于异步读取数据。writeFile()
用于异步写入文件。exists()
用来判断给定路径是否存在,然后不管结果如何,都会调用回调函数。mkdir()
用于新建目录。readdir()
用于读取目录,返回一个所包含的文件和子目录的数组。mkdirSync()
,writeFileSync()
,readFileSync()
这三个方法是建立目录、写入文件、读取文件的同步版本。
参考:《fs 模块》
自动注册实现
componentGenerator.ts
1 | const fs = require('fs'); // 获取文件服务依赖 |
在bootstrap中注入
这样,我们可以通过app/shared/components/index.ts
文件中一并获取该文件夹下所有依赖,这样我们就可以只需要注入一次:
1 | // app/bootstrap.ts |
生成并运行脚本
我们的脚本是用ts文件写的,若要在node下运行需要先编译成js文件:
1 | tsc componentGenerator.ts |
这时候就会生成文件componentGenerator.js
,然后可直接运行:
1 | node componentGenerator.js |
就会自动生成app/shared/components/index.ts
文件了:
1 | /* 文件由componentGenerator.js自动生成,请勿更改 */ |
至于其他的服务service/factory,还有控制器controller等,都可以参考这样的方式。
结束语
这节主要简单介绍使用脚本自动生成指令注册的文件的过程,脚本设计来自组内小朋友。
当我们的项目大了,对于管理的确比较不方便,这时候我们就需要一些相对自动或者辅助管理的脚本,像这里的componentGenerator.ts
以及前面的publish.sh
等等都是吧。
当然这里,小伙伴们也可以尝试把这个文件的运行添加到webpack-dev-server的热部署中,当文件有改动的时候自动运行之类之类的。
此处查看项目代码

码生艰难,写文不易,给我家猪囤点猫粮了喵~
查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢