Anguar CLI引入第三方插件过程

由于网上引入第三方插件过于老旧，这里笔记一下，用于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可以内联或者外联，很方便）而这里，足足五步之多，并且配置文件得到处找。。。下载三步，引入两个而修改两个文件，真的不友好！
  任何设计，应以开放的接口，全面的功能，简单的配置为一款优秀的框架设计，显然，它并不是。
  大浪淘沙，一步步的来吧！