您现在的位置是:首页 >技术教程 >WEBPACK和ROLLUP构建前端工具库网站首页技术教程

WEBPACK和ROLLUP构建前端工具库

ejinxian 2023-07-14 16:00:02
简介WEBPACK和ROLLUP构建前端工具库

 

1. WEBPACK

  • webpack 提供了构建和打包不同模块化规则的库,只是需要自己去搭建开发底层架构。
  • vue-cli,基于 webpack , vue-cli 脚手架工具可以快速初始化一个 vue 应用,它也可以初始化一个构建库。

2. ROLLUP

  • rollup 是一个专门针对 JavaScript 模块打包器,可以将应用或库的小块代码编译成更复杂的功能代码。
  • Vue、React 等许多流行前端框架的构建和打包都能看到 rollup 的身影。

ROLLUP 和 WEBPACK应用场景

  • webpack 主要职能是开发应用,而 rollup 主要针对的就是 js 库的开发,如果你要开发 js 库,那 webpack 的繁琐配置和打包后的文件体积就不太适用了,通过 webpack 打包构建出来的源代码增加了很多工具函数以外的模块依赖代码。
  • rollup 只是把业务代码转码成目标 js ,小巧且轻便。rollup 对于代码的 Tree-shaking 和 ES6 模块有着算法优势上的支持,如果只想构建一个简单的库,并且是基于 ES6 开发的,加上其简洁的 API,rollup 得到更多开发者的青睐。

rollup 全家桶

•  rollup(工具库打包构建核心包)

• rollup-plugin-livereload(rollup 插件,热更新,方便本地 debugger 开发)

• rollup-plugin-serve(rollup 插件,本地服务代理,方便在本地 html 中调试工具)

• rollup-plugin-terser(rollup 插件,代码压缩混淆)

• rollup-plugin-visualizer(rollup 插件,可视化并分析 Rollup bundle,以查看模块占用)

•  @rollup/plugin-babel(rollup 插件,rollup 的 babel 插件,ES6 转 ES5)

• @rollup/plugin-commonjs(rollup 插件,用来将 CommonJS 模块转换为 ES6,这样它们就可以包含在 Rollup 包中)

• @rollup/plugin-json(rollup 插件,它将.json 文件转换为 ES6 模块)

•  @rollup/plugin-node-resolve(rollup 插件,它使用节点解析算法定位模块,用于在节点模块中使用第三方 node_modules 包)

• @rollup/plugin-typescript(rollup 插件,对 typescript 的支持,将 typescript 进行 tsc 转为 js)

 

typescript 相关

• typescript(使用 ts 开发工具库)

• tslib(TypeScript 的运行库,它包含了 TypeScript 所有的帮助函数)

•  @typescript-eslint/eslint-plugin(TypeScript 的 eslint 插件,约束 ts 书写规范)

• @typescript-eslint/parser(ESLint 解析器,它利用 TypeScript ESTree 来允许 ESLint 检测 TypeScript 源代码)

 

文档相关

• typedoc(TypeScript 项目的文档生成器)

• gulp(使用 gulp 构建文档系统)

• gulp-typedoc(Gulp 插件来执行 TypeDoc 工具)

• browser-sync(文档系统热更新)

单元测试相关

• jest(一款优雅、简洁的 JavaScript 测试框架)

• @types/jest(Jest 的类型定义)

• ts-jest(一个支持源映射的 Jest 转换器,允许您使用 Jest 来测试用 TypeScript 编写的项目)

• @babel/preset-typescript(TypeScript 的 Babel 预设)

其他依赖

• eslint(代码规范约束)

• @babel/core(@rollup/plugin-babel 依赖的 babel 解析插件)

• @babel/plugin-transform-runtime(babel 转译依赖)

• @babel/preset-env(babel 转译依赖)

• chalk(控制台字符样式)

• rimraf(UNIX 命令 rm -rf 用于 node)

• cross-env(跨平台设置 node 环境变量)

 

参考资料

[1] rollup 英文文档(https://rollupjs.org/guide/en/#quick-start

[2] rollup 中文文档(https://rollupjs.org/guide/zh/#introduction

[3] Rollup.js 实战学习笔记(https://chenshenhai.github.io/rollupjs-note/

[4] Rollup 打包工具的使用(https://juejin.cn/post/6844904058394771470

[5] TypeScript、Rollup 搭建工具库(https://juejin.cn/post/6844904035309322254

[6] 使用 rollup.js 封装各项目共用的工具包(https://juejin.cn/post/6993720790046736420

[7] 如何开发一个基于 TypeScript 的工具库并自动生成文档(https://juejin.cn/post/6844903881030238221

[8] 一款优雅、简洁的 JavaScript 测试框架(https://jestjs.io/zh-Hans/

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。