前端Web框架SSR前端构建插件系统微前端跨平台【免费下载链接】ice ice.js: The Progressive App Framework Based On React基于 React 的渐进式应用框架项目地址https://gitcode.com/gh_mirrors/ice1/ice点击查看免费下载create-ice 是 ice.js 官方提供的项目初始化工具通过npm create ice等价于npm init ice即可在终端交互式或命令行指定模板的方式快速生成一个基于 React 的 ice.js 工程。本文以 packages/create-ice/README.md 为核心结合该包源码、配置与仓库内示例工程完整讲解 create-ice 的用法、模板机制、初始化流程与创建后的工程结构帮助你在几十秒内跑起第一个 ice.js 应用。一、create-ice 是什么create-ice 是 ice.js 官方脚手架初始化器initializer对应仓库目录 packages/create-ice。它解决的问题是从零搭建 ice.js 项目时无需手写入口文件、路由、构建配置一条命令即可生成可运行、可扩展的完整工程。从 package.json 可以看到它的关键设计{ name: create-ice, version: 1.9.1, description: npm init ice, type: module, bin: { create-ice: esm/index.mjs }, engines: { node: 14.19.0, npm: 3.0.0 } }bin字段把create-ice命令映射到esm/index.mjs这正是npm create ice/npm init ice背后的可执行入口要求 Node.js14.19.0、npm3.0.0而使用npm init initializer这种简写形式需要 npm 6见仓库根目录 README.md 的说明运行时依赖commander命令行参数解析、inquirer交互式提问、chalk终端彩色输出、fs-extra文件系统操作、ice-npm-utils环境检测以及iceworks/generate-project模板下载与工程生成。二、快速开始创建你的第一个 ice.js 项目2.1 三种包管理器用法packages/create-ice/README.md 给出了完全等价的三组命令任意包管理器均可使用# use npm $ npm create ice projectName # use yarn $ yarn create ice projectName # use pnpm $ pnpm create ice projectName其中projectName是你要创建的项目目录名。执行后进入新项目目录安装依赖并启动开发服务器$ cd projectName $ npm install $ npm startnpm start会启动 ice.js 的开发服务器默认运行在http://localhost:3000该默认行为见根目录 README.md 的快速开始章节。如果你使用的是 yarn 或 pnpm把安装与启动命令对应替换为yarn install yarn start或pnpm install pnpm start即可。仓库根目录 README 还提供了另一种完全相同的写法适合 npm 6 用户$ npm init ice ice-app --template ice/lite-scaffoldnpm init initializer与npm create initializer是同一机制npm 会查找名为create-ice的 npm 包并执行其bin因此上面两套命令可以混用。2.2 不指定模板交互式选择不带任何模板参数直接运行npm create ice projectName时create-ice 会进入交互式选择模式。在 create.ts 的selectTemplate()函数中内置了 4 个官方模板供你通过上下键选择模板 npm 包说明ice/lite-scaffoldWeb Lite Scaffold轻量 Web 模板默认项ice/antd-pro-scaffoldAntd Pro ScaffoldAnt Design Pro 风格模板ice/fusion-pro-scaffoldFusion Pro ScaffoldFusion Design Pro 风格模板ice/miniapp-scaffoldMiniapp Scaffold小程序模板对应的源码实现如下const templates: ITemplate[] [ { npmName: ice/lite-scaffold, description: Web Lite Scaffold }, { npmName: ice/antd-pro-scaffold, description: Antd Pro Scaffold }, { npmName: ice/fusion-pro-scaffold, description: Fusion Pro Scaffold }, { npmName: ice/miniapp-scaffold, description: Miniapp Scaffold }, ];其中第一个模板ice/lite-scaffold被设为defaultTemplate因此直接回车即可使用默认项无需任何输入。2.3 指定模板--template 参数当你知道需要哪种模板时可以直接通过--template参数跳过交互实现完全非交互式创建# use npm $ npm create ice projectName --template template # use yarn $ yarn create ice projectName --template template # use pnpm $ pnpm create ice projectName --template template例如创建一个使用轻量 Web 模板、名为ice-app的项目$ npm create ice ice-app --template ice/lite-scaffold模板值既可以是官方内置模板上表中的 npm 包名也可以传入任意符合 iceworks/generate-project 约定的自定义模板 npm 包名下文会说明模板的加载机制。三、CLI 参数解析入口源码剖析create-ice 的命令行入口是 index.mts它基于commander实现整体逻辑非常清晰#!/usr/bin/env node import * as path from path; import { fileURLToPath } from url; import fs from fs-extra; import { program } from commander; import create from ./create.js; const __dirname path.dirname(fileURLToPath(import.meta.url)); const pkgContent fs.readJSONSync(path.join(__dirname, .., package.json)); (async function () { program .name(create-ice version ${pkgContent.version}) .usage(command [options]); program .option(--template template, select a template); program.on(--help, () { console.log(); console.log(Examples:); console.log( $ npm init ice); console.log( $ npm init ice --template ice/lite-scaffold); console.log(); console.log( $ npm init ice ice-app); console.log( $ npm init ice ice-app --template ice/lite-scaffold); process.exit(0); }); program.parse(process.argv); const dirname: string program.args[0] ? program.args[0] : .; const options program.opts(); const templateName: string options.template ? options.template : program.args[1]; console.log(create-ice version:, pkgContent.version); console.log(create-ice args, dirname, templateName); const dirPath path.join(process.cwd(), dirname); await create(dirPath, templateName, dirname); })();从这里可以总结出几个重要的命令行行为位置参数第一个位置参数projectName作为目标目录名如果省略默认在当前目录.生成项目模板优先级--template选项优先于第二个位置参数即npm create ice my-app my-template这种写法也兼容options.template为空时才读取program.args[1]版本输出启动时打印create-ice version: 1.9.1版本号实时读取自 package.json帮助信息运行npm create ice --help时会输出上述四组示例命令方便记忆目录解析目标路径基于process.cwd()拼接即在你当前所在的终端目录下创建子目录。四、初始化流程create() 的完整执行链真正干活的是 create.ts 中的create(dirPath, templateName, dirname)函数。它按以下顺序执行理解这条链路有助于排查初始化过程中的问题4.1 模板兜底选择if (!templateName) { templateName await selectTemplate(); }未提供模板时进入上文介绍的交互式列表选择返回选中的模板 npm 包名。4.2 目录检查与确认await fs.ensureDir(dirPath); const empty await checkEmpty(dirPath); if (!empty) { const { go } await inquirer.prompt({ type: confirm, name: go, message: The existing file in the current directory. Are you sure to continue?, default: false, }); if (!go) process.exit(1); }先确保目标目录存在fs.ensureDir通过iceworks/generate-project的checkEmpty判断目录是否为空若目录非空会弹出一个确认交互默认选择false即不继续用户必须显式输入确认才会继续否则进程以退出码 1 终止——这是防止覆盖已有文件的安全机制。4.3 内部环境检测与差异化配置const isAliInternal await checkAliInternal(); if (isAliInternal) { ejsOptions { ...ejsOptions, iceConfig: { importDeclarationsStr: import def from \ali/ice-plugin-def\;\n, options: { pluginItemsStr: def(), }, optionsStr: plugins: [ def(), ],, }, esLintConfigOptions: { extends: [ali/eslint-config-att/typescript/react] }, }; extraDependencies { ...extraDependencies, devDependencies: { ali/eslint-config-att: ^1.0.0, ali/ice-plugin-def: ^1.0.0, }, }; }通过ice-npm-utils的checkAliInternal()检测当前网络环境是否属于阿里巴巴内部环境。若是则会自动在生成的工程中注入内部插件ali/ice-plugin-def、内部 ESLint 配置ali/eslint-config-att及对应的devDependencies并在结束时给出提示Detected that you are an Alibaba user, DEF plugin has been added!。普通外部用户不受影响此分支不会执行。4.4 下载模板并生成工程await downloadAndGenerateProject( dirPath, templateName, { ejsOptions, extraDependencies }, );这是核心一步iceworks/generate-project会从 npm 拉取模板包如ice/lite-scaffold按传入的ejsOptions渲染 EJS 模板并合并extraDependencies依赖最终在dirPath下生成完整工程。因此--template也支持传入任意符合约定的 npm 模板包名。4.5 成功提示与下一步指引console.log(); console.log(Initialize project successfully.); console.log(Starts the development server.); console.log(chalk.cyan( cd ${dirname})); if (isAliInternal) { console.log(chalk.cyan( tnpm install)); console.log(chalk.cyan( tnpm start)); } else { console.log(chalk.cyan( npm install)); console.log(chalk.cyan( npm start)); }初始化成功后终端会以青色高亮输出后续操作步骤cd projectName→npm install→npm start内部环境则输出tnpm install/tnpm start。至此一个 ice.js 项目就创建完成了。五、初始化完成后生成的工程长什么样create-ice 生成的是完整可运行的 ice.js 工程。虽然脚手架模板本体是发布在 npm 上的独立包ice/lite-scaffold等仓库内的 examples/basic-project 就展示了一个典型的 ice.js 应用布局可作为参照examples/basic-project/ ├── ice.config.mts # ice.js 构建配置 ├── package.json # 依赖与 start/build 脚本 ├── tsconfig.json ├── mock/ # 本地 mock 数据 └── src/ ├── app.tsx # 应用入口 ├── document.tsx # HTML 文档模板SSR/SSG 时渲染 ├── global.css ├── pages/ # 文件系统路由每个文件对应一个页面 └── types.ts5.1 package.json两个核心脚本生成工程的 package.json 依赖ice/appice.js 构建核心与ice/runtime并默认提供两个脚本scripts: { start: ice start, build: ice build }npm start启动开发服务器默认http://localhost:3000支持热更新与 mocknpm run build构建生产产物。ice start/ice build这两个命令由ice/app提供其 CLI 能力说明见 packages/ice/README.mdice command [options]支持build与start两个子命令。5.2 ice.config.mts零配置之上的可配置生成的工程默认“零配置”即可运行内置对 ES6、TypeScript、Less、Sass、CSS Modules 等的开箱支持需要定制时在ice.config.mts中通过defineConfig开启import { defineConfig } from ice/app; export default defineConfig(() ({ ssr: true, publicPath: /, polyfill: entry, server: { onDemand: true, format: esm }, alias: { comp: ./src/components }, plugins: [customPlugin()], }));完整示例可参考 examples/basic-project/ice.config.mts。可见脚手架只是起点后续的 SSR/SSG、多端、插件体系等能力都由ice/app在构建期接管。5.3 构建期生成的运行时模板工程运行后框架会在构建期生成.ice运行时目录。仓库 packages/ice/templates 中的 EJS 模板如entry.client.tsx.ejs、entry.server.ts.ejs、routes.tsx.ejs、route-manifest.json.ejs、runtime-modules.ts.ejs等正是这些运行时文件的来源负责把文件系统路由、运行时模块、数据加载data-loader等能力组装进最终产物——这也是初始化之后ice.js 应用能够“开箱即用”的底层原因之一。六、从集成测试看标准工作流仓库的集成测试 tests/integration/basic-project.test.ts 以examples/basic-project为例验证了与脚手架产物一致的完整工作流buildFixture(example)执行生产构建断言构建产物包含build/index.html、build/js/main.js、build/js/data-loader.js等关键文件且环境变量替换符合预期__IS_WEB__为 true、__IS_NODE__为 falsestartFixture(example, { mock: true, force: true, https: false, analyzer: false, open: false, mode: start })启动开发服务器断言页面渲染出Home Page还覆盖了热更新修改src/pages/blog.tsx后路由清单更新、客户端路由切换时 title 与 meta 标签更新等行为。这些测试从侧面印证了create-ice 生成的工程正是 ice.js 官方验证过的标准工程形态npm start之后即可正常开发、构建与测试。七、版本演进与维护状态packages/create-ice/CHANGELOG.md 记录了 create-ice 的关键演进版本变更1.9.1修复生产产物 sourceMap url 在未发布 sourceMap 文件时的引用问题1.9.0改用iceworks/generate-project2.x生成脚手架v1.8.2新增 Fusion Design Pro 模板ice/fusion-pro-scaffoldv1.8.1修复fs is not definedv1.8.0添加 ice.js 3 模板v1.7.5增加 TypeScript Ant Design 模板选项可以看到create-ice 的模板与底层生成机制一直在随 ice.js 版本演进当前实现1.9.x将模板下载与工程生成完全委托给iceworks/generate-project自身专注于 CLI 交互、目录检查与差异化注入职责清晰、易于扩展。八、常见问题与注意事项命令形式npm create ice、npm init ice、yarn create ice、pnpm create ice完全等价选用你习惯的包管理器即可npm 版本npm init initializer简写需要 npm 6create-ice 自身的engines要求 Node.js14.19.0非空目录目标目录存在文件时create-ice 会要求二次确认默认拒绝避免误覆盖模板来源模板以 npm 包形式分发如ice/lite-scaffold--template也可指向自定义模板包首次使用需要联网下载内部环境差异阿里巴巴内部网络环境下会自动注入 DEF 插件与内部 ESLint 配置并使用tnpm命令外部环境不受影响安装依赖脚手架只生成工程文件不负责安装依赖请务必执行npm install或对应包管理器命令后再npm start。九、小结create-ice 是进入 ice.js 世界最快的一条路径一条npm create ice projectName --template template命令配合可选的交互式模板选择、目录安全确认、内部环境差异化注入最终通过iceworks/generate-project拉取官方模板生成完整工程。结合 packages/create-ice/src/create.ts 与 packages/create-ice/src/index.mts 的源码以及 examples/basic-project 的工程参照你可以清楚地掌握从命令行参数到工程落地的每一步生成的工程再叠加 packages/ice 提供的构建与运行时能力即可快速进入文件路由、SSR/SSG、状态管理与插件体系等 ice.js 的进阶实践。赞分享前端Web框架SSR前端构建插件系统微前端跨平台【免费下载链接】ice ice.js: The Progressive App Framework Based On React基于 React 的渐进式应用框架项目地址https://gitcode.com/gh_mirrors/ice1/ice点击查看免费下载相关推荐create-ice 深度解析ice.js 项目脚手架工具的演进与源码实现create ice 深度解析ice.js 项目脚手架工具的演进与源码实现 导读 create ice 是 ice.js 官方提供的项目初始化scaffol前端Web框架SSR前端构建插件系统微前端跨平台create-tldraw用一条 npm 命令快速脚手架 tldraw 无限画布应用create tldraw用一条 npm 命令快速脚手架 tldraw 无限画布应用 create tldraw 是 tldraw 官方提供的项目脚手架 CL前端UI组件Umi 脚手架实战指南用 pnpm create umi 一键初始化 React 项目Umi 脚手架实战指南用 pnpm create umi 一键初始化 React 项目 本篇技术指南围绕 Umi 官方脚手架 create umi 展开讲解前端Web框架CLI构建工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考