讯享网

                <p id="1PS33687">来源 | OSCHINA 社区</p><p id="1PS33688">作者 | 京东云开发者-京东零售 吴迪</p><p id="1PS33689">原文链接：https://my.oschina.net/u/4090830/blog/8644831</p><p>前言</p><p id="1PS3368A">在实际项目开发中无论 M 端、PC 端，或多或少都有一个 utils 文件目录去管理项目中用到的一些常用的工具方法，比如：时间处理、价格处理、解析 url 参数、加载脚本等，其中很多是重复、基础、或基于某种业务场景的工具，存在项目间冗余的痛点以及工具方法规范不统一的问题。</p><p><ul><li id="1PS336AI"></p><p id="1PS3368B">在实际开发过程中，经常使用一些开源工具库，如 lodash，以方便、快捷的进行项目开发。但是当 npm 上没有自己中意或符合自身业务的工具时，我们不得不自己动手，此时拥有自己的、基于业务的工具库就显得尤为重要。</p><p></li><li id="1PS336AJ"></p><p id="1PS3368C">我们所熟知的 Vue、React 等诸多知名前端框架，或公司提供的一些类库，它们是如何开发、构建、打包出来的，本文将带领你了解到如何从 0 到 1 构建基于自身业务的前端工具库。</p><p></li></ul>构建工具库主流方案 1. WEBPACK<ul><li id="1PS336AK"></p><p id="1PS3368D">webpack 提供了构建和打包不同模块化规则的库，只是需要自己去搭建开发底层架构。</p><p></li><li id="1PS336AL"></p><p id="1PS3368E">vue-cli，基于 webpack ， vue-cli 脚手架工具可以快速初始化一个 vue 应用，它也可以初始化一个构建库。</p><p></li></ul>2. ROLLUP<ul><li id="1PS336AM"></p><p id="1PS3368F">rollup 是一个专门针对 JavaScript 模块打包器，可以将应用或库的小块代码编译成更复杂的功能代码。</p><p></li><li id="1PS336AN"></p><p id="1PS3368G">Vue、React 等许多流行前端框架的构建和打包都能看到 rollup 的身影。</p><p></li></ul>为什么采用 ROLLUP 而不是 WEBPACK<ul><li id="1PS336AO"></p><p id="1PS3368H">webpack 主要职能是开发应用，而 rollup 主要针对的就是 js 库的开发，如果你要开发 js 库，那 webpack 的繁琐配置和打包后的文件体积就不太适用了，通过 webpack 打包构建出来的源代码增加了很多工具函数以外的模块依赖代码。</p><p></li><li id="1PS336AP"></p><p id="1PS3368I">rollup 只是把业务代码转码成目标 js ，小巧且轻便。rollup 对于代码的 Tree-shaking 和 ES6 模块有着算法优势上的支持，如果只想构建一个简单的库，并且是基于 ES6 开发的，加上其简洁的 API，rollup 得到更多开发者的青睐。</p><p></li></ul>工具库底层架构设计</p><p id="1PS3368J">构建工具库底层架构大概需要哪些功能的支持：</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0516%2F818461e0j00rur22s006od200u000rtg00id00h0.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p>架构依赖需知</p><p id="1PS3368L">在对底层架构设计的基础上，首先需要把用到的依赖库简单熟悉一下：</p><p>rollup 全家桶</p><p id="1PS3368M">•  rollup（工具库打包构建核心包）</p><p id="1PS3368N">•  rollup-plugin-livereload（rollup 插件，热更新，方便本地 debugger 开发）</p><p id="1PS3368O">•  rollup-plugin-serve（rollup 插件，本地服务代理，方便在本地 html 中调试工具）</p><p id="1PS3368P">•  rollup-plugin-terser（rollup 插件，代码压缩混淆）</p><p id="1PS3368Q">•  rollup-plugin-visualizer（rollup 插件，可视化并分析 Rollup bundle，以查看模块占用）</p><p id="1PS3368R">•  @rollup/plugin-babel（rollup 插件，rollup 的 babel 插件，ES6 转 ES5）</p><p id="1PS3368S">•  @rollup/plugin-commonjs（rollup 插件，用来将 CommonJS 模块转换为 ES6，这样它们就可以包含在 Rollup 包中）</p><p id="1PS3368T">•  @rollup/plugin-json（rollup 插件，它将.json 文件转换为 ES6 模块）</p><p id="1PS3368U">•  @rollup/plugin-node-resolve（rollup 插件，它使用节点解析算法定位模块，用于在节点模块中使用第三方 node_modules 包）</p><p id="1PS3368V">•  @rollup/plugin-typescript（rollup 插件，对 typescript 的支持，将 typescript 进行 tsc 转为 js）</p><p>typescript 相关</p><p id="1PS33690">•  typescript（使用 ts 开发工具库）</p><p id="1PS33691">•  tslib（TypeScript 的运行库，它包含了 TypeScript 所有的帮助函数）</p><p id="1PS33692">•  @typescript-eslint/eslint-plugin（TypeScript 的 eslint 插件，约束 ts 书写规范）</p><p id="1PS33693">•  @typescript-eslint/parser（ESLint 解析器，它利用 TypeScript ESTree 来允许 ESLint 检测 TypeScript 源代码）</p><p>文档相关</p><p id="1PS33694">•  typedoc（TypeScript 项目的文档生成器）</p><p id="1PS33695">•  gulp（使用 gulp 构建文档系统）</p><p id="1PS33696">•  gulp-typedoc（Gulp 插件来执行 TypeDoc 工具）</p><p id="1PS33697">•  browser-sync（文档系统热更新）</p><p>单元测试相关</p><p id="1PS33698">•  jest（一款优雅、简洁的 JavaScript 测试框架）</p><p id="1PS33699">•  @types/jest（Jest 的类型定义）</p><p id="1PS3369A">•  ts-jest（一个支持源映射的 Jest 转换器，允许您使用 Jest 来测试用 TypeScript 编写的项目）</p><p id="1PS3369B">•  @babel/preset-typescript（TypeScript 的 Babel 预设）</p><p>其他依赖</p><p id="1PS3369C">•  eslint（代码规范约束）</p><p id="1PS3369D">•  @babel/core（@rollup/plugin-babel 依赖的 babel 解析插件）</p><p id="1PS3369E">•  @babel/plugin-transform-runtime（babel 转译依赖）</p><p id="1PS3369F">•  @babel/preset-env（babel 转译依赖）</p><p id="1PS3369G">•  chalk（控制台字符样式）</p><p id="1PS3369H">•  rimraf（UNIX 命令 rm -rf 用于 node）</p><p id="1PS3369I">•  cross-env（跨平台设置 node 环境变量）</p><p>底层架构搭建 1. 初始化项目</p><p id="1PS3369J">新建一个文件夹 utils-demo，执行 npm init，过程会询问构建项目的基本信息，按需填写即可：</p><p>2. 组织工具库业务开发 SRC 目录结构</p><p id="1PS3369K">创建工具库业务开发 src 文件目录，明确怎样规划工具库包，里面放置的是工具库开发需要的业务代码：</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0516%2Fe58be88ej00rur22u004ld200u000fig00id009h.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p>3. 安装项目依赖</p><p id="1PS3369M">要对 typescript 代码进行解析支持需要安装对 ts 支持的依赖，以及对开发的工具的一些依赖包：</p><p></p><p id="1PS3369N">这里遇到一个坑，关于最新 chalk5.0.0 不支持在 nodejs 中 require () 导入，所以锁定包版本 chalk@^4.1.2</p><p id="1PS3369O">要对 typescript 进行解析和编译还需要配置 tsconfig.json，该文件中指定了用来编译这个项目的根文件和编译选项，在项目根目录，使用 tsc --init 命令快速生成 tsconfig.json 文件（前提全局安装 typescript）</p><p></p><p id="1PS3369P">初始化 tsconfig 完成之后，根目录自动生成 tsconfig.json 文件，需要对其进行简单的配置，以适用于 ts 项目，其中具体含义可以参考 tsconfig.json 官网</p><p>4. 组织项目打包构建 SCRIPTS 目录结构</p><p id="1PS3369Q">1) 根目录创建项目打包构建 scripts 脚本文件目录，里面放置的是有关于项目打包构建需要的文件：</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0516%2F5253c911j00rur22v004ad200u000kvg00id00cr.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p id="1PS3369S">生成 rollup 配置项函数核心代码：</p><p></p><p></p><p></p><p id="1PS336A0">2) rollup 在打包构建的过程中需要进行 babel 的转译，需要在根目录添加.babelrc 文件告知 babel：</p><p></p><p></p><p id="1PS336A3">3) 此时距离打包构建工具库只差一步之遥，配置打包脚本命令，在 package.json 中配置命令：</p><p></p><p></p><p id="1PS336A6">4) 执行 yarn build，根目录会构建出一个 lib 文件夹，里面有打包构建的文件，还多了一个 stats.html，这个是可视化并分析 Rollup bundle，用来查看工具模块占用空间：</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0516%2Ff9e59bb6j00rur22w001ld200o000dfg00id00a9.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p id="1PS336A8"> 架构搭建优 化</p><p id="1PS336A9">项目搭建到这里，不知机智的你能否发现问题：</p><p id="1PS336AA">1) 只要添加了一个工具，就要在入口文件导出需要打包构建的工具，在多人开发提交代码的时候将引来冲突的产生：</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0516%2F0ea7dff7j00rur22x0095d200u000kbg00id00cf.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p id="1PS336AC">2) 使用工具库的时候，按需引用的颗粒度太细了，不能满足一些要求颗粒度粗的朋友，比如：</p><p id="1PS336AD">• 我想使用该包里面 date 相关工具，要这样吗？</p><p></p><p id="1PS336AE">能不能这样？</p><p></p><p></p><p id="1PS336AH">• 在一些使用 script 脚本引入的场景下，就仅仅需要 date 相关的工具，要这样吗？</p>