由于网上引入第三方插件过于老旧,这里笔记一下,用于Anguar CLI来引入第三方插件。
1.大致步骤:
很想吐槽一下,为何anguar CLI引入第三方依赖如此困难。。。【并不看好这样的做法,但是因为Anguar现在还是很火爆的,也不得不低下我高傲的头颅】于是乎,我写下了这段笔记。。。。
- 将第三方插件下载到当前项目
- 将第三方解释包下载到当前项目的环境之中
- 将第三方包正式安装到当前项目
- 指定引入路径
- 给APP加入第三方名称
- 使用。。。。
2.前提
2.1 Angular环境搭建
使用anguar需要最基本的Node.js环境,编写Angauar程序,笔者使用的是WebStrom软件进行编写。
Node.js==>官网免费下载使用(自带npm)。
WebStrom ==>需要官网付费使用(免费30天)。
执行系列命令安装angular/cli
# window平台上使用如下命令
npm install -g @angular/cli
# mac或者linux平台上使用如下命令
sudo npm install -g angular-cli
验证命令
ng varsion
3.正式过程
3.1 下载插件到当前项目
在项目根目录路,执行下述命令:
npm install xxx --save
该命令会将(你所指定的,未指定就是官方)官方远程仓库的第三方插件拉取到项目下的node_modules文件下。
此时项目并未依赖该插件,相当于将第三方插件包拷贝到你项目中–>还不能使用。
3.2 下载第三方解释包下载到当前项目的环境之中
在项目根目录路,执行下述命令:
npm install @types/xxx --save-dev
因为你所下的软件包是js文件,然而Anguar CLI是个typescript脚本来控制前端。两种语言并不互通!因此,你还得下载一个转义包到你的编译环境中。
没错,你确实还是在准备过程之中,并未使用这个包做任何事情,这一步也仅仅是下载。
3.3 将第三方包正式安装到当前项目
在项目根目录路,执行下述命令:
cnpm install xxx --save
执行了这个命令,才算真的将包编译好放入项目了。
但是!项目之中并未进行引用,所以你还是不能直接用该包。
3.4 指定引入路径
在项目根目录下的angular.json文件中找到项目的scripts配置项。
将项目需要引入的js的相对路径放入该标签列表之中。
新版本的是这个文件,如果你是老版本的anguar CLI,你需要去找带angular.json这个自想的json文件,填上写正确就行。
如果有CSS依赖,则需要卸载styles字段之中。
这一步已经无力吐槽,尽管你做了这一步,但是你还是不能使用你的第三方包。
3.5 给APP加入第三方名称
最后将第三方名称文件放入tsconfig.app.json文件中的types项目即可。
4.吐槽
不知为何,面对Anguar CLI开发我满心都是抵触的情绪,可是因为公司项目中有前人使用该框架开发的项目,别人走了,我去接手,才不得不去了解这个框架。在加上大量的公司也都以该技术为敲门砖,并且该框架确实成为了Node.js的代表,成为模块化管理项目的一套模板。说明这套框架还是有一定优势的。
不过框架在引入第三方方面做的如此死板(相比js语言,引入js可以内联或者外联,很方便)而这里,足足五步之多,并且配置文件得到处找。。。下载三步,引入两个而修改两个文件,真的不友好!
任何设计,应以开放的接口,全面的功能,简单的配置为一款优秀的框架设计,显然,它并不是。
大浪淘沙,一步步的来吧!