使用rollup+es6+class 打包类库

最新推荐文章于 2024-08-22 14:21:56 发布

原创

最新推荐文章于 2024-08-22 14:21:56 发布 · 5.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#roll-up #rollup #es6 #类库 #打包

本文介绍了为何选择Rollup作为JavaScript模块打包工具，尤其是对于类库打包的优势。详细讲解了项目结构，包括rollup配置文件的各个部分如entry、moduleName、format、dest、sourceMap和plugins，并提供了具体的配置示例。此外，还展示了如何处理类的导入和导出，以及如何运行打包过程。最后，强调了类库封装的重要性，作者计划开源其彩票算法SDK的相关项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、为什么选用rollup

roll-up是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup最令人激动的地方，就是能让打包文件体积很小。这么说很难理解，更详细的解释：相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES2015模块，比Webpack和Browserify使用的CommonJS模块机制更高效。两者相比，就打包出来的文件可读性就完全不一样。

Webpack是一个面向多种文件类型的复杂的应用打包工具。各种文件类型，只要配置了loader，即可以进行自定义的加载，将所有的文件打包成应用。

我们这里是要进行类库的打包，即只打包一堆class，所以我们选用roll-up。文末会附上github源码。

二、项目结构

|--build
   rollup.config.dev.js
|--src
  |--classes
    Animal.js
    Cat.js
    Dog.js
    PoodleDog.js
  index.js
 package.json

对，我们用最简单的代码实现打包功能。

1 rollup配置文件

首先看package.json。只需要配置一个roolup.config.dev.js即可以实现配置。寻找build下的roolup.config.dev.js.

package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" &a

最低0.47元/天解锁文章

200万优质内容无限畅学