Rollup

背景

业务提出一个需求，希望有工具能实现批量安装应用，可以通过实现一个客户端应用封装一下adb工具实现。不过业务分析一般使用windows，就必须要做成跨平台实现。另外之前通过页面提供了一些小功能给到业务分析，所以如果能通过在页面上实现的话是比较理想的。 调研后发现chrome提供了navigator usb功能，就是通过js能够访问到usb端口。而且github上有个项目通过navigator.usb实现了页面版的adb功能。不过这个项目是通过typescript来实现的，最后通过webpack和前端逻辑打包在了一起，没法直接用。所以将ts编译成的js文件都拷贝了出来，生成了这个项目. 但是当前还面临一个问题，这些js数量太多，让页面一个个加载不仅麻烦，还会出现无法调用的问题。那如何将这些js打包在一起？ 最先考虑到的方案是webpack，但是webpack打包后，所有的逻辑被webpack封装了起来，原本js中定义的类和方法都没法直接使用。所以又了解到了rollup这个js打包工具。

ES和CommonJS

javascript有很多种规范，如commonjs，umd，amd，es等，我们这里主要对比下es和commonjs这两种当前比较常用的

区别项	es模块化	commonJS
可用于服务端还是浏览器	服务端和浏览器	服务端
模块依赖关系何时确定(即：何时加载模块)	编译时	运行时
设计思想	尽量的静态化
模块是不是对象	不是	是
是否整体加载模块(即加载的所有方法)	否	是
是否是动态更新(即通过接口,可以取到模块内部实时的值)	是。es module输出的是值的引用	不是。commonJS模块输出的是值的拷贝，不存在动态更新
模块变量是否是只读的	是。原因：ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。

rollup打包

从上面的需求我们知道我们需要在页面上用js实现adb协议，通过上面的es和commonjs的对比，我们知道commonjs主要用于服务端，其实也就是nodejs用的比较多。如果要在页面使用的话需要使用es规范。 那下面我们就需要打包我们的项目。

rollup安装

首先是要安装rollup，node环境和npm的安装这里就省略了

$npm install -g rollup

rollup脚本编写

创建一个rollup.config.js文件，写入打包的内容

export default [{
    input: 'src/adb.js',
    output: {
        // dir: 'dist',
        file: 'adb.bundle.js',
        format: 'es',
        name:"adb"
    }
}
];

• input指整个模块的入口

• output是输出参数

  • file是指输出文件名

  • format就是上面分析的js规范，这里指定输出es module

  • name是整个模块的名字

我们的脚本这么配置就可以了，如果有更复杂的需求，可以查看官方的说明

模块打包

在rollup.config.js文件的同级目录执行

$rollup -c