首页 » SEO优化 » phpangular应用技巧_运用yeoman构建angular应用

phpangular应用技巧_运用yeoman构建angular应用

访客 2024-12-04 0

扫一扫用手机浏览

文章目录 [+]

本文将实现的generator起名为ngtimo,依照yeoman的命名规矩就叫做generator-ngtimo,是笔者这周末一晚上加一上午参考着yeoman官方给出的几个generator(generator-generator、generator-node)给强行催生出来的,目前也已经在github上托管并发布到npm。

实现效果

首先确保已经全局安装了yeoman,然后再全局安装generator-ngtimo:

phpangular应用技巧_运用yeoman构建angular应用

安装完成后即可利用yo命令来进行构建:

phpangular应用技巧_运用yeoman构建angular应用
(图片来自网络侵删)

然后顺利的话yeoman会像下面这样讯问一系列构建的配置,这里笔者选择输入项目名称为ng-test剩下的一起敲回车:

顺利的话如下图这样的项目构培养出身了,可以 cd 到项目目录下(自动实行的 npm install 失落败的话再手动

npm install 一下),并运行 npm run server 启动项目查看效果。

如果只是想要利用yeoman来快速进行项目搭建的话,只须要找到一个喜好的generator,像上文这样全局安装然后yo它就可以了!
不过只是利用别人的generator会有些不自由而且磨练对方的掩护能力,就像笔者这个一时兴起的ngtimo就才刚刚有了一个主模板而已,还须要做很多改进和迭代。

如果想要自己来编写一个generator实在难度也非常小,yeoman官方乃至给出了一个generator-generator来帮助我们创建一个generator,笔者这个不成器的ngtimo也是yo generator给yo出来然后加以养成的 :)。

yeoman generator基本项目构造

不想自己从零开始写一个generator的话强烈推举利用yeoman官方的generator-generator先把基本构造构建出来:

yeoman的generator说白也只是一个npm包,紧张依赖yeoman-generator包来制订构建规则,这里给出ngtimo的基本目录构造:

构建规则

现在紧张着眼于generators/app/index.js,此文件是最紧张的角色,定义了ngtimo要如何处理模板,如何与用户交互等。
笔者目前也只是照着比较成熟的generator在利用,存在片面之处还请包涵。

总览index.js

全体index.js将导出一个扩展了yeoman-generator的类,就像这样:

内部的这四个方法各有用处。

一、prompting方法

用于与用户进行交互,即在yo项目的时候,这老头会啰啰嗦嗦问我们很多问题,这些问题便是在这里配置的。

对付这个方法笔者选择的套路是如下三部曲:

先让老头向用户问声好

以上代码效果便是老头会代我们问候(褒义)一下用户:

把持续串问题先配置好

这里就列举了两类问题,一类是客不雅观题,让用户输入要构建的项目名称,另一类是判断题,讯问用户是否添加一些额外的常用代码,还有一类没有利用到的是选择题,还蛮有趣的。

2. 把这个问题数组返回给老头

问题数组配置好了,现在要把它交给老头保管,做法如下:

效果便是当用户做完这些题目后回答会配置给props变量,在后面的写如内容环节就可以根据用户的答案来有选择的创建项目了。

二、default方法

笔者一开始没有配置这个方法,是在测试构建时创造没办法给目标项目套一个顶层目录时参考官方generator加上的,预测是可以用来实行一些默认行为,比如自动给目标项目创建一个顶层目录,像这样:

三、writing方法

此方法即用来把实际项目按照指定规则给写出来,紧张有两种写法: 直接复制指定模板以及传入参数渲染出目标文件。

办法一: 直接拷贝

this.fs.copy(

this.templatePath('模板位置'),

this.destinationPath('目标位置')

);

办法二: 传入参数渲染模板

this.fs.copyTpl(

this.templatePath('模板位置'),

this.destinationPath('目标位置'),

{

参数名: 值

}

);

比如说,在index.js的同级目录下的templates目录下有一个文件叫text.txt, 利用方法一将模板位置和目标位置都写text.txt,老头就会直接复制这个text.txt作为输出;而如果利用方法二,模板位置和目标位置不变,并传入参数{ hello: '你好啊'},在text.txt中就利用ejs语法写上<%=hello%>,终极老头同样会输出一个test.txt文件,不一样的是里面的内容被渲染成了\"大众你好啊\公众。

对此方法的总结便是根据须要利用copy或copyTpl进行输出,个中copyTpl中的渲染利用ejs语法进行,而模板文件就都放在index.js的同级templates目录里边。

四、install方法

此方法即用来自动实行依赖的安装,没什么特殊的,便是在构建完成后自动帮你npm install和bower install,也可以禁用个中一种:

效果便是下图这句话了:

发布generator到npm

发布之前可以先利用npm link映射到本地进行测试:

确认无误后,发布流程便是一句代码的事(记得定好版本,且更新发布时记得更新版本号):

相关文章

QQ聊天恶搞代码技术背后的趣味与风险

人们的生活越来越离不开社交软件。在我国,QQ作为一款历史悠久、用户众多的社交平台,深受广大网民喜爱。在QQ聊天的过程中,恶搞代码的...

SEO优化 2025-03-02 阅读1 评论0

Python代码截屏技术与应用的完美融合

计算机屏幕截图已经成为人们日常生活中不可或缺的一部分。无论是分享工作成果、记录游戏瞬间,还是保存网页信息,屏幕截图都发挥着重要作用...

SEO优化 2025-03-02 阅读1 评论0

QQ无限刷礼物代码技术突破还是道德沦丧

社交平台逐渐成为人们生活中不可或缺的一部分。QQ作为我国最具影响力的社交软件之一,其丰富的功能吸引了大量用户。近期有关QQ无限刷礼...

SEO优化 2025-03-02 阅读1 评论0