前端构建工具前端构建后端【免费下载链接】razzle✨ Create server-rendered universal JavaScript applications with no configuration项目地址https://gitcode.com/gh_mirrors/ra/razzle点击查看免费下载babel-preset-razzle是 Razzle 框架默认集成的 Babel 预设它为服务端渲染SSR的通用 JavaScript 应用统一提供 JSX、TypeScript、现代 JavaScript 语法转换与运行时代码优化能力。本文以该预设的官方文档为主线结合本仓库中预设的源码实现与 Razzle 内部调用链完整讲解其核心配置、可选参数、在 Razzle 项目内外的接入方式以及通过.babelrc扩展自定义转换的实战方案帮助读者理解并驾驭 Razzle 的编译管线。一、什么是 babel-preset-razzlebabel-preset-razzle是 Razzle 用于编译源码的 Babel 预设包包内通过index.js导出一个标准的 Babel preset 函数。它的定位非常聚焦无论应用代码使用 React、TypeScript 还是现代 ES 语法都能基于NODE_ENV环境变量和 Babel 的 caller 元数据自动产出一套适合服务端 客户端双构建目标的转换配置。在仓库中该包的入口文件为 packages/babel-preset-razzle/index.js包内同时维护了 4 个自定义 Babel 插件位于 packages/babel-preset-razzle/babel-plugins用于处理 JSX pragma 注入、Hook 解构优化等 Razzle 特有的编译细节。二、在 Razzle 项目中使用默认内置官方 README 明确指出在 Razzle 项目中最简单的使用方式就是直接使用 Razzle因为它已经默认内置了该预设。从源码可以印证这一点Razzle 核心包的依赖列表中声明了babel-preset-razzle见 packages/razzle/package.json其 Babel loader 在未发现用户自定义 Babel 配置时会默认追加该预设见 packages/razzle/config/babel-loader/razzle-babel-loader.jsJest 测试转换器在没有.babelrc时同样默认解析该预设见 packages/razzle/config/jest/babelTransform.js。因此通过create-razzle-app创建的项目无需任何额外配置即可获得 ES6 语法、JSX、TypeScript 等编译能力。create-razzle-app 的默认模板也将babel-preset-razzle写入依赖见 packages/create-razzle-app/templates/default/package.json并在模板 README 中说明自带你需要的 ES6 特性通过 babel-preset-razzle。三、在非 Razzle 项目中使用独立接入如果要在不使用 Razzle 构建的项目中单独使用该预设官方文档给出了两步操作第一步安装 Babel。需要先具备babel/core等基础环境。第二步在项目根目录创建.babelrc文件内容如下{ presets: [razzle] }之后 Babel 便会通过名为razzle的预设完成转换。提示该预设要求目标运行环境具备Object.assign。文档明确说明预设中的 babel/plugin-proposal-object-rest-spread 插件使用了useBuiltIns选项转换出的展开/剩余语法会直接调用Object.assign因此必须保证Object.assign可用或被 polyfill例如在旧浏览器上先加载对应的 polyfill。关于useBuiltIns: true的底层含义它让对象展开语法编译为Object.assign({}, ...)而不是引入独立的辅助函数从而避免为每个文件重复注入转换代码有助于减小产物体积但代价是把运行时依赖转移给了宿主环境。四、预设的核心行为环境感知与双目标编译阅读 packages/babel-preset-razzle/index.js 的源码可以还原该预设内部的工作机制。整体流程分为三层环境判定 → caller 元数据读取 → 组装 presets 与 plugins。4.1 基于 NODE_ENV 判定构建模式const env process.env.NODE_ENV; const isProduction env production; const isDevelopment env development; const isTest env test;production开启 prop-types 移除、不注入 JSX 源码调试信息development为babel/preset-react开启development模式自动引入 jsx-source / jsx-self 调试插件test与 development 同样激活 React 开发模式并让preset-env的modules保持自动判定以适配 Jest 的 CommonJS 环境。4.2 通过 caller 元数据区分服务端/浏览器/现代浏览器预设通过api.caller()读取 Razzle loader 注入的三项关键元数据注入逻辑见 razzle-babel-loader.jscaller 字段含义对预设行为的影响supportsStaticESM目标环境是否支持原生 ESM决定transform-runtime是否启用useESModulesisServer当前构建目标是否为 Node 服务端服务端/测试目标默认将preset-envtargets 设为node: current且不注入transform-runtime额外启用 BigInt 语法插件isModern是否为现代浏览器构建结合preset-env.targets.esmodules共同决定isLaxModern进而影响experimental-modern-preset的启用其中服务端/测试目标在没有显式指定 targets 时的默认处理代码如下if ( (isServer || isTest) (!presetEnvConfig.targets || !( typeof presetEnvConfig.targets object node in presetEnvConfig.targets )) ) { presetEnvConfig.targets { // Targets the current process version of Node. This requires apps be // built and deployed on the same version of Node. node: current, }; }值得注意的是注释中强调的限制使用默认node: current意味着应用必须在与构建环境相同版本的 Node 上构建和部署。4.3 三层预设的组合预设最终输出sourceType: unambiguous并按顺序组合以下 presets见 index.jsbabel/preset-env默认配置modules: auto生产/开发下由 webpack 自行处理 import/export 以支持 tree-shaking测试环境自动转为 CommonJS并排除transform-typeof-symbol可通过options[preset-env]覆盖。babel/preset-react默认在 development/test 下开启development: true当 React runtime 不是automatic时注入pragma: __jsx可通过options[preset-react]覆盖。babel/preset-typescript默认开启allowNamespaces、allExtensions、isTSX可通过options[preset-typescript]覆盖设置preset-typescript: false可整体禁用。此外若满足isLaxModern即isModern为真或preset-env.targets.esmodules true且指定了options[experimental-modern-preset]则用该自定义现代预设替换babel/preset-env这是为现代浏览器构建预留的实验性扩展点。五、内置插件清单与作用预设按需组装以下 plugins见 index.js插件触发条件作用说明babel-plugins/jsx-pragmaReact runtime 非 automatic为含 JSX 的模块自动注入import React from react与var __jsx React.createElement免除手动 import Reactbabel-plugins/optimize-hook-destructuring始终启用lib: true将const [state, setState] useState(...)转为对象属性的按需解构配合 tree-shaking 减小体积lib: true表示仅优化来自 React / Preact 的 Hook源码见 optimize-hook-destructuring.jsbabel/plugin-syntax-dynamic-import始终启用支持动态import()语法babel/plugin-proposal-class-properties默认启用可class-properties: false禁用支持 class 字段语法babel/plugin-proposal-object-rest-spread始终启用useBuiltIns: true对象展开/剩余使用内置Object.assignbabel/plugin-transform-runtime仅非服务端构建corejs: false、helpers: true、regenerator: true并按supportsESM决定useESModules复用babel/runtime辅助函数babel-plugin-transform-react-remove-prop-types仅production移除 prop-types 声明removeImport: true同时移除导入babel/plugin-proposal-optional-chaining始终启用可选链?.语法babel/plugin-proposal-nullish-coalescing-operator始终启用空值合并??语法babel/plugin-syntax-bigint仅服务端构建让 Node 端解析 BigInt 字面量babel/plugin-proposal-numeric-separator始终启用数字分隔符1_000_000其中两个自定义插件值得展开说明jsx-pragma 插件源码见 packages/babel-preset-razzle/babel-plugins/jsx-pragma.js它会在 Program 节点退出时检查是否出现JSXElement/JSXFragment若存在且作用域中没有可复用的React绑定则自动在文件头部插入import React from react与var __jsx React.createElement;。如果已有const React require(react)这类 CommonJS 绑定则会把变量声明插入到该 require 语句之后保证执行顺序正确。optimize-hook-destructuring 插件源码见 packages/babel-preset-razzle/babel-plugins/optimize-hook-destructuring.js默认通过/^use[A-Z]/匹配所有 Hook 风格的函数调用将const [a, b] useHook()改写为const { 0: a, 1: b } useHook()这样未被读取的索引不会被 webpack 打包实现 Hook 结果的按需保留。设置onlyBuiltIns: true时仅匹配 React 内置 Hook。六、在 Razzle 中扩展 Babel 配置官方 README 与 create-razzle-app 模板见 packages/create-razzle-app/templates/default/README.md均说明在项目根目录添加.babelrc即可扩展 Babel 转换。此时.babelrc会替换 Razzle 内部的默认 Babel 模板因此至少必须包含默认的razzle/babel预设{ presets: [ razzle/babel, // 必须保留 stage-0 ], plugins: [ // 其他自定义插件 ] }这里的razzle/babel是 Razzle 包对外暴露的入口见 packages/razzle/babel.js其内容即module.exports require(babel-preset-razzle)等价于直接使用babel-preset-razzle。仓库中的示例examples/with-custom-babel-config演示了这一用法其.babelrc保留了razzle/babel预设并追加了babel/plugin-proposal-do-expressions插件见 examples/with-custom-babel-config/.babelrc随后在src/Home.js中直接使用了实验性的do表达式语法见 examples/with-custom-babel-config/src/Home.js并通过npx create-razzle-app --example with-custom-babel-config with-custom-babel-config创建、yarn start运行见 examples/with-custom-babel-config/README.md。运行机制razzle-babel-loader在config阶段检查cfg.hasFilesystemConfig()即是否存在.babelrc/babel.config.js存在则打印使用外部 Babel 配置的日志并交由 Babel 自行读取否则才把内置的 razzle 预设追加进去见 packages/razzle/config/babel-loader/razzle-babel-loader.js。七、按构建目标拆分 Babel 配置.babelrc.node / .babelrc.webRazzle 还支持为服务端node与浏览器web两个构建目标分别配置 Babel。启用方式是在razzle.config.js中设置enableTargetBabelrc: true默认值为false见 packages/razzle/config/defaultOptions.js// razzle.config.js module.exports { options: { enableTargetBabelrc: true } };启用后Razzle 会在构建时把 Babel 的configFile指向项目根目录下的.babelrc.node服务端目标或.babelrc.web浏览器目标对应实现位于 packages/razzle/config/createConfigAsync.jsconfigFile: razzleOptions.enableTargetBabelrc ? path.resolve(paths.appPath, .babelrc.${target}) : undefined,仓库示例examples/with-custom-target-babel-config演示了该用法它的 .babelrc.node 与 .babelrc.web 内容一致均保留razzle/babel预设并追加babel/plugin-proposal-do-expressions插件。这一机制非常适合服务端用一套转换、浏览器端用另一套转换的场景例如只在某一端启用特定语法插件或按需加载 polyfill。八、源码级补充Razzle 构建管线中的预设增强除了预设本身Razzle 的 loader 还会在编译时叠加若干增强帮助理解预设在实际构建中的完整形态见 packages/razzle/config/babel-loader/razzle-babel-loader.jsReact Fast Refresh 集成当启用shouldUseReactRefresh时会前置注入react-refresh/babel插件客户端构建还会额外注入babel-preset-razzle/babel-plugins/no-anonymous-default-export该插件会在遇到匿名默认导出函数时发出警告——因为匿名箭头函数/匿名函数声明会导致 Fast Refresh 无法保留组件本地状态源码见 packages/babel-preset-razzle/babel-plugins/no-anonymous-default-export.js警告信息由 loader 的onWarning回调输出。CommonJS 兼容当源码出现module.exports且不是现代构建时追加babel-preset-razzle/babel-plugins/commonjs插件将含module.exports的文件转译为 CommonJS避免 Babel 注入的import语句与 webpack 的模块解析冲突见 packages/babel-preset-razzle/babel-plugins/commonjs.js。环境变量内联通过babel-plugin-transform-define将process.env.NODE_ENV、typeof window、process.browser等按目标构建时静态替换见 razzle-babel-loader.js。现代构建isModernloader 提供razzleBabelPresetModern包装函数将preset-env的 targets 改为esmodules: true并排除transform-regenerator、transform-async-to-generator实现面向现代浏览器的更小产物见 razzle-babel-loader.js。Babel 缓存loader 默认开启基于内容哈希的缓存目录cache/razzle-babel-loader缓存标识包含 server/modern/development 等维度可通过enableBabelCache控制见 razzle-babel-loader.js 与 defaultOptions.js。九、总结babel-preset-razzle虽然只是一个预设包但它集中体现了 Razzle零配置 可逃生舱的设计哲学默认情况下它为 Razzle 项目提供涵盖 React JSX、TypeScript、现代语法、运行时辅助与生产优化的完整编译能力当项目需要定制时既可以通过.babelrc追加插件也可以借助razzle/babel入口独立于 Razzle 使用甚至可以为 node 与 web 两个构建目标分别维护 Babel 配置。理解预设内部的环境判定、caller 元数据与插件组合逻辑是在 Razzle 项目中排查编译问题、定制转换行为的必备基础。参考文件索引预设入口源码预设包配置自定义 Babel 插件目录Razzle 的 Babel loader 集成Razzle 的 Jest Babel 转换器Razzle 默认构建选项目标级 Babel 配置实现自定义 Babel 配置示例按目标拆分 Babel 配置示例赞分享前端构建工具前端构建后端【免费下载链接】razzle✨ Create server-rendered universal JavaScript applications with no configuration项目地址https://gitcode.com/gh_mirrors/ra/razzle点击查看免费下载相关推荐razzle-plugin-eslint为 Razzle 通用应用零配置接入 ESLint 的插件深度解析razzle plugin eslint为 Razzle 通用应用零配置接入 ESLint 的插件深度解析 razzle plugin eslint 是 Ra前端构建工具前端构建后端emotion/babel-preset-css-prop 深度指南一行配置开启 css prop 的 Babel Preset 全解析emotion/babel preset css prop 深度指南一行配置开启 css prop 的 Babel Preset 全解析 emotion/前端深入解析 babel-preset-umiUmi 框架的 Babel 编译预设与全部配置选项深入解析 babel preset umiUmi 框架的 Babel 编译预设与全部配置选项 导读 babel preset umi 是 Umi 框架Rea前端开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考