Meteor 构建系统Build Tool完全指南编译、转译、CSS 处理、HMR 与自定义构建插件【免费下载链接】meteorMeteor, the JavaScript App Platform项目地址: https://gitcode.com/gh_mirrors/me/meteor本篇技术指南围绕 v3-docs/docs/about/build-tool.md 展开系统讲解 Meteor 构建工具即你安装 Meteor 后获得的命令行工具如何编译、运行、部署和发布应用与包。读完本文你将掌握Meteor Bundler 与 Rspack 两种打包方案的选择依据、JavaScript 多语言转译ES2015/SWC/Babel/CoffeeScript/TypeScript、CSS 处理与预处理器、热模块替换HMR的启用方式以及如何编写自定义构建插件——并能在 当前仓库 的源码中找到每一环节的实现证据。什么是 Meteor 构建系统Meteor 构建系统就是安装 Meteor 后得到的那个命令行工具。你通过在终端输入meteor命令可附带参数来运行它。关于所有命令的完整列表可以阅读 CLI 相关文档 或在终端输入meteor help。Meteor 构建工具负责编译、运行、部署和发布你的所有 Meteor 应用与包。它是 Meteor 对 Grunt、Gulp、Webpack、Browserify、Nodemon 等工具所解决问题的内置解决方案——但它采用零配置哲学你几乎看不到大型构建配置文件构建过程几乎完全通过向应用添加/移除包、以及把文件放入特定命名的目录来配置。这一点与 Gulp/Webpack 那种显式配置文件驱动的构建系统截然不同。从 Meteor 3.3 开始你可以使用Modern Build Stack现代构建栈其中包含基于 SWC 的转译优化从 Meteor 3.4 起可以集成Rspack作为应用打包器以获得更快的构建、更小的包体积和现代打包特性。详见 Modern Build Stack 总览。文件变更自动重载执行meteor命令启动构建工具后建议让它在开发期间保持运行。构建工具通过一套文件监视系统自动检测相关文件的变化重新编译必要部分并按需重启客户端或服务端环境。可以选配使用 热模块替换HMR让变更反馈更快。从源码看文件监视能力内置于构建工具核心meteor命令由 tools/cli 下的命令处理器驱动配合parcel/watcherModern Build Stack 启用后使用原生递归文件监视实现跨平台的高效变更检测。通过构建插件编译文件Meteor 构建工具的核心职能是运行构建插件build plugins。这些插件定义了你应用构建流程的不同部分。例如要在应用中获得最新的 ES2015 特性只需添加ecmascript包meteor add ecmascript该包提供 ES2015 模块支持让你能用import/export更精细地控制文件加载顺序。随着新版本 Meteor 为该包加入新特性你无需任何额外配置即可自动获得。从源码看ecmascript本身就是一个构建插件——packages/ecmascript/package.js 中通过Package.registerBuildPlugin注册了名为compile-ecmascript的编译插件依赖babel-compiler与react-fast-refreshPackage.registerBuildPlugin({ name: compile-ecmascript, use: [babel-compiler, react-fast-refresh], sources: [plugin.js], });控制要构建哪些文件默认情况下Meteor 会根据应用的文件结构约定与默认文件加载顺序规则构建文件。你可以通过.meteorignore文件覆盖默认行为——它使用与.gitignore相同的模式语法让构建系统忽略某些文件和目录。这些文件可出现在应用或包的任意目录中对该目录树以下的文件生效。.meteorignore与文件监视系统完全集成因此在开发过程中可以随时添加、删除或修改它们。合并与压缩代码Meteor 构建工具会自动拼接你的应用资源文件并在生产环境中压缩这些包bundle。这意味着你可以在源码中随意写注释和空白、把代码拆分成任意多个文件而无需担心应用性能与加载时间。默认情况下这项能力由standard-minifier-js和standard-minifier-css两个包提供其中 JavaScript 压缩使用 Terser。三种压缩方案的选择Terser默认传统压缩器由standard-minifier-js包提供。SWC MinifierMeteor 3.3启用 Modern Build Stackmodern: true后Meteor 自动改用 SWC 压缩器速度显著快于 Terser产物体积相近或更小。Rspack 内置 SWC MinifierMeteor 3.4使用 Rspack 集成时压缩由 Rspack 内置的 SWC 压缩器完成提供最快的压缩与高级优化。如果需要不同的压缩行为可以替换这些包例如社区维护的zodern:standard-minifier-js。开发环境 vs 生产环境开发环境运行应用的核心诉求是快速迭代应用的不同部分会被分别处理并插桩以支持更好的重载和调试。生产环境中应用会被裁剪到只包含必要代码行为如同任何标准 Node.js 应用。因此不要在线上用meteor run运行应用。请遵循 部署 Meteor 应用 的指引。如果怀疑线上错误与压缩有关可以在本地用meteor --production运行压缩版本进行测试。Modern Build StackMeteor 3.3Meteor 3.3 引入了 Modern Build Stack这是让构建更快、更高效的一系列优化Meteor 3.4 又加入 Rspack 集成以进一步提升性能。总览请见 Modern Build Stack。Meteor Bundler 优化3.3优化后的 Meteor Bundler 包含SWC 转译用更快的 SWC 转译器替代 Babel 进行 JavaScript/TypeScript 编译SWC 压缩用 SWC 压缩器替代 Terser加快生产构建仅现代浏览器开发开发期间跳过 legacy 浏览器构建快速文件监视使用parcel/watcher进行原生递归文件监视增强的 .meteorignore更精细地控制哪些文件参与构建启用方式在应用根目录的package.json中加入{ meteor: { modern: true } }更详细的迁移要求与配置定制参见 Meteor Bundler Optimizations 指南。仓库中 SWC 集成是现代工具三支柱之一维护者级架构说明见 dev/modern-tools/README.md 与 dev/modern-tools/swc/README.md。Rspack Bundler 集成3.4Meteor 3.4 引入可选的 Rspack 集成作为传统 Meteor Bundler 的现代高性能替代方案。Rspack 带来显著更快的构建约 5–10 倍、更小的包体积约减少 20–40%以及现代打包器生态的访问能力。快速开始# 添加 rspack 包新建应用默认已包含 meteor add rspackRspack 集成的原理可以从 packages/rspack/package.js 看到该包通过Package.registerBuildPlugin注册名为rspack的构建插件将lib/constants.js、lib/build-context.js、lib/config.js、rspack_plugin.js等源码注入构建生命周期从而在 Meteor 打包器运行之前初始化 Rspack 开发服务器与构建上下文服务端侧则由rspack_server.js通过api.mainModule注册与webapp协同。这正是 dev/modern-tools/README.md 所述的集成架构原则工具集成被限定在其 Atmosphere 包内meteor add rspack即接入工具移除包即完全清理Meteor 核心工具对这些外部工具保持零硬编码引用。Rspack 功能的完整细节配置、迁移指南、框架集成参见 Rspack Bundler Integration 指南维护者文档见 dev/modern-tools/rspack/README.md。构建方案对比特性Meteor BundlerMeteor 优化Meteor Rspack安装方式默认添加modern: true添加rspack包转译器BabelSWCBabel 兜底经 Rspack 的 SWC压缩器TerserSWC经 Rspack 的 SWC构建速度基线约快 2–3 倍约快 5–10 倍包体积基线相近小 20–40%HMR 速度标准更快最快代码分割有限有限完整 HTTP/2 支持Tree Shaking基础基础高级生态AtmosphereAtmosphereRspack Atmosphere入口点可选可选必需迁移成本不适用极小中等选择建议若应用重度依赖 Meteor 特有机制如嵌套导入优先使用 Meteor Bundler 优化若遵循标准语法、无嵌套导入可进一步启用 Rspack 集成以获得更大收益。JavaScript 转译JavaScript 工具与框架生态日新月异语言本身也在快速演进。指望浏览器原生实现你想要的特性已不现实。多数 JS 开发流程都依赖编译到最低公共分母环境同时让你在开发中使用最新特性。Meteor 开箱即支持多种主流方案。ES2015推荐ecmascript包所有新应用与包默认安装可移除支持大量 ES2015 特性。官方推荐使用它。其使用细节可参考 代码风格 相关文章。SWCMeteor 3.3性能推荐SWC 是一个基于 Rust 的 JavaScript/TypeScript 编译器比 Babel 快 20–70 倍且支持相同特性。启用方式与 Meteor Bundler 优化相同——在package.json中设置{ meteor: { modern: true } }启用后 SWC 负责所有转译并对任何不兼容代码自动回退到 Babel。详见 Meteor Bundler Optimizations 指南。BabelBabel 是成熟、可配置的转译器即使目标环境不支持某些新特性你也照常编写最新版 JavaScript由 Babel 将其编译到受支持的版本。Meteor 为每种环境Node.js、现代浏览器、legacy 浏览器和 React 提供了一组合适的核心插件覆盖大多数现代 JS 实践。此外Meteor 支持自定义.babelrc文件开发者可以进一步定制 Babel 配置例如 Stage 0 提案。官方建议避免引入大型 preset如babel-preset-env、babel-preset-react而是按需添加具体插件——这样可以避免不必要的 Babel 编译也减少插件顺序问题。注意使用 Modern Build Stackmodern: true时Babel 作为 SWC 无法处理的代码的回退方案确保与所有现有 Meteor 代码兼容。从源码看Babel 集成由 packages/babel-compiler/package.js 承载ecmascript插件正是基于它注册的。CoffeeScript尽管官方推荐使用ecmascript包 ES2015 以获得最佳开发体验平台对 CoffeeScript 也是 100% 兼容的。使用方法meteor add coffeescript所有 CoffeeScript 代码在底层编译为 JavaScript与其它包中用 JS 或 ES2015 编写的代码完全兼容。推荐3.4如果使用 CoffeeScript建议配合 Rspack Bundler 使用而非 Atmosphere 构建插件。Rspack 通过coffee-loader和swc-loader处理 CoffeeScript构建更快、与现代构建栈集成更好。可用meteor create --coffeescript快速搭建新项目。TypeScriptTypeScript 是带可选类型的现代 JavaScript。添加类型让代码更易读、更少运行时错误。安装meteor add typescript使用 TypeScript 编译器需要配置tsconfig.json文件。以下是meteor create --typescript生成的配置{ compilerOptions: { target: es2018, module: esNext, lib: [esnext, dom], allowJs: true, checkJs: false, jsx: preserve, incremental: true, noEmit: true, strict: true, noImplicitAny: true, strictNullChecks: true, noUnusedLocals: true, noUnusedParameters: true, noImplicitReturns: false, noFallthroughCasesInSwitch: false, baseUrl: ., paths: { /*: [*] }, moduleResolution: node, resolveJsonModule: true, types: [node, mocha], esModuleInterop: true, preserveSymlinks: true }, exclude: [ ./.meteor/**, ./packages/** ] }从项目创建时就启用 TypeScript可加--typescript标志meteor create --typescript name-of-my-new-typescript-appTypeScript 包本身也是构建插件架构的又一实例见 packages/typescript/package.js。条件导入TypeScript 不支持嵌套import语句因此条件导入模块必须使用require语句。要保持类型安全可以利用 TypeScript 的 import elision用typeof关键字引用类型。模板与 HTML由于 Meteor 使用客户端渲染你所有的 HTML 代码、UI 组件和模板都需要编译为 JavaScript。有几种可选方案Blaze HTML 模板blaze-html-templates包每个新 Meteor 应用默认自带将用 Spacebars 编写的.html文件编译成 Blaze 兼容的 JavaScript 代码。你也可以把它加入自己的包以编译包内的模板文件。Blaze Jade 模板不喜欢 Spacebars 语法时可用 Jadepacreach:jade包将.jade文件编译为 Blaze 兼容代码并能与blaze-html-templates并存。JSX for ReactReact 应用最主流的 UI 编写方式是 JSX。JSX 代码由ecmascript包自动处理。CSS 处理使用 Rspack3.4使用 Rspack 打包器时CSS 由 Rspack 内置 loader 处理而非 Meteor 的 Atmosphere 构建插件。这样能获得标准的打包器约定、完善的 CSS HMR并可直接使用 Tailwind、PostCSS 等工具无需额外 Meteor 包。详见 Rspack CSS 指南。所有 CSS 样式文件会按 Meteor 默认文件加载顺序规则配合import语句处理并拼接成一个样式表merged-stylesheets.css。生产构建中该文件还会被压缩。默认情况下这个单一样式表被注入到应用 HTMLhead /的开头。这可能会给使用第三方 UI 框架如从 CDN 加载的 Bootstrap的应用带来问题——Bootstrap 的 CSS 可能排在你的 CSS 之后并覆盖你自定义的样式。解决方案是使用伪标签meteor-bundled-css /把它放在head /中的任意位置它就会被替换为指向拼接后 CSS 文件的链接如果不使用该伪标签CSS 文件仍会放在head /开头。CSS 预处理器纯 CSS 难以在不同选择器间共享公共代码、难以维持一致的配色方案。CSS 预处理器在 CSS 语言之上增加变量、mixin、数学运算等特性部分还会显著改变语法使其更易读写。Meteor 支持三种主流预处理器Sass官方推荐使用 SCSS 语法Bootstrap 等框架已转向 SassC LibSass 实现速度较快Less.jsStylus选择预处理器时CSS 框架兼容性是首要考量——用 Less 写的框架无法与用 Sass 写的框架兼容。源文件 vs. 导入文件所有预处理器都支持导入文件带来与 JavaScript 模块类似的收益通过 import 编码依赖关系来控制文件加载顺序CSS 的加载顺序很重要创建只含变量和 mixin、不生成实际 CSS 的可复用 CSS 模块在 Meteor 中每个.scss、.less、.styl源文件分属两种类型source源文件被急切求值其编译结果立即加入应用的 CSS。import导入文件仅在被其它文件导入时才求值用于在应用的不同 CSS 文件之间共享 mixin 和变量。导入样式在三种预处理器中你都可以从应用内的相对/绝对路径以及 npm 包和 Meteor Atmosphere 包导入样式文件import ../stylesheets/colors.less; // 相对路径 import {}/imports/ui/stylesheets/button.less; // 使用 {} 语法的绝对路径安装ecmascript包后还可以从 JavaScript 文件导入 CSSimport ../stylesheets/styles.css;从 JS 文件导入的 CSS 不会与 Meteor 构建工具处理的其余 CSS 一起打包而是放入应用head标签内的style.../style中位置在拼接后的主 CSS 文件之后。从 Atmosphere 包导入使用{}包名语法import {my-package:pretty-buttons}/buttons/styles.import.less;Atmosphere 包中的 CSS 文件通过api.addFiles声明会被急切求值并自动与应用中的其它 CSS 一起打包。从 npm 包导入使用{}语法import {}/node_modules/npm-package-name/button.less;import npm-package-name/stylesheets/styles.css;各预处理器的推荐构建插件Sass最佳插件为leonardoventurini:scss此前推荐的fourseven:scss可作为替代。使用 Rspack3.4时可改用sass-embeddedsass-loader在rspack.config.js中配置。LessLess 是 Meteor 核心包less包本身即由构建插件实现。Stylus最佳插件为coagmano:stylus。PostCSS 与 Autoprefixer除预处理器外还存在 CSS 后处理器生态。无论使用哪种预处理器后处理器都能带来额外收益例如跨浏览器兼容性。最流行的后处理器是PostCSS支持多种插件其中Autoprefixer是最有用的插件——它让你无需再操心浏览器前缀直接编写标准 CSS例如写标准渐变而无需重复 5 种前缀写法。Meteor 会在你配置好之后自动运行 PostCSS。启用方法见 standard-minifier-css 的文档。热模块替换HMR在 Meteor 应用中JavaScript、TypeScript、动态导入的 CSS 文件以及许多其它类型的文件在构建过程中都会被转换为 JavaScript 模块。HMR 让 Meteor 在重建后不必重载客户端而是就地更新运行中应用内被修改的模块从而缩短开发反馈周期。Meteor 传统 HMR添加hot-module-replacement包即可启用meteor add hot-module-replacement从源码看该包被标记为debugOnly: truepackages/hot-module-replacement/package.js意味着它只在开发环境生效、不会进入生产包它imply了modules-runtime-hot以提供模块热更新运行时。许多类型的 JS 模块无法通过 HMR 更新因此 HMR 需要知道哪些模块可被替换、如何替换。大多数应用无需手动配置而是使用现成集成React通过 React Fast Refresh 自动更新组件。所有使用 HMR 且 React 版本受支持的 Meteor 应用都会启用该集成。Svelte使用zodern:melte编译器包自动 HMR。Vue使用akryum:vue-component更新组件。模块清理部分包能自动清理旧版本模块的副作用如zodern:pure-admin会移除旧模块添加的菜单项和页面。要进一步控制 HMR 如何应用更新可使用 hot API如accept更多类型的文件、dispose模块使其旧版本不再影响应用——例如停止Tracker.autorun计算或为其它视图层/库创建自定义集成。如果应用做出了无法通过 HMR 应用的更改则会像未启用 HMR 时那样通过 hot code push 重载页面。目前 HMR 仅支持现代客户端架构中的应用代码。Rspack HMR3.4使用 Rspack 集成 时你可以获得 Rspack 原生 HMR显著快于 Meteor 传统 HMR更快更新变更几乎即时生效状态保持更新期间更好地保留应用状态框架集成自动支持 React Fast Refresh、Vue HMR、Svelte HMR 等CSS HMR样式变更无需整页刷新即可生效不同于传统 Cordova 应用注意Rspack 目前不支持 Blaze HMR。Blaze 应用因 Rspack 快速重建约减少 97% 重建时间仍会快速重载但会执行整页重载而非热模块替换。使用 Rspack HMR 只需添加rspack包——受支持框架的 HMR 会自动启用。构建插件Build Plugins构建系统最强大的特性是定义自定义构建插件。如果你发现自己写脚本把一种文件转成另一种、合并多个文件或做类似事情这些脚本很可能应该实现为构建插件。ecmascript、templating、coffeescript包都是作为构建插件实现的——因此如果你愿意完全可以用自己的版本替换它们完整 API 文档见 v3-docs/docs/api/package.md 中的 Build Plugin API 章节。构建插件类型Meteor 目前支持三种构建插件Compiler 插件把源文件LESS、CoffeeScript编译为构建产物JS、CSS、资源文件、HTML。每个文件扩展名只能由一个 compiler 插件处理。Minifier 插件把大量已构建的 CSS 或 JS 文件编译为一个或多个压缩文件如standard-minifiers。js和css各只能有一个 minifier。Linter 插件处理任意数量的文件可输出 lint 错误。多个 linter 可以处理相同文件。编写自定义构建插件编写构建插件是非常高级的任务建议最资深的 Meteor 用户才去尝试。最佳起点是复制与你目标最相似的现有插件想写新的 CSS compiler 插件可 forkless包想写自己的 JS 转译器可 forkecmascriptlinter 的好范例是jshint包minifier 可参考standard-minifiers-js和standard-minifiers-css。注册插件的标准入口是Package.registerBuildPlugin({ name, sources, use })这与 packages/rspack/package.js、packages/ecmascript/package.js 的实际用法完全一致use声明插件运行所需依赖如ecmascript、tools-coresources列出插件源码文件。缓存让构建插件变快的最好方式是尽可能使用缓存——省时间的最好办法是少干活请查阅 CachingCompiler 文档 了解更多。上文所有示例插件都在使用它。从源码看CachingCompiler 的基类实现于 packages/caching-compiler/caching-compiler.js它基于 LRU 缓存维护磁盘缓存并支持通过环境变量调整缓存行为——缓存大小可通过METEOR_COMPILER_NAME_CACHE_SIZE设置调试开关为METEOR_COMPILER_NAME_CACHE_DEBUG编译器名会自动转为大写下划线形式默认最大并行度maxParallelism为 20。这些设计让ecmascript、less等插件在增量开发中只需处理真正变化的文件是 Meteor 开发体验流畅的重要保障。小结Meteor 构建系统把编译、打包、压缩、热重载、部署等一整套工具链内置到了meteor命令行中并通过包即配置的方式彻底告别了大型构建配置文件。针对性能敏感场景Meteor 3.3 的 SWC 转译/压缩与 3.4 的 Rspack 集成提供了从基线到5–10 倍构建提速、20–40% 体积缩减的渐进式升级路径而ecmascript、less、hot-module-replacement、rspack等包本身即构建插件这一事实则印证了这套体系对编译、转译、CSS 处理、HMR、自定义插件的统一抽象能力。上手建议新项目直接用默认的 Modern Build Stack存量项目先加meteor: { modern: true }确认无嵌套导入等 Meteor 特有限制后再评估meteor add rspack。【免费下载链接】meteorMeteor, the JavaScript App Platform项目地址: https://gitcode.com/gh_mirrors/me/meteor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Meteor 构建系统（Build Tool）完全指南：编译、转译、CSS 处理、HMR 与自定义构建插件
Meteor 构建系统Build Tool完全指南编译、转译、CSS 处理、HMR 与自定义构建插件【免费下载链接】meteorMeteor, the JavaScript App Platform项目地址: https://gitcode.com/gh_mirrors/me/meteor本篇技术指南围绕 v3-docs/docs/about/build-tool.md 展开系统讲解 Meteor 构建工具即你安装 Meteor 后获得的命令行工具如何编译、运行、部署和发布应用与包。读完本文你将掌握Meteor Bundler 与 Rspack 两种打包方案的选择依据、JavaScript 多语言转译ES2015/SWC/Babel/CoffeeScript/TypeScript、CSS 处理与预处理器、热模块替换HMR的启用方式以及如何编写自定义构建插件——并能在 当前仓库 的源码中找到每一环节的实现证据。什么是 Meteor 构建系统Meteor 构建系统就是安装 Meteor 后得到的那个命令行工具。你通过在终端输入meteor命令可附带参数来运行它。关于所有命令的完整列表可以阅读 CLI 相关文档 或在终端输入meteor help。Meteor 构建工具负责编译、运行、部署和发布你的所有 Meteor 应用与包。它是 Meteor 对 Grunt、Gulp、Webpack、Browserify、Nodemon 等工具所解决问题的内置解决方案——但它采用零配置哲学你几乎看不到大型构建配置文件构建过程几乎完全通过向应用添加/移除包、以及把文件放入特定命名的目录来配置。这一点与 Gulp/Webpack 那种显式配置文件驱动的构建系统截然不同。从 Meteor 3.3 开始你可以使用Modern Build Stack现代构建栈其中包含基于 SWC 的转译优化从 Meteor 3.4 起可以集成Rspack作为应用打包器以获得更快的构建、更小的包体积和现代打包特性。详见 Modern Build Stack 总览。文件变更自动重载执行meteor命令启动构建工具后建议让它在开发期间保持运行。构建工具通过一套文件监视系统自动检测相关文件的变化重新编译必要部分并按需重启客户端或服务端环境。可以选配使用 热模块替换HMR让变更反馈更快。从源码看文件监视能力内置于构建工具核心meteor命令由 tools/cli 下的命令处理器驱动配合parcel/watcherModern Build Stack 启用后使用原生递归文件监视实现跨平台的高效变更检测。通过构建插件编译文件Meteor 构建工具的核心职能是运行构建插件build plugins。这些插件定义了你应用构建流程的不同部分。例如要在应用中获得最新的 ES2015 特性只需添加ecmascript包meteor add ecmascript该包提供 ES2015 模块支持让你能用import/export更精细地控制文件加载顺序。随着新版本 Meteor 为该包加入新特性你无需任何额外配置即可自动获得。从源码看ecmascript本身就是一个构建插件——packages/ecmascript/package.js 中通过Package.registerBuildPlugin注册了名为compile-ecmascript的编译插件依赖babel-compiler与react-fast-refreshPackage.registerBuildPlugin({ name: compile-ecmascript, use: [babel-compiler, react-fast-refresh], sources: [plugin.js], });控制要构建哪些文件默认情况下Meteor 会根据应用的文件结构约定与默认文件加载顺序规则构建文件。你可以通过.meteorignore文件覆盖默认行为——它使用与.gitignore相同的模式语法让构建系统忽略某些文件和目录。这些文件可出现在应用或包的任意目录中对该目录树以下的文件生效。.meteorignore与文件监视系统完全集成因此在开发过程中可以随时添加、删除或修改它们。合并与压缩代码Meteor 构建工具会自动拼接你的应用资源文件并在生产环境中压缩这些包bundle。这意味着你可以在源码中随意写注释和空白、把代码拆分成任意多个文件而无需担心应用性能与加载时间。默认情况下这项能力由standard-minifier-js和standard-minifier-css两个包提供其中 JavaScript 压缩使用 Terser。三种压缩方案的选择Terser默认传统压缩器由standard-minifier-js包提供。SWC MinifierMeteor 3.3启用 Modern Build Stackmodern: true后Meteor 自动改用 SWC 压缩器速度显著快于 Terser产物体积相近或更小。Rspack 内置 SWC MinifierMeteor 3.4使用 Rspack 集成时压缩由 Rspack 内置的 SWC 压缩器完成提供最快的压缩与高级优化。如果需要不同的压缩行为可以替换这些包例如社区维护的zodern:standard-minifier-js。开发环境 vs 生产环境开发环境运行应用的核心诉求是快速迭代应用的不同部分会被分别处理并插桩以支持更好的重载和调试。生产环境中应用会被裁剪到只包含必要代码行为如同任何标准 Node.js 应用。因此不要在线上用meteor run运行应用。请遵循 部署 Meteor 应用 的指引。如果怀疑线上错误与压缩有关可以在本地用meteor --production运行压缩版本进行测试。Modern Build StackMeteor 3.3Meteor 3.3 引入了 Modern Build Stack这是让构建更快、更高效的一系列优化Meteor 3.4 又加入 Rspack 集成以进一步提升性能。总览请见 Modern Build Stack。Meteor Bundler 优化3.3优化后的 Meteor Bundler 包含SWC 转译用更快的 SWC 转译器替代 Babel 进行 JavaScript/TypeScript 编译SWC 压缩用 SWC 压缩器替代 Terser加快生产构建仅现代浏览器开发开发期间跳过 legacy 浏览器构建快速文件监视使用parcel/watcher进行原生递归文件监视增强的 .meteorignore更精细地控制哪些文件参与构建启用方式在应用根目录的package.json中加入{ meteor: { modern: true } }更详细的迁移要求与配置定制参见 Meteor Bundler Optimizations 指南。仓库中 SWC 集成是现代工具三支柱之一维护者级架构说明见 dev/modern-tools/README.md 与 dev/modern-tools/swc/README.md。Rspack Bundler 集成3.4Meteor 3.4 引入可选的 Rspack 集成作为传统 Meteor Bundler 的现代高性能替代方案。Rspack 带来显著更快的构建约 5–10 倍、更小的包体积约减少 20–40%以及现代打包器生态的访问能力。快速开始# 添加 rspack 包新建应用默认已包含 meteor add rspackRspack 集成的原理可以从 packages/rspack/package.js 看到该包通过Package.registerBuildPlugin注册名为rspack的构建插件将lib/constants.js、lib/build-context.js、lib/config.js、rspack_plugin.js等源码注入构建生命周期从而在 Meteor 打包器运行之前初始化 Rspack 开发服务器与构建上下文服务端侧则由rspack_server.js通过api.mainModule注册与webapp协同。这正是 dev/modern-tools/README.md 所述的集成架构原则工具集成被限定在其 Atmosphere 包内meteor add rspack即接入工具移除包即完全清理Meteor 核心工具对这些外部工具保持零硬编码引用。Rspack 功能的完整细节配置、迁移指南、框架集成参见 Rspack Bundler Integration 指南维护者文档见 dev/modern-tools/rspack/README.md。构建方案对比特性Meteor BundlerMeteor 优化Meteor Rspack安装方式默认添加modern: true添加rspack包转译器BabelSWCBabel 兜底经 Rspack 的 SWC压缩器TerserSWC经 Rspack 的 SWC构建速度基线约快 2–3 倍约快 5–10 倍包体积基线相近小 20–40%HMR 速度标准更快最快代码分割有限有限完整 HTTP/2 支持Tree Shaking基础基础高级生态AtmosphereAtmosphereRspack Atmosphere入口点可选可选必需迁移成本不适用极小中等选择建议若应用重度依赖 Meteor 特有机制如嵌套导入优先使用 Meteor Bundler 优化若遵循标准语法、无嵌套导入可进一步启用 Rspack 集成以获得更大收益。JavaScript 转译JavaScript 工具与框架生态日新月异语言本身也在快速演进。指望浏览器原生实现你想要的特性已不现实。多数 JS 开发流程都依赖编译到最低公共分母环境同时让你在开发中使用最新特性。Meteor 开箱即支持多种主流方案。ES2015推荐ecmascript包所有新应用与包默认安装可移除支持大量 ES2015 特性。官方推荐使用它。其使用细节可参考 代码风格 相关文章。SWCMeteor 3.3性能推荐SWC 是一个基于 Rust 的 JavaScript/TypeScript 编译器比 Babel 快 20–70 倍且支持相同特性。启用方式与 Meteor Bundler 优化相同——在package.json中设置{ meteor: { modern: true } }启用后 SWC 负责所有转译并对任何不兼容代码自动回退到 Babel。详见 Meteor Bundler Optimizations 指南。BabelBabel 是成熟、可配置的转译器即使目标环境不支持某些新特性你也照常编写最新版 JavaScript由 Babel 将其编译到受支持的版本。Meteor 为每种环境Node.js、现代浏览器、legacy 浏览器和 React 提供了一组合适的核心插件覆盖大多数现代 JS 实践。此外Meteor 支持自定义.babelrc文件开发者可以进一步定制 Babel 配置例如 Stage 0 提案。官方建议避免引入大型 preset如babel-preset-env、babel-preset-react而是按需添加具体插件——这样可以避免不必要的 Babel 编译也减少插件顺序问题。注意使用 Modern Build Stackmodern: true时Babel 作为 SWC 无法处理的代码的回退方案确保与所有现有 Meteor 代码兼容。从源码看Babel 集成由 packages/babel-compiler/package.js 承载ecmascript插件正是基于它注册的。CoffeeScript尽管官方推荐使用ecmascript包 ES2015 以获得最佳开发体验平台对 CoffeeScript 也是 100% 兼容的。使用方法meteor add coffeescript所有 CoffeeScript 代码在底层编译为 JavaScript与其它包中用 JS 或 ES2015 编写的代码完全兼容。推荐3.4如果使用 CoffeeScript建议配合 Rspack Bundler 使用而非 Atmosphere 构建插件。Rspack 通过coffee-loader和swc-loader处理 CoffeeScript构建更快、与现代构建栈集成更好。可用meteor create --coffeescript快速搭建新项目。TypeScriptTypeScript 是带可选类型的现代 JavaScript。添加类型让代码更易读、更少运行时错误。安装meteor add typescript使用 TypeScript 编译器需要配置tsconfig.json文件。以下是meteor create --typescript生成的配置{ compilerOptions: { target: es2018, module: esNext, lib: [esnext, dom], allowJs: true, checkJs: false, jsx: preserve, incremental: true, noEmit: true, strict: true, noImplicitAny: true, strictNullChecks: true, noUnusedLocals: true, noUnusedParameters: true, noImplicitReturns: false, noFallthroughCasesInSwitch: false, baseUrl: ., paths: { /*: [*] }, moduleResolution: node, resolveJsonModule: true, types: [node, mocha], esModuleInterop: true, preserveSymlinks: true }, exclude: [ ./.meteor/**, ./packages/** ] }从项目创建时就启用 TypeScript可加--typescript标志meteor create --typescript name-of-my-new-typescript-appTypeScript 包本身也是构建插件架构的又一实例见 packages/typescript/package.js。条件导入TypeScript 不支持嵌套import语句因此条件导入模块必须使用require语句。要保持类型安全可以利用 TypeScript 的 import elision用typeof关键字引用类型。模板与 HTML由于 Meteor 使用客户端渲染你所有的 HTML 代码、UI 组件和模板都需要编译为 JavaScript。有几种可选方案Blaze HTML 模板blaze-html-templates包每个新 Meteor 应用默认自带将用 Spacebars 编写的.html文件编译成 Blaze 兼容的 JavaScript 代码。你也可以把它加入自己的包以编译包内的模板文件。Blaze Jade 模板不喜欢 Spacebars 语法时可用 Jadepacreach:jade包将.jade文件编译为 Blaze 兼容代码并能与blaze-html-templates并存。JSX for ReactReact 应用最主流的 UI 编写方式是 JSX。JSX 代码由ecmascript包自动处理。CSS 处理使用 Rspack3.4使用 Rspack 打包器时CSS 由 Rspack 内置 loader 处理而非 Meteor 的 Atmosphere 构建插件。这样能获得标准的打包器约定、完善的 CSS HMR并可直接使用 Tailwind、PostCSS 等工具无需额外 Meteor 包。详见 Rspack CSS 指南。所有 CSS 样式文件会按 Meteor 默认文件加载顺序规则配合import语句处理并拼接成一个样式表merged-stylesheets.css。生产构建中该文件还会被压缩。默认情况下这个单一样式表被注入到应用 HTMLhead /的开头。这可能会给使用第三方 UI 框架如从 CDN 加载的 Bootstrap的应用带来问题——Bootstrap 的 CSS 可能排在你的 CSS 之后并覆盖你自定义的样式。解决方案是使用伪标签meteor-bundled-css /把它放在head /中的任意位置它就会被替换为指向拼接后 CSS 文件的链接如果不使用该伪标签CSS 文件仍会放在head /开头。CSS 预处理器纯 CSS 难以在不同选择器间共享公共代码、难以维持一致的配色方案。CSS 预处理器在 CSS 语言之上增加变量、mixin、数学运算等特性部分还会显著改变语法使其更易读写。Meteor 支持三种主流预处理器Sass官方推荐使用 SCSS 语法Bootstrap 等框架已转向 SassC LibSass 实现速度较快Less.jsStylus选择预处理器时CSS 框架兼容性是首要考量——用 Less 写的框架无法与用 Sass 写的框架兼容。源文件 vs. 导入文件所有预处理器都支持导入文件带来与 JavaScript 模块类似的收益通过 import 编码依赖关系来控制文件加载顺序CSS 的加载顺序很重要创建只含变量和 mixin、不生成实际 CSS 的可复用 CSS 模块在 Meteor 中每个.scss、.less、.styl源文件分属两种类型source源文件被急切求值其编译结果立即加入应用的 CSS。import导入文件仅在被其它文件导入时才求值用于在应用的不同 CSS 文件之间共享 mixin 和变量。导入样式在三种预处理器中你都可以从应用内的相对/绝对路径以及 npm 包和 Meteor Atmosphere 包导入样式文件import ../stylesheets/colors.less; // 相对路径 import {}/imports/ui/stylesheets/button.less; // 使用 {} 语法的绝对路径安装ecmascript包后还可以从 JavaScript 文件导入 CSSimport ../stylesheets/styles.css;从 JS 文件导入的 CSS 不会与 Meteor 构建工具处理的其余 CSS 一起打包而是放入应用head标签内的style.../style中位置在拼接后的主 CSS 文件之后。从 Atmosphere 包导入使用{}包名语法import {my-package:pretty-buttons}/buttons/styles.import.less;Atmosphere 包中的 CSS 文件通过api.addFiles声明会被急切求值并自动与应用中的其它 CSS 一起打包。从 npm 包导入使用{}语法import {}/node_modules/npm-package-name/button.less;import npm-package-name/stylesheets/styles.css;各预处理器的推荐构建插件Sass最佳插件为leonardoventurini:scss此前推荐的fourseven:scss可作为替代。使用 Rspack3.4时可改用sass-embeddedsass-loader在rspack.config.js中配置。LessLess 是 Meteor 核心包less包本身即由构建插件实现。Stylus最佳插件为coagmano:stylus。PostCSS 与 Autoprefixer除预处理器外还存在 CSS 后处理器生态。无论使用哪种预处理器后处理器都能带来额外收益例如跨浏览器兼容性。最流行的后处理器是PostCSS支持多种插件其中Autoprefixer是最有用的插件——它让你无需再操心浏览器前缀直接编写标准 CSS例如写标准渐变而无需重复 5 种前缀写法。Meteor 会在你配置好之后自动运行 PostCSS。启用方法见 standard-minifier-css 的文档。热模块替换HMR在 Meteor 应用中JavaScript、TypeScript、动态导入的 CSS 文件以及许多其它类型的文件在构建过程中都会被转换为 JavaScript 模块。HMR 让 Meteor 在重建后不必重载客户端而是就地更新运行中应用内被修改的模块从而缩短开发反馈周期。Meteor 传统 HMR添加hot-module-replacement包即可启用meteor add hot-module-replacement从源码看该包被标记为debugOnly: truepackages/hot-module-replacement/package.js意味着它只在开发环境生效、不会进入生产包它imply了modules-runtime-hot以提供模块热更新运行时。许多类型的 JS 模块无法通过 HMR 更新因此 HMR 需要知道哪些模块可被替换、如何替换。大多数应用无需手动配置而是使用现成集成React通过 React Fast Refresh 自动更新组件。所有使用 HMR 且 React 版本受支持的 Meteor 应用都会启用该集成。Svelte使用zodern:melte编译器包自动 HMR。Vue使用akryum:vue-component更新组件。模块清理部分包能自动清理旧版本模块的副作用如zodern:pure-admin会移除旧模块添加的菜单项和页面。要进一步控制 HMR 如何应用更新可使用 hot API如accept更多类型的文件、dispose模块使其旧版本不再影响应用——例如停止Tracker.autorun计算或为其它视图层/库创建自定义集成。如果应用做出了无法通过 HMR 应用的更改则会像未启用 HMR 时那样通过 hot code push 重载页面。目前 HMR 仅支持现代客户端架构中的应用代码。Rspack HMR3.4使用 Rspack 集成 时你可以获得 Rspack 原生 HMR显著快于 Meteor 传统 HMR更快更新变更几乎即时生效状态保持更新期间更好地保留应用状态框架集成自动支持 React Fast Refresh、Vue HMR、Svelte HMR 等CSS HMR样式变更无需整页刷新即可生效不同于传统 Cordova 应用注意Rspack 目前不支持 Blaze HMR。Blaze 应用因 Rspack 快速重建约减少 97% 重建时间仍会快速重载但会执行整页重载而非热模块替换。使用 Rspack HMR 只需添加rspack包——受支持框架的 HMR 会自动启用。构建插件Build Plugins构建系统最强大的特性是定义自定义构建插件。如果你发现自己写脚本把一种文件转成另一种、合并多个文件或做类似事情这些脚本很可能应该实现为构建插件。ecmascript、templating、coffeescript包都是作为构建插件实现的——因此如果你愿意完全可以用自己的版本替换它们完整 API 文档见 v3-docs/docs/api/package.md 中的 Build Plugin API 章节。构建插件类型Meteor 目前支持三种构建插件Compiler 插件把源文件LESS、CoffeeScript编译为构建产物JS、CSS、资源文件、HTML。每个文件扩展名只能由一个 compiler 插件处理。Minifier 插件把大量已构建的 CSS 或 JS 文件编译为一个或多个压缩文件如standard-minifiers。js和css各只能有一个 minifier。Linter 插件处理任意数量的文件可输出 lint 错误。多个 linter 可以处理相同文件。编写自定义构建插件编写构建插件是非常高级的任务建议最资深的 Meteor 用户才去尝试。最佳起点是复制与你目标最相似的现有插件想写新的 CSS compiler 插件可 forkless包想写自己的 JS 转译器可 forkecmascriptlinter 的好范例是jshint包minifier 可参考standard-minifiers-js和standard-minifiers-css。注册插件的标准入口是Package.registerBuildPlugin({ name, sources, use })这与 packages/rspack/package.js、packages/ecmascript/package.js 的实际用法完全一致use声明插件运行所需依赖如ecmascript、tools-coresources列出插件源码文件。缓存让构建插件变快的最好方式是尽可能使用缓存——省时间的最好办法是少干活请查阅 CachingCompiler 文档 了解更多。上文所有示例插件都在使用它。从源码看CachingCompiler 的基类实现于 packages/caching-compiler/caching-compiler.js它基于 LRU 缓存维护磁盘缓存并支持通过环境变量调整缓存行为——缓存大小可通过METEOR_COMPILER_NAME_CACHE_SIZE设置调试开关为METEOR_COMPILER_NAME_CACHE_DEBUG编译器名会自动转为大写下划线形式默认最大并行度maxParallelism为 20。这些设计让ecmascript、less等插件在增量开发中只需处理真正变化的文件是 Meteor 开发体验流畅的重要保障。小结Meteor 构建系统把编译、打包、压缩、热重载、部署等一整套工具链内置到了meteor命令行中并通过包即配置的方式彻底告别了大型构建配置文件。针对性能敏感场景Meteor 3.3 的 SWC 转译/压缩与 3.4 的 Rspack 集成提供了从基线到5–10 倍构建提速、20–40% 体积缩减的渐进式升级路径而ecmascript、less、hot-module-replacement、rspack等包本身即构建插件这一事实则印证了这套体系对编译、转译、CSS 处理、HMR、自定义插件的统一抽象能力。上手建议新项目直接用默认的 Modern Build Stack存量项目先加meteor: { modern: true }确认无嵌套导入等 Meteor 特有限制后再评估meteor add rspack。【免费下载链接】meteorMeteor, the JavaScript App Platform项目地址: https://gitcode.com/gh_mirrors/me/meteor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考