Prettier 构建脚本完全指南：从 yarn build 到 npm 发布的产物流水线

Prettier 构建脚本完全指南从 yarn build 到 npm 发布的产物流水线【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettierPrettier 的发布包并非直接拷贝源码而是通过scripts/build下的一套构建脚本用 esbuild 将src目录下的源码与各语言解析器打包成面向 Node.js、浏览器与 Playground 的多格式产物。本文以仓库中的 scripts/build/README.md 为骨架结合构建器、esbuild 插件与包配置源码完整讲解构建命令、全部 CLI 标志、包与模块的划分、产物类型以及体积分析、调试等进阶用法读完即可独立执行并验证一次完整的 Prettier 构建。前置要求与入口根据 scripts/build/README.md构建脚本要求Node.js 版本 16.16。需要注意的是仓库根目录 package.json 中engines.node为22这是运行整个开发仓库的要求而构建产物会通过PRODUCTION_MINIMAL_NODE_JS_VERSION定义于 scripts/utilities/index.js值为14重新写入发布包保证打包后的dist产物可以在更低的 Node.js 版本上运行。构建入口定义在根目录 package.jsonbuild: node ./scripts/build/build.js入口脚本 scripts/build/build.js 的顶层流程如下调用 scripts/build/parse-arguments.js 解析命令行标志按--package过滤出要构建的包默认构建全部 4 个包若指定--clean先删除dist目录依次遍历每个包的模块与文件调用对应 builder 执行打包并在终端输出DONE / FAIL / SKIPPED状态与耗时。构建的核心是 esbuild统一的构建器在 scripts/build/builders/javascript-module.js 中实现它组装了replace-module、evaluate、primitive-define、umd、visualizer等自定义 esbuild 插件见 scripts/build/esbuild-plugins/ 目录。基础用法与--package标志构建全部包yarn build不传任何标志时会构建 scripts/build/packages/index.js 中注册的全部 4 个包包名配置源文件说明prettierscripts/build/packages/prettier.js主包含核心 API、CLI、文档模块与全部内置语言插件prettier/plugin-hermesscripts/build/packages/plugin-hermes.jsHermes 解析器插件prettier/plugin-oxcscripts/build/packages/plugin-oxc.jsOxc 解析器插件WASM 版面向浏览器prettier/plugin-yukuscripts/build/packages/plugin-yuku.jsYuku 解析器插件只构建指定包yarn build --package prettier yarn build --package prettier --package prettier/plugin-oxc--package可以重复出现且多个取值必须唯一。在 scripts/build/parse-arguments.js 中重复的包名会直接抛出--package should be unique.而在 scripts/build/build.js未知的包名会抛出Unknown package ...。未指定时默认构建全部 4 个包。--clean清理输出目录yarn build --clean构建前删除dist目录路径由 scripts/utilities/index.js 中的DIST_DIR定义为仓库根目录下的dist。实现位于 scripts/build/build.js若dist存在且是目录则递归删除若存在但不是目录则报错。源码注释提示目前只清理了顶层dist目录尚未细化到各包自己的子目录因此多包开发时建议始终带上--clean避免旧产物残留。--playground仅构建网站所需产物yarn build --playground该标志让构建只产出 website/ 在线 Playground 需要的文件其余文件会打印SKIPPED状态跳过。实现上每个文件在 scripts/build/packages/prettier.js 中被标记playground: true例如standalone.mjsscripts/build/build.js 会跳过未标记的文件。插件文件中则只有 ESM 格式产物被标记为 playground 所需见 scripts/build/packages/prettier.js 的playground: output.format esmUMD 版本不会为此单独构建。产物格式与模块划分Prettier 的发布包按三种格式输出扩展名定义于 scripts/build/packages/prettier.js扩展名格式用途.mjsESMNode.js 环境与浏览器 ESM 引入.cjsCommonJSNode.jsrequire如src/index.cjs.jsUMD浏览器script直接引入挂在全局变量上包内模块modules由 scripts/build/packages/prettier.js 组织为Main核心 APIindex.js/index.cjs/standalone.js、CLIbin/prettier、internal/legacy-cli、internal/experimental-cli及 worker、Doc文档构建 APIdoc、各语言插件plugins/*以及Meta filespackage.json、README.md、LICENSE、THIRD-PARTY-NOTICES.md。面向 Node.js 的文件由createNodejsFileConfig生成scripts/build/packages/config-helpers.js根据入口是.cjs还是.js自动选择 CJS 或 ESM 输出。面向浏览器/通用环境的文件由createUniversalFileConfig生成同文件第 101 行起同时产出.mjs与 UMD.js两种格式UMD 全局变量名由umdVariableName指定例如核心 API 的prettier、文档模块的doc插件则是prettierPlugins.pluginName见 scripts/build/packages/prettier.js。构建指定文件--file与--save-as--file只构建一个或多个特定文件路径相对于dist目录yarn build --fileesm/parser-babel.mjsyarn build --filestandalone.js --fileparser-meriyah.js在 scripts/build/parse-arguments.js 中每个--file值都会与DIST_DIR拼接成绝对路径存入Setscripts/build/build.js 逐文件比对命中才执行构建。--file适合调试单个解析器或 API 入口避免全量构建。--save-as把单个文件的产物保存到其他位置只能与一个--file搭配使用yarn build --fileparser-babel.js --save-asbabel-for-test.js校验逻辑在 scripts/build/parse-arguments.js文件数必须恰好为 1且--save-as只能是相对路径不能越出dist/prettier目录。该仓库正是用此机制生成vendors/babel-code-frame-for-test.js等测试专用文件见 scripts/build-babel-code-frame-for-test.js。体积分析--print-size、--compare-size与--report--print-size打印产物体积yarn build --print-size每个文件构建完成后打印其字节数经过pretty-bytes格式化实现于 scripts/build/build.js。--compare-size与上一发布版本对比yarn build --compare-size将本次构建产物与node_modules/包名/中已安装的上一发布版本逐个对比打印体积差值变大显示黄色、变小显示绿色新文件显示[NEW FILE]。实现位于 scripts/build/build.js。注意两个限制见 scripts/build/parse-arguments.js不能与--no-minify同时使用不能与--save-as同时使用。--report可视化分析包体积yarn build --reportall yarn build --reportstdout --reporttext --reporthtml--report可重复指定三种 reporter 格式值行为html生成esbuild-visualizer交互式 HTML 报告保存为产物名.report.htmltext生成纯文本报告保存为产物名.report.txtstdout在控制台直接打印分析报告--reportall等价于同时指定三种格式但不能与其他--report混用scripts/build/parse-arguments.js。报告由 scripts/build/esbuild-plugins/visualizer.js 实现它开启 esbuild 的metafile在构建结束时调用esbuild.analyzeMetafiletext/stdout或esbuild-visualizerhtml将体积分析文件写到产物旁。该功能对排查哪个依赖把包撑大了非常有效例如某次引入新的解析器依赖后可借此确认体积增长的来源。调试用--minify与--no-minify默认是否压缩由包配置决定config.mjs/bundler.mjs中控制这两个标志用于覆盖默认行为仅供调试官方建议与--file搭配使用yarn build --fileindex.js --minify yarn build --fileparser-babel.js --no-minify二者不能同时使用scripts/build/parse-arguments.js。--no-minify的产物便于在调试器中阅读打包后的代码而--minify可用于验证压缩路径下的正确性。包配置的源码级细节prettier主包scripts/build/packages/prettier.js 是整个构建系统的核心配置它通过replaceModule对第三方依赖做源码级裁剪与替换这是 Prettier 能把体积控制在合理范围的关键手段典型手法包括移除未用功能将babel/parser中未使用的 JSX 实体解码替换为const entity undefined;把espree的 token 翻译器直接删掉options.tokens true替换为false见 scripts/build/packages/prettier.js替换实现文件将postcss的source-map相关模块替换为空实现类避免打入source-map依赖scripts/build/packages/prettier.js注入垫片为浏览器环境提供Buffer、structuredClone等全局对象的兜底实现移除调试代码把glimmer/syntax中的DEBUG分支替换为false把 Angular 编译器里大量与格式化无关的访问器实例删除安全加固将typescript-eslint/typescript-estree中读取process.cwd()、解析项目 tsconfig 的逻辑替换为占位符/空实现既减小体积也避免打包产物泄露本地路径scripts/build/packages/prettier.js。CLI 部分则把bin/prettier.cjs、传统 CLIsrc/cli/index.js与实验性 CLIsrc/experimental-cli/分别打包并通过 external 与替换把prettier/cli、json5、js-yaml、smol-toml等依赖裁剪为最小导出详见 scripts/build/packages/prettier.js。插件包三个内置插件包prettier/plugin-hermes、prettier/plugin-oxc、prettier/plugin-yuku各自定义sourceDirectory与distDirectory。其中 scripts/build/packages/plugin-oxc.js 比较特殊浏览器版index.browser.mjs会先通过buildOxcWasmParserscripts/build/hacks/build-oxc-wasm-parser.js编译 Oxc 的 WASM 解析器再以replaceModule注入产物且仅该浏览器版被标记为playground: true。Meta 文件生成package.json、LICENSE、README.md与THIRD-PARTY-NOTICES.md由 scripts/build/packages/config-helpers.js 统一生成。其中发布版package.jsonscripts/build/builders/package-json.js只保留白名单字段并把engines.node改写为14PRODUCTION_MINIMAL_NODE_JS_VERSION、bin指向打包后的 CLI 文件、files字段按实际产物文件列表重写、附带publishConfig。THIRD-PARTY-NOTICES.md由 scripts/build/builders/dependencies-license.js 从依赖许可信息汇总生成满足发布合规要求。验证构建产物构建完成后所有产物输出到dist/目录可按包结构验证yarn build --clean --package prettier ls dist/prettierdist/prettier下应包含index.mjs、index.cjs、standalone.js、standalone.mjs、doc.js/doc.mjs、plugins/各语言解析器、internal/CLI 相关以及bin/prettier、package.json、THIRD-PARTY-NOTICES.md等文件。仓库的发布流程 scripts/release/steps/generate-bundles.js 正是先调用本构建系统生成dist再据此发布到 npm测试侧则有 scripts/tools/bundle-test/ 对打包产物做冒烟验证。若要单独验证某个插件可执行yarn build --package prettier/plugin-oxc --print-size --reportstdout该命令只构建 Oxc 插件包、打印体积并输出体积分析报告是日常开发调试插件产物体积的推荐组合。小结Prettier 的构建脚本是一个基于 esbuild 的产物流水线入口 scripts/build/build.js 负责调度与状态输出scripts/build/parse-arguments.js 负责全部标志的校验各包配置scripts/build/packages/声明模块、产物格式与依赖裁剪规则。掌握--package、--clean、--playground、--file/--save-as、--print-size/--compare-size/--report、--minify/--no-minify这些标志的组合用法即可按需完成全量发布构建、仅构建网站产物、单文件调试、依赖体积审计等不同任务。【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考