用esbuild打包一个React库

前言esbuild的大名相信大家都听过。它是一个用GO语言编写的非常快速的Javascript打包工具。它是由figma的ctoEvanWallace编写的。一个30分钟的webpack项目使用esbuild可以在几分钟内运行。本文将记录使用esbuild打包一个React库。需求这里我打算开发一个react-checkbox作为例子复制代码因为checkbox只有两个值：选中（checked）或未选中（unchecked），在视觉上checkbox有checked、unchecked、indeterminate（不确定）三种状态，实现全选效果时可以使用indeterminate属性，对于indeterminate状态在HTMLSet中是无法显示的复选框的状态不确定。因为HTML中没有indeterminate属性，可以设置constcheckbox=document.getElementById("checkbox");checkbox.indeterminate=true通过Javascript脚本；复制代码的效果如下：所以我们的需求是给checkbox添加一个indeterminate属性项目初始化首先我们创建一个文件夹，初始化npm.mkdirreact-checkbox&&cdreact-checkbox&&npminit--yes复制代码我们使用typescript，当然我们还需要安装react和react-domnpmiesbuildtypescript@types/react@types/react-dom--save-dev复制代码然后我们在根目录下创建一个文件./tsconfig。json{"compilerOptions":{"outDir":"./lib","target":"es6","module":"commonjs","noImplicitAny":true,"strictNullChecks":true,"declaration":true“sourceMap”：true，“esModuleInterop”：true，“jsx”：“react-jsx”，“typeRoots”：[“node_modules/@types”]}，“include”：[./src//.tsx","./src//.ts","example/index.tsx"],"exclude":["node_modules"]}复制代码代码实现接下来我们创建src/checkbox.tsx，下面是实现代码import{ReactElement,CSSProperties,ChangeEvent}from"react";exportinterface复选框道具{已检查？：布尔值；不确定？：布尔值；班级名称？：细绳;风格？：CSS属性；禁用？：布尔值；onChange?:(e:ChangeEvent)=>void;}constCheckbox=({checked=false,indeterminate=false,className="",style={},disabled=false,onChange,}:CheckboxProps)：ReactElement=>{return({if(input){input.checked=checked;input.indeterminate=不确定为布尔值;input.disabled=disabledasboolean;}}}onChange={(e)=>{if(onChange){onChange(e);}}}/>);};exportdefaultCheckbox;复制代码很简单，直接使用ref设置dom属性就可以了代码打包然后我们在项目根目录下创建./esbuild.js文件，写入打包配置constesbuild=require('esbuild');esbuild.build({entryPoints:['src/checkbox.tsx'],outdir:'lib',bundle:true,sourcemap:true,minify:true,splitting:true,format:'esm',target:['esnext']}).catch(()=>process.exit(1));代码entryPoints和ourdir指定了哪些文件需要输入并打包到输出目录中。bundle表示是否递归引用打包文件。sourcemap表示是否生成sourcemapsourcemap文件minify表示是否压缩codesplitting表示multi-entry是否提取公共代码是否单独打包import()异步文件target定义了我们要输出的javascript类型format是设置输出的生成的javascript文件格式，有3个可选值，cjs、esm、iifeiife格式代表“立即调用函数表达式”，可以在浏览器中运行。cjs格式代表“CommonJS”并在节点中运行。esm格式代表“ECMAScript模块”，可以在浏览器中使用，也可以在node中使用，然后使用node./esbuild.js打包成功，但是一个typescript项目最终会提供d.ts供外部使用，但是有esbuild的最终build中没有d.ts，所以我们需要单独运行tsc，稍微修改一下上面的代码。我们将以下代码“脚本”添加到package.json：{"ts-types":"tsc--emitDeclarationOnly--outDirlib","build":"rm-rflib&&node./esbuild.js&&npmrunts-types"}，复制代码或者使用tsc的emitDeclarationOnly生成d.ts然后我们在package.json中指定入口文件"main":"lib/checkbox.js","module":"lib/checkbox.js"js","types":"lib/checkbox.d.ts","files":["lib"]复制代码并打包。如果您需要发送包裹，我们需要添加一个测试。本地预览当然我们的工程是需要预览的。创建一个example/index.tsx文件importReact,{ReactElement}from"react";import{render}from"react-dom";importCheckboxfrom"../src/checkbox";functionApp():ReactElement{return(