技术 | 玩玩rollup与flow，感受一下“大自然”的魅力
如图：飘飘然
最近撸了两个项目，全程用了rollup，flow，谈一下自己的感受，极力的推荐大家尝试。说起来，用它们还是从Vue换构建工具加入flow开始，就一直想大规模的应用，一直没有找到机会，今儿算是逮着了。
多的不说“小二”，上二斤代码。
Rollup is a module bundler for JavaScript which compiles small pieces of code into a something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.
Rollup其实和Webpack一样也是一个对模块构建的工具，不过它仅仅是针对JavaScript，而且还比较“弱鸡”，连watch这样的功能都不具备。那为什么要使用它呢？其实正因为它的功能相对简单，也意味着配置要简单很多，专注做一件事情，总比Webpack能处理“万物”要简化很多，最大的优势在于Tree-shaking，你可以大声呼喊：冗余代码请走开。
npm install rollup --save-dev如果你需要使用babel，还需要安装另外一个插件 “rollup-plugin-babel”：
npm install rollup-plugin-babel --save-dev至于babel如何转换成es5，请参考presets的配置，在.babelrc中，依然需要安装另外一个插件。
一个最简单的rollup.config.js的配置如下：
export default {
entry: 'src/main.js',
format: 'cjs',
dest: 'bundle.js'
};- entry和Webpack entry一样，做为你JavaScript文件的入口。
- format对应的是Webpack libraryTarget，你可以在这里指定构建的模块方式，比如cjs或者umd。
- dest对应的是 Webpack output，也就是构建文件输出的位置。
它没有多复杂的配置，当你需要基于rollup处理其它转译时或者有特定处理时，就需要加入插件了，有时候你编写了一个包，正常情况下，你包的version是写在package.json文件中，在你的src/index.js直接引入package.json，是无法解析的，这时你就需要引用一个 rollup-plugin-json插件来处理这个事情，再加上之前处理的babel，可以这么写：
import json from 'rollup-plugin-json';
import babel from 'rollup-plugin-babel';
export default {
entry: 'src/main.js',
format: 'cjs',
plugins: [ json(), babel() ],
dest: 'bundle.js'
};就这样，非常简单的处理了JavaScript的构建，并不需要像 Webpack那样写巨多的配置。
rollup非常适合用于写某些JavaScript框架或者库的场景一下，当然如果你的库足够简单的话，只需要一些非常简单的配置即可。但是rollup正所以简单，简单的连watch都没有，所以在业务开发时，可能需要配合着其它构建或者scripts配合使用。
A STATIC TYPE CHECKER FOR JAVASCRIPT
接下来想介绍一下flow这样的静态编译工具如何与rollup配合使用，真的非常简单，简单到你只需要在npm scripts 配置三行：
"es5": "rollup",
"flow": "flow; test $? -eq 0 -o $? -eq 2",
"build": "npm run-script flow & npm run es5"终端：
npm run buildflow的代码，大家可以感受一下：
// @flow
function bar(x:string): string {
return x.length;
}
bar('Hello, world!');虽然增加了类型系统，这些我想都不是问题，最重要的地方是在于.flowconfig文件，它指定了很多flow工具可以执行的配置，比如[include]，[ignore]，[libs]等，这其中，我想有两个很可能常用：[libs]和[options]。
[libs]配置主要用来配置你代码中flow无法搜寻的类型，比如在写weex时，weex页面上下文中存在weex对象，这对于weex来说相对是一个“全局的对象”。这个时候，flow在做编译时，就会无法搜寻到weex的定义，这个时候，就需要在[libs]下指定一个目录，在这个目录里创建.js文件来declarations，比如：
declare var weex: Object;而[options]下最有用的当属module.name_mapper='^icepy$' -> 'github'，来匹配模块，其它一些的[include]，[ignore]都可以在用的过程中慢慢尝试。
对于这样的工具，我最喜欢的还是它提供的泛型，这对于复杂应用中的复用有极大的好处，相信我，没那么难，要勇于尝试。
你身边如果有朋友对混合领域（跨技术栈）或全栈，编程感悟感兴趣，可以转发给他们看哦，^_^先谢过啦。