前端的一些比较流行的方案

CI / CD

持续集成(Continuous Integration)，持续集成指的是频繁的将代码集成到主干，每次集成都经过自动化的构建（包括编译、发布、自动化测试）来验证。持续部署(Continuous Delivery)，支持将持续集成的生成结果部署到对应的环境。
整个流程大概是这样的：
push github => GitHub触发CI构建 => 执行命令 => 部署 => 完成。

如今比较流行的CI是：Jenkins， GitLab CI（8.0版本开始），travis-ci

盗个图, 流程大概就是这个样子

yarn install

Yarn 是一个包管理器，在前端通常咱们使用npm做为包管理器，可是npm的源常常加载插件会很慢，且会执行预测试一些插件的行为使得在window安装变得很是的困难。因此通常来讲，yarn在window上会做为一种替补方案用来安装一些node_modules包。命令也是至关的简单，yarn install 对标 npm install。好处呢，有这么多：

vue 全家桶

• pug，参照这个文档，领略一下pug的风采
• 好用的插件，参照这个文档
• Vue代码模块定位插件vue-component-finder

npx

npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提高开发者使用包内提供的命令行工具的体验。

1. npx http-server 
   复制代码

   cd到项目文件夹，执行这条命令会帮你开启一个静态服务器

2. npx create-react-app my-app
   复制代码

   这条命令会临时安装 create-react-app 包，命令完成后create-react-app 会删掉，不会出如今 global 中

3. npx github:piuccio/cowsay hello
   复制代码

   npx 甚至支持运行远程仓库的可执行文件

更多用法，能够参考这份文档

.editorconfig

项目下的编辑器格式化配置文件，管理项目的缩进、字符集等。能够参考这个文档，配合代码检查工具使用，好比说：ESLint和TSLint，统一代码风格。demo以下：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false
复制代码

详细的介绍，能够参考这个文档

数据可视化

echart、highchart，例如作数据钻取功能，highchart这个官网是很是不错的，参照文档。可是，highchart只有在非商业用途免费，是国外的开源框架。

echart

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大加强了用户体验，赋予了用户对数据进行挖掘、整合的能力。—— 大数据时代，从新定义数据图表的时候到了。
ECharts，一个使用 JavaScript 实现的开源可视化库，能够流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

highchart

兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库，大约200KB左右

动画相关

网页动画技术大约有这么几种，css三、js帧、mp四、gif、apng、webgl、canvas、svg、flash（旧），介绍一下经常使用的库好了

Velocity.js

不使用jQuery的方案，大概是这样滴：

var Velocity = require("path/to/velocity.js");
// Optional: If you're using the UI pack, require it after Velocity. (You don't need to assign it to a variable.)
require("path/to/velocity.ui.js");
/* Your app code here. */
Velocity(document.body, { opacity: 0.5 });
复制代码