前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载automattic/calypso-build是 Automattic 在 wp-calypso 仓库中维护的一套 Webpack/Babel/PostCSS 构建配置与脚本集合旨在统一旗下产品使用的 JavaScriptESNext/JSX与 Sass 方言并降低每个项目的维护成本。本文将围绕 packages/calypso-build/README.md 的系统化讲解结合该包的真实源码带你掌握从一条命令打包 Gutenberg 块到自定义 Webpack/PostCSS 配置、再到自动生成 RTL 样式的完整实践路径。一、它是什么一套开箱即用、可按需定制的构建工具calypso-build不是一个全新的打包器而是对 Webpack 5 生态的一层精简化包装它把 WordPress.com 各产品线多年沉淀下来的构建约定ESNext/JSX 转译、Sass 编译、RTL 样式生成、依赖提取固化为一套默认配置同时保持 Webpack CLI 的原始接口让熟悉 Webpack 的开发者几乎零学习成本即可上手。从包的元数据packages/calypso-build/package.json可以看到它的定位description: Shared Calypso build configuration files.关键字包括babel、build、bundle、compile、config、webpack、wordpress并对外暴露四个可执行命令bin字段calypso-build主构建命令基于 Webpack CLItranspile纯 Babel 转译命令ESM/CJS 双输出copy-assets资源复制命令build-app-languages基于 pot 文件与远程语言库生成翻译文件。核心功能README Features 一节可概括为三点开箱即用的 ESNext/JSX 转译无需任何 Babel 配置即可编译现代 JavaScript 与 JSXSass 打包支持在源码中通过import style.scss引入样式文件自动生成 RTL 版本为每个样式文件自动产出对应的.rtl.css从右到左的阿拉伯语、希伯来语等场景。其设计哲学是极简形态极易调用、复杂需求可按需深入定制下面我们逐步展开。二、快速上手从一个入口文件到 dist/ 产物2.1 安装在任意项目中将该包加入开发依赖yarn add --dev automattic/calypso-build2.2 最小构建脚本在package.json中添加build脚本唯一必需的参数是一个入口文件{ scripts: { build: calypso-build ./src/editor.js } }执行yarn build后默认会在当前工作目录下生成dist/子目录内含构建产物——通常是一个.js、一个.css和一个.rtl.css文件。.rtl.css由打包流程中内置的 RTL 插件自动产出无需任何额外配置。2.3 修改输出目录--output-path如果希望产物输出到其他位置{ scripts: { build: calypso-build --output-path./build ./src/editor.js } }从 webpack.config.js 的源码可见output-path的默认值正是path.join( process.cwd(), dist )即当前工作目录下的dist与文档描述完全一致。2.4 多入口打包可以一次定义多个入口每个入口对应一个独立 bundle{ scripts: { build: calypso-build --output-path./build editor./src/editor.js view./src/view.js } }入口采用name./path/to/entry.js的键值对语法最终每个入口会生成各自的 JS 与 CSS 产物。文件名默认遵循[name].js模式output-filename默认值见 webpack.config.js因此上述配置会得到editor.js、view.js及对应的样式文件。三、CLI 设计刻意贴近 Webpack 而非另起炉灶README 明确说明calypso-build是 Webpack CLI 的一层薄封装——它只是把内置的webpack.config.js指给 Webpack 官方命令行工具。这一决策背后是项目的历史经验此前基于 SDK 的方案最终总是在重复实现 Webpack 已有的功能因此这次选择直接复用 Webpack 的接口与行为。其实现方式在 bin/calypso-build.js 中一目了然if ( ! process.argv.some( ( arg ) arg.startsWith( --config ) ) ) { let webpackConfig path.join( process.cwd(), webpack.config.js ); if ( ! fs.existsSync( webpackConfig ) ) { webpackConfig path.join( __dirname, .., webpack.config.js ); // 回退到本包内置配置 } process.argv.push( --config, webpackConfig ); } require( webpack-cli/bin/cli );即若当前目录存在webpack.config.js则使用项目自己的配置否则使用包内置的默认配置。随后直接加载webpack-cli完成实际构建。这也意味着所有 Webpack CLI 支持的参数--entry、--output-path、--output-filename、--output-library-target等都可以原样透传。四、--env WP面向 Gutenberg 块的一键依赖提取与 JSX 转译内置webpack.config.js引入了一个颇具 WordPress/Gutenberg 特色的环境选项WP{ scripts: { build: calypso-build ./src/editor.js --env WP } }该选项有双重作用自动推断并提取公共依赖Webpack 会启用wordpress/dependency-extraction-webpack-plugin从打包的源码中识别出 Gutenberg 块常用的 NPM 包所有wordpress/作用域下的包、lodash、React、jQuery 等生成一个.asset.php文件内含依赖数组可直接配合 WordPress 的wp_enqueue_script使用。启用时代码见 webpack.config.jsnew DependencyExtractionWebpackPlugin( { injectPolyfill: true } )。JSX 转译为wordpress/element与普通 React 项目不同Gutenberg 块要求 JSX 编译为wordpress/element即 WordPress 自己维护的 React 兼容层而非直接编译为 React 组件。这一行为通过注入automattic/calypso-babel-config/presets/wordpress-element预设实现见 webpack.config.js。生成的.asset.php与对应的 JS 产物配合是当前 apps/happy-blocks 这类块项目构建→注册脚本→入队标准流程的关键一环。五、内置 Webpack 配置源码解析每一条默认规则要真正用好calypso-build值得深入读一遍内置的 packages/calypso-build/webpack.config.js。它导出一个与 Webpack 签名一致的函数getWebpackConfig( env, argv )方便 CLI 逐参数覆盖。其关键组成如下5.1 环境与产物输出mode依据NODE_ENV ! production自动切换为development或productionL75-L77devtool开发环境默认eval生产环境为false除非设置SOURCEMAP环境变量见 L78output默认pathdist、filename[name].js、libraryTargetwindow、chunkLoadingGlobalwebpackChunkwebpackL79-L85bail: ! isDevelopment生产构建遇错即停。5.2 JavaScript 转译thread-loader babel-loader转译规则封装在 webpack/transpile.js 中对/\.[jt]sx?$/文件依次经过thread-loader多线程并行加速大项目转译babel-loader默认读取项目根目录的babel.config.js若不存在则回退到automattic/calypso-babel-config/presets/default并在--env WP时追加wordpress-element预设同时缓存到.cache/babel见 webpack.config.js。值得注意配置对node_modules默认整体排除转译exclude: /node_modules\//但针对少量需要转译的依赖做了白名单兜底——shouldTranspileDependencywebpack/util.js会逐个匹配白名单如automattic/calypso-polyfills/、d3-array/、debug/、query-string/等确保这些已放弃旧 Node 支持的包也能被正确转译。5.3 Sass 处理与 RTL 生成样式链封装在 webpack/sass.js 中对\.(sc|sa|c)ss$文件依次经过MiniCssExtractPlugin.loader → css-loader → postcss-loader → sass-loader其中css-loader 过滤掉以/开头的绝对路径避免与站点的 base URL 语义冲突sass.jssass-loader 使用 Dart Sass 的 modern-compiler API并设置quietDeps: true抑制来自node_modules上游样式的弃用警告sass.js。RTL 能力由三个插件协同完成sass.jsMiniCssExtractPlugin负责抽出 CSS 文件MiniCSSRuntimeFullHashPlugin让运行时引用的文件名与内容哈希保持一致MiniCSSWithRTLPluginautomattic/webpack-rtl-plugin负责生成.rtl.css变体。5.4 生产压缩按 browserslist 自动选 ES 版本optimization.minimizer由 webpack/minify.js 提供JS 走TerserPlugin内部使用 SWC 的swcMinifyCSS 走CssMinimizerPlugin。其亮点是chooseTerserEcmaVersionminify.js根据browserslist配置逐一检测各浏览器对箭头函数、class、async、可选链等特性的支持程度自动为 Terser 挑选 ES5/ES2015/…/ES2020 中最合适的目标版本避免无谓降级。同时默认保留__、_n、_nx、_x等 i18n 函数名不被压缩混淆mangle.reserved见 minify.js这对 WordPress 生态的翻译机制至关重要。5.5 默认插件与环境变量注入内置配置还默认注入webpack.config.jsDefinePlugin注入process.env.NODE_ENV、typeof window、FORCE_REDUCED_MOTION无障碍动画偏好等常量IgnorePlugin忽略moment的./locale目录大幅缩小产物体积DuplicatePackageCheckerPlugin检测重复依赖可通过DISABLE_DUPLICATE_PACKAGE_CHECK环境变量关闭--env WP时额外挂载依赖提取插件。5.6 资源文件处理图片/字体等静态资源由 webpack/file-loader.js 处理对gif/jpg/jpeg/png/svg/webp/mp4使用 Webpack 5 的asset/resource模块默认输出到images/目录文件名带内容哈希[name]-[hash][ext]。六、进阶定制一使用自己的 Webpack 配置当 CLI 参数无法满足需求例如需要挂载额外的 loader 或插件时可以在项目根目录编写webpack.config.js调用包导出的配置函数进行扩展。README 给出了标准范式——导出一个接收( env, argv )的函数const getBaseWebpackConfig require( automattic/calypso-build/webpack.config.js ); const CopyWebpackPlugin require( copy-webpack-plugin ); function getWebpackConfig( env, argv ) { const webpackConfig getBaseWebpackConfig( env, argv ); return { ...webpackConfig, plugins: [ ...webpackConfig.plugins, new CopyWebpackPlugin( [ { from: src/index.json, to: index.json, }, ] ), ], }; } module.exports getWebpackConfig;由于内置函数签名与 Webpack 官方导出函数式配置完全一致见 webpack.config.js你可以放心地解构并覆盖entry、output、module.rules、plugins等任意字段。扩展后的自定义配置同样支持被--config指定到任意路径{ scripts: { build: calypso-build --config./config-files/webpack.config.js ./src/editor.js } }calypso-build会自动拾取与调用目录同级的webpack.config.js这正是 bin/calypso-build.js 中先找项目配置、找不到再用内置配置的逻辑。七、进阶定制二使用自己的 PostCSS 配置样式处理的另一个可定制点是 PostCSS。在项目根目录添加postcss.config.js即可覆盖默认行为。README 给出的例子是将颜色变量从automattic/calypso-color-schemes注入并为 IE11 等旧浏览器补充前缀module.exports () ( { plugins: { postcss-custom-properties: { importFrom: [ require.resolve( automattic/calypso-color-schemes ) ], }, autoprefixer: {}, }, } );内置的默认 PostCSS 配置packages/calypso-build/postcss.config.js只包含两个插件postcss-custom-propertiesCSS 自定义属性处理与autoprefixer浏览器前缀补全。查找逻辑在 webpack.config.js优先读取当前目录的postcss.config.js不存在时回退到包内置配置。基于 postcss-loader 的配置级联机制config cascade该约定与社区常见实践保持一致。八、其他内置命令transpile 与资源管理除了主构建命令该包还提供若干辅助脚本transpilebin/transpile.js面向仅需转译、无需打包的库场景。默认将项目src/目录下的.js/.jsx/.ts/.tsx通过automattic/calypso-babel-config/presets/default转译输出 ESMdist/esm与 CJSdist/cjs两套产物排除**/test/**支持--esm与--cjs参数只输出其中一种格式。这对需要同时发布 ESM 与 CommonJS 双格式的 npm 包非常实用copy-assets用于将项目静态资源复制到目标位置build-app-languages接受一个pot文件并基于https://widgets.wp.com/languages/calypso语言库生成各语言的翻译文件见 CHANGELOG.md trunk 条目。九、仓库内真实应用happy-blocks 的构建实践calypso-build并非停留在文档层面的抽象而是 wp-calypso 仓库内多个产品线的实际构建引擎。以 apps/happy-blocks/package.json 为例其构建脚本全部基于calypso-build --env blockxxx模式每个 Gutenberg 块一个构建任务build:pricing-plans: calypso-build --env blockpricing-plans, build:search-card: calypso-build --env blocksearch-card, build:universal-header: calypso-build --env blockuniversal-header通过--env block...将块名传入配置函数配合--env WP的依赖提取即可为每个块产出 JS、CSS、RTL CSS 与.asset.php依赖清单——这正是本文所讲的默认配置与env机制在真实产品中的直接落地。类似的模式也广泛存在于apps/wpcom-block-editor等基于该包构建的块项目中。十、小结automattic/calypso-build的定位可以概括为约定优于配置、但保留全量逃生舱默认配置即涵盖 ESNext/JSX 转译、Sass 编译、RTL 样式生成、生产压缩与依赖提取一条命令即可产出可用的 Gutenberg 块产物而当项目需要自定义 loader、插件或 PostCSS 链时其函数式 Webpack 配置导出与标准 config 级联机制又提供了无痛扩展路径。理解其 webpack.config.js 与各 loader 子模块transpile.js、sass.js、minify.js的实现细节将帮助你在迁移、调试或深度定制构建流程时游刃有余。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐基于 automattic/calypso-babel-config 的 Calypso 统一 Babel 构建配置实战指南基于 automattic/calypso babel config 的 Calypso 统一 Babel 构建配置实战指南 导读 automattic/c前端CMSParalus vs 传统K8s管理工具为什么选择这个CNCF沙箱项目Paralus vs 传统K8s管理工具为什么选择这个CNCF沙箱项目 Paralus是一个开源的Kubernetes管理工具作为CNCF沙箱项目它专注wp-calypso 中 Automattic for AgenciesA4A前端的本地开发环境搭建与运行指南wp calypso 中 Automattic for AgenciesA4A前端的本地开发环境搭建与运行指南 Automattic for Agencie前端CMS上一篇本地化蛋白质结构预测LocalColabFold完整使用指南下一篇让大模型输出按你的格式说话Semantic Kernel 内容格式化完整实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考