技术 | 玩玩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 build

flow的代码,大家可以感受一下:

// @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]都可以在用的过程中慢慢尝试。

对于这样的工具,我最喜欢的还是它提供的泛型,这对于复杂应用中的复用有极大的好处,相信我,没那么难,要勇于尝试。

你身边如果有朋友对混合领域(跨技术栈)或全栈,编程感悟感兴趣,可以转发给他们看哦,^_^先谢过啦。


原文发布于微信公众号 - 子曰五溪(fed-talk)

原文发表时间:2017-03-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券