尧图网站建设 
Ionic Framework Core 本地开发预览实战用 npm start 构建并热更新组件 e2e 页面【免费下载链接】ionic-frameworkA powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.项目地址: https://gitcode.com/gh_mirrors/io/ionic-framework本文基于仓库文档 Preview Changes 展开介绍如何在 Ionic Framework 仓库中搭建ionic/core的本地开发环境克隆仓库、安装依赖、启动 Stencil 开发服务器并在浏览器中实时预览各个组件的 e2e 演示页面。读完本文后你将能够独立完成核心组件库的本地构建与预览理解npm start背后的构建链路并掌握测试页面支持的各种 URL 参数与配套工具。适用前提与目录定位ionic/core当前仓库版本9.0.3位于 monorepo 的core/目录下文档中的第一条提示也明确指出了这一点Notice thationic/corelives incore.从 core/package.json 可以看到包名为ionic/core描述为 “Base components for Ionic”要求node 16engines字段依赖 Stencil 编译器stencil/core ^4.44.2组件全部由 Stencil 编译产出。后文所有npm操作都必须先cd core进入该目录再执行这是本文反复强调的前提。第一步克隆仓库git clone https://gitcode.com/gh_mirrors/io/ionic-framework cd ionic-framework仓库为 monorepo 结构core/存放核心组件库packages/存放 Angular、React、Vue 等框架适配包docs/存放本文所在的技术文档。第二步在 core 目录安装依赖cd core npm installcore/package.json中除运行时依赖stencil/core、ionicons、tslib外还包含大量开发依赖core/package.json依赖用途stencil/core组件编译、开发服务器、spec 测试sass/stencil/sass编译src/css与组件 SCSSserve为 Playwright e2e 提供本地静态服务器playwright/test/playwright-coree2e 测试与预览服务器共用端口jest/jest-clispec 测试stencil/react-output-target等生成各框架包的代理组件第三步运行 npm start 启动开发服务器确认当前位于core目录后执行npm start文档说明start命令会完成四件事用 Stencil 构建组件、监听源码变化、启动本地 HTTP 服务器并自动在浏览器中打开 http://localhost:3333/。从源码看start脚本的实际定义是core/package.jsonstart: npm run build.css stencil build --dev --watch --serve它由两个阶段组成3.1 先编译 CSSbuild.cssbuild.css: npm run css.sass npm run css.minify, css.sass: sass --embed-sources --style compressed src/css:./css, css.minify: cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.csscss.sass把src/css/下的 SCSS入口 core/src/css/ionic.bundle.scss编译到core/css/css.minify再用 clean-css 压缩出css/ionic.bundle.css。这一步是预览能正常工作的前提各组件测试页面都通过link直接引用编译产物../../../css/ionic.bundle.css见下文 e2e 页面结构如果跳过 CSS 编译预览页面将没有主题样式。npm start在每次启动时都会先执行该步骤保证样式与源码同步。3.2 Stencil 开发模式构建stencil build的三个标志各自的作用标志作用--dev开发模式编译保留可调试产物加快编译速度--watch监听src/源码变化并增量重新编译--serve在3333端口启动本地开发服务器服务core/目录并自动打开浏览器stencil build的行为由 core/stencil.config.ts 驱动与预览直接相关的配置包括namespace: Ionic编译产物的命名空间stencil.config.ts第 76 行plugins: [sass()]组件的 SCSS 样式如accordion.ios.scss等在构建时一并编译core/stencil.config.tsglobalScript: src/global/ionic-global.ts注入全局脚本core/stencil.config.ts多个outputTargets会同时生成 React / Vue / Angular 代理组件、dist、docs-json等产物本地预览时会一并产出enableCache: true与transformAliasedImportPaths: true提升 watch 模式下的编译体验。说明--dev --watch --serve组合意味着这是一个“边改边编译边服务”的调试会话与发布构建npm run build--es5全量编译是两条不同的路径。第四步浏览各组件的 e2e 演示页面服务启动后访问 http://localhost:3333/src/components/ 即可进入组件源码目录。每个组件目录下都有test子目录其中存放针对该组件的小型 e2e 应用页面例如 Button 组件http://localhost:3333/src/components/button/test/basic以core/src/components/button/test/为例目录按场景划分为basic、anchor、clear、outline、form、icon、perf、round、size、wrap等多个演示场景每个场景目录内包含index.html演示页面本身button.e2e.ts对应的 Playwright e2e 用例button.e2e.ts-snapshots/截图快照供视觉回归比对。一个典型的演示页面结构如下core/src/components/button/test/basic/index.html!DOCTYPE html html langen dirltr head titleButton - Basic/title link href../../../../../css/ionic.bundle.css relstylesheet / link href../../../../../scripts/testing/styles.css relstylesheet / script src../../../../../scripts/testing/scripts.js/script script nomodule src../../../../../dist/ionic/ionic.js/script script typemodule src../../../../../dist/ionic/ionic.esm.js/script /head body ion-app ion-header ion-toolbar ion-titleButton - Basic/ion-title /ion-toolbar /ion-header ion-content classion-padding ion-text-center idcontent no-bounce ion-button iddefaultDefault/ion-button ion-button colorprimaryPrimary/ion-button !-- 更多颜色 / 状态 / fill / 尺寸的按钮示例 ... -- /ion-content /ion-app /body /html从结构可以看出演示页面的加载链路引入第三步编译出的/css/ionic.bundle.css主题样式引入 core/scripts/testing/scripts.js 测试引导脚本负责解析 URL 参数见后文通过nomodule与typemodule双通道加载/dist/ionic/ionic.js、/dist/ionic/ionic.esm.js——这正是stencil build的dist产物页面由此获得全部ion-*自定义元素。在编辑器中修改组件源码如core/src/components/button/button.tsx或其 SCSS后Stencil watch 会重新编译e2e 页面随即 live-reload改动即刻可见。这就是文档中 “As changes are made in an editor to source files, the e2e app will live-reload” 的完整含义。预览服务器与 e2e 测试的关系值得注意的一个细节core下 Playwright 的webServer配置恰好复用了同一个 3333 端口core/playwright.config.tsbaseURL: http://localhost:3333, // ... webServer: { command: serve -p 3333, port: 3333, reuseExistingServer: !process.env.CI }reuseExistingServer: !process.env.CI意味着本地非 CI 环境下如果npm start已经在 3333 端口提供了页面Playwright 会直接复用该服务来跑 e2e 用例CI 环境则改用serve -p 3333静态服务。也就是说预览服务器和 e2e 测试共享同一套页面入口你在浏览器里预览的 URL 与 e2e 用例访问的 URL 是一致的。进阶用 URL 参数控制演示页面行为所有测试页面都引入了 core/scripts/testing/scripts.js它会解析 URL 的 query 或 hash 参数为演示页面注入不同的运行环境。支持的参数如下core/scripts/testing/scripts.js参数取值效果rtltrue将文档方向设为dirrtl预览 RTL 布局ionic:_testingtrue标记测试环境注入caret-color: transparent样式避免光标影响截图ionic:modeios/md指定加载的组件模式默认mdpalettelight/dark/high-contrast/high-contrast-dark动态加载对应调色板/css/palettes/name.always.css默认light若body带有ion-palette-*类则会按类回退推断例如在浏览器中打开http://localhost:3333/src/components/button/test/basic?ionic:modeiosrtltruepalettedark即可看到 iOS 模式、右起布局、深色调色板下的 Button 渲染效果这对排查特定模式或主题下的样式问题是很有用的调试手段。另外 core/scripts/testing/styles.css 提供测试页统一的辅助样式core/scripts/testing/目录整体就是 e2e 演示页面的公共基建。进阶prerender 对比工具core还提供了一个与预览互补的脚本prerender.e2ecore/package.jsonnode scripts/testing/prerender.jscore/scripts/testing/prerender.js 会递归扫描src/components/**/test目录下的index.html用hydrate运行时把同一页面渲染出静态static、DOMINO 文档domino与 hydration 三种变体并生成一个带 4 个 iframe 的prerender.html对比页Client原始页面浏览器 JS 运行后的结果StaticrenderToString且移除脚本Domino在 domino 模拟文档上 hydrate 的结果Hydrated完整 hydration 结果。这使你可以直观比对“JS 客户端渲染”与“SSR 预渲染”的 DOM 差异是验证预渲染行为是否一致的工具。它不属于npm start的日常预览流程需要单独在core目录下运行脚本要求构建产物中的 hydrate 运行时可用。常见问题与注意事项必须在core/目录下执行npm start。文档两次强调了这一点stencil.config.ts、scripts/、src/都相对core/解析在仓库根目录执行会找不到配置。Node 版本不低于 16engines声明core/package.json。预览依赖编译产物测试页面直接引用dist/ionic/ionic.js与css/ionic.bundle.cssnpm start会自动完成 CSS 编译与 Stencil 开发构建若单独使用serve等工具托管静态文件需先跑npm run build。live-reload 只覆盖源码变更修改的是src/下的.ts/.tsx/.scss才会触发重新编译直接改dist/产物不会被 watch 追踪。完整的测试体系文档见 docs/core/testing/README.md包括运行与截图更新的 Usage Instructions、测试 最佳实践 以及基于 Playwright 封装的 自定义 API。小结npm start一条命令串起了 Ionic Framework 核心组件库的完整本地预览链路build.css先由sass编译出ionic.bundle.css再由stencil build --dev --watch --serve以开发模式增量编译组件并托管 3333 端口每个组件test/目录下的index.html演示页加载dist产物即可在浏览器中实时查看源码改动随 watch 即时生效。配合scripts.js的ionic:mode/rtl/palette参数、与 Playwright 共用的 3333 端口以及 prerender 对比脚本你可以在本地完成从样式调试、跨模式验证到 SSR 产物比对的全部预览工作。【免费下载链接】ionic-frameworkA powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.项目地址: https://gitcode.com/gh_mirrors/io/ionic-framework创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ionic Framework Core 本地开发预览实战：用 npm start 构建并热更新组件 e2e 页面
Ionic Framework Core 本地开发预览实战用 npm start 构建并热更新组件 e2e 页面【免费下载链接】ionic-frameworkA powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.项目地址: https://gitcode.com/gh_mirrors/io/ionic-framework本文基于仓库文档 Preview Changes 展开介绍如何在 Ionic Framework 仓库中搭建ionic/core的本地开发环境克隆仓库、安装依赖、启动 Stencil 开发服务器并在浏览器中实时预览各个组件的 e2e 演示页面。读完本文后你将能够独立完成核心组件库的本地构建与预览理解npm start背后的构建链路并掌握测试页面支持的各种 URL 参数与配套工具。适用前提与目录定位ionic/core当前仓库版本9.0.3位于 monorepo 的core/目录下文档中的第一条提示也明确指出了这一点Notice thationic/corelives incore.从 core/package.json 可以看到包名为ionic/core描述为 “Base components for Ionic”要求node 16engines字段依赖 Stencil 编译器stencil/core ^4.44.2组件全部由 Stencil 编译产出。后文所有npm操作都必须先cd core进入该目录再执行这是本文反复强调的前提。第一步克隆仓库git clone https://gitcode.com/gh_mirrors/io/ionic-framework cd ionic-framework仓库为 monorepo 结构core/存放核心组件库packages/存放 Angular、React、Vue 等框架适配包docs/存放本文所在的技术文档。第二步在 core 目录安装依赖cd core npm installcore/package.json中除运行时依赖stencil/core、ionicons、tslib外还包含大量开发依赖core/package.json依赖用途stencil/core组件编译、开发服务器、spec 测试sass/stencil/sass编译src/css与组件 SCSSserve为 Playwright e2e 提供本地静态服务器playwright/test/playwright-coree2e 测试与预览服务器共用端口jest/jest-clispec 测试stencil/react-output-target等生成各框架包的代理组件第三步运行 npm start 启动开发服务器确认当前位于core目录后执行npm start文档说明start命令会完成四件事用 Stencil 构建组件、监听源码变化、启动本地 HTTP 服务器并自动在浏览器中打开 http://localhost:3333/。从源码看start脚本的实际定义是core/package.jsonstart: npm run build.css stencil build --dev --watch --serve它由两个阶段组成3.1 先编译 CSSbuild.cssbuild.css: npm run css.sass npm run css.minify, css.sass: sass --embed-sources --style compressed src/css:./css, css.minify: cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.csscss.sass把src/css/下的 SCSS入口 core/src/css/ionic.bundle.scss编译到core/css/css.minify再用 clean-css 压缩出css/ionic.bundle.css。这一步是预览能正常工作的前提各组件测试页面都通过link直接引用编译产物../../../css/ionic.bundle.css见下文 e2e 页面结构如果跳过 CSS 编译预览页面将没有主题样式。npm start在每次启动时都会先执行该步骤保证样式与源码同步。3.2 Stencil 开发模式构建stencil build的三个标志各自的作用标志作用--dev开发模式编译保留可调试产物加快编译速度--watch监听src/源码变化并增量重新编译--serve在3333端口启动本地开发服务器服务core/目录并自动打开浏览器stencil build的行为由 core/stencil.config.ts 驱动与预览直接相关的配置包括namespace: Ionic编译产物的命名空间stencil.config.ts第 76 行plugins: [sass()]组件的 SCSS 样式如accordion.ios.scss等在构建时一并编译core/stencil.config.tsglobalScript: src/global/ionic-global.ts注入全局脚本core/stencil.config.ts多个outputTargets会同时生成 React / Vue / Angular 代理组件、dist、docs-json等产物本地预览时会一并产出enableCache: true与transformAliasedImportPaths: true提升 watch 模式下的编译体验。说明--dev --watch --serve组合意味着这是一个“边改边编译边服务”的调试会话与发布构建npm run build--es5全量编译是两条不同的路径。第四步浏览各组件的 e2e 演示页面服务启动后访问 http://localhost:3333/src/components/ 即可进入组件源码目录。每个组件目录下都有test子目录其中存放针对该组件的小型 e2e 应用页面例如 Button 组件http://localhost:3333/src/components/button/test/basic以core/src/components/button/test/为例目录按场景划分为basic、anchor、clear、outline、form、icon、perf、round、size、wrap等多个演示场景每个场景目录内包含index.html演示页面本身button.e2e.ts对应的 Playwright e2e 用例button.e2e.ts-snapshots/截图快照供视觉回归比对。一个典型的演示页面结构如下core/src/components/button/test/basic/index.html!DOCTYPE html html langen dirltr head titleButton - Basic/title link href../../../../../css/ionic.bundle.css relstylesheet / link href../../../../../scripts/testing/styles.css relstylesheet / script src../../../../../scripts/testing/scripts.js/script script nomodule src../../../../../dist/ionic/ionic.js/script script typemodule src../../../../../dist/ionic/ionic.esm.js/script /head body ion-app ion-header ion-toolbar ion-titleButton - Basic/ion-title /ion-toolbar /ion-header ion-content classion-padding ion-text-center idcontent no-bounce ion-button iddefaultDefault/ion-button ion-button colorprimaryPrimary/ion-button !-- 更多颜色 / 状态 / fill / 尺寸的按钮示例 ... -- /ion-content /ion-app /body /html从结构可以看出演示页面的加载链路引入第三步编译出的/css/ionic.bundle.css主题样式引入 core/scripts/testing/scripts.js 测试引导脚本负责解析 URL 参数见后文通过nomodule与typemodule双通道加载/dist/ionic/ionic.js、/dist/ionic/ionic.esm.js——这正是stencil build的dist产物页面由此获得全部ion-*自定义元素。在编辑器中修改组件源码如core/src/components/button/button.tsx或其 SCSS后Stencil watch 会重新编译e2e 页面随即 live-reload改动即刻可见。这就是文档中 “As changes are made in an editor to source files, the e2e app will live-reload” 的完整含义。预览服务器与 e2e 测试的关系值得注意的一个细节core下 Playwright 的webServer配置恰好复用了同一个 3333 端口core/playwright.config.tsbaseURL: http://localhost:3333, // ... webServer: { command: serve -p 3333, port: 3333, reuseExistingServer: !process.env.CI }reuseExistingServer: !process.env.CI意味着本地非 CI 环境下如果npm start已经在 3333 端口提供了页面Playwright 会直接复用该服务来跑 e2e 用例CI 环境则改用serve -p 3333静态服务。也就是说预览服务器和 e2e 测试共享同一套页面入口你在浏览器里预览的 URL 与 e2e 用例访问的 URL 是一致的。进阶用 URL 参数控制演示页面行为所有测试页面都引入了 core/scripts/testing/scripts.js它会解析 URL 的 query 或 hash 参数为演示页面注入不同的运行环境。支持的参数如下core/scripts/testing/scripts.js参数取值效果rtltrue将文档方向设为dirrtl预览 RTL 布局ionic:_testingtrue标记测试环境注入caret-color: transparent样式避免光标影响截图ionic:modeios/md指定加载的组件模式默认mdpalettelight/dark/high-contrast/high-contrast-dark动态加载对应调色板/css/palettes/name.always.css默认light若body带有ion-palette-*类则会按类回退推断例如在浏览器中打开http://localhost:3333/src/components/button/test/basic?ionic:modeiosrtltruepalettedark即可看到 iOS 模式、右起布局、深色调色板下的 Button 渲染效果这对排查特定模式或主题下的样式问题是很有用的调试手段。另外 core/scripts/testing/styles.css 提供测试页统一的辅助样式core/scripts/testing/目录整体就是 e2e 演示页面的公共基建。进阶prerender 对比工具core还提供了一个与预览互补的脚本prerender.e2ecore/package.jsonnode scripts/testing/prerender.jscore/scripts/testing/prerender.js 会递归扫描src/components/**/test目录下的index.html用hydrate运行时把同一页面渲染出静态static、DOMINO 文档domino与 hydration 三种变体并生成一个带 4 个 iframe 的prerender.html对比页Client原始页面浏览器 JS 运行后的结果StaticrenderToString且移除脚本Domino在 domino 模拟文档上 hydrate 的结果Hydrated完整 hydration 结果。这使你可以直观比对“JS 客户端渲染”与“SSR 预渲染”的 DOM 差异是验证预渲染行为是否一致的工具。它不属于npm start的日常预览流程需要单独在core目录下运行脚本要求构建产物中的 hydrate 运行时可用。常见问题与注意事项必须在core/目录下执行npm start。文档两次强调了这一点stencil.config.ts、scripts/、src/都相对core/解析在仓库根目录执行会找不到配置。Node 版本不低于 16engines声明core/package.json。预览依赖编译产物测试页面直接引用dist/ionic/ionic.js与css/ionic.bundle.cssnpm start会自动完成 CSS 编译与 Stencil 开发构建若单独使用serve等工具托管静态文件需先跑npm run build。live-reload 只覆盖源码变更修改的是src/下的.ts/.tsx/.scss才会触发重新编译直接改dist/产物不会被 watch 追踪。完整的测试体系文档见 docs/core/testing/README.md包括运行与截图更新的 Usage Instructions、测试 最佳实践 以及基于 Playwright 封装的 自定义 API。小结npm start一条命令串起了 Ionic Framework 核心组件库的完整本地预览链路build.css先由sass编译出ionic.bundle.css再由stencil build --dev --watch --serve以开发模式增量编译组件并托管 3333 端口每个组件test/目录下的index.html演示页加载dist产物即可在浏览器中实时查看源码改动随 watch 即时生效。配合scripts.js的ionic:mode/rtl/palette参数、与 Playwright 共用的 3333 端口以及 prerender 对比脚本你可以在本地完成从样式调试、跨模式验证到 SSR 产物比对的全部预览工作。【免费下载链接】ionic-frameworkA powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.项目地址: https://gitcode.com/gh_mirrors/io/ionic-framework创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考