TonyStudio

前面的三篇文章分别为：起步、支持es6、加载资源，我们现在可以完整的进行一个项目了。但我们从刚开始的目的就是探索这个过程，然后达到将项目中的requireJs加载更改为webpack加载。现在来看下如何来替换。

接上一篇 使用webpack构建AngularJs项目：支持ES6 我们已经将js的加载和转换处理好了，现在来看下资源的加载以及样式的处理。

用angular来实现拖拽布局，首先想到的是直接使用angular的cdk @angular/cdk/drag-drop，尝试了一下，是很好用，在两个列表之间或自身的拖动排序上是很好的。但是我想实现的是类似于左侧可拖动的组件列表，右侧是布局区域，当拖动的时候源列表是不变的，拖动到目标布局区域的时候是进行复制的功能。很尴尬的是使用cdk的拖动功能的时候总是会将源列表的项移出列表，哪怕是设定了是复制的功能，但是只有在拖放结束的时候才会回到源列表。查了很久，没找到可解决的方法。那先把cdk放一边，本来就对拖动这一块不熟，那我们就从拖动的基本事件入手，来实现这功能。

上一篇 使用webpack构建AngularJs项目：起步 我们使用webpack的html-loader和file-loader完成了一个简单的路由。现在我们继续在这基础之上加功能。

之前使用angularJs来作项目的时候用的是gulp，现在webpack比较火热，尝试用webpack来构建angularJs项目。为啥要搞angularJs？因为工作中的项目是基于angularJs的，想升级到angular，是离不开webpack的，需要一步步过渡，所以第一步是先用webpack构建angularJs项目，以达到弃用gulp和requireJs的目的。开搞！

使用jszip压缩文件夹，使用nodemail发送邮件。

Windows PowerShell 美化记录

我们知道，页面上展示的文件（图片）常见的有：文件的链接、base64格式的图片。文件链接是一个地址，base64格式的是一个字符串描述的文件，我们可以直接打开，或者浏览器里面直接右击下载。假设我们有需求是用户不想或者不知道浏览器可以直接下载图片，他希望出来一个按钮，点击按钮即可下载，那么我们该如何处理？

以前尝试过使用Midway.js 结合egg-jwt插件来做过jwt的token。这种插件式的方式虽然便利，但是还是基于别人封装的库在使用，对于一些基本的实现还是有些模糊的，这次正好结合express和JsonWebToken，来手动实现这个token的签发和解码过程。

关于一些jwt的基本概念可以参考以前的这篇文章：midway jwt token 探索

RxJS的弹珠图看到很多，但是不知道具体的语法是啥，还是一脸懵逼的状况，所以在回顾RxJS的操作符之前，先来学习下弹珠图的语法。

需要注意的是，我这里直接使用了angular自带的Jasmine和Karama来做测试，代码是写在.spec.ts文件里面的。

为了运行单组件里面的测试代码，我们只需要运行ng test --include youComponentPath即可。

我这里是边看文章边翻译的，可能也不太准确，如果介意的话可以直接翻到文章底部点击原文的链接即可。