fix(docs): 快速上手文件#3058
Conversation
Walkthrough此次变更更新了 NutUI React 与 Taro 的文档说明，主要内容为转变为手动按需加载组件的方式，移除了通过 CDN 加载的相关内容。配置示例中的组件路径已从 Changes
Sequence Diagram(s)sequenceDiagram
actor 开发者
participant 代码 as "代码入口"
participant Babel插件 as "Babel 插件"
participant 自定义函数 as "customName 函数"
participant 模块解析器 as "模块解析器"
开发者->>代码: 编写组件与全局样式导入语句
代码->>Babel插件: 处理导入语句
Babel插件->>自定义函数: 调用 customName(name)
自定义函数-->>Babel插件: 返回构造的导入路径
Babel插件->>模块解析器: 传递正确的模块路径
模块解析器-->>代码: 加载目标组件
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3058 +/- ##
==========================================
Coverage 86.06% 86.06%
==========================================
Files 275 275
Lines 18234 18234
Branches 2751 2751
==========================================
Hits 15694 15694
Misses 2535 2535
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/sites/sites-react/doc/docs/react/start-react.md (1)
9-9: 标题层级建议调整
当前标题“#### 1. 安装”比前面的标题层级下降过多，建议修改为“### 1. 安装”，以符合 Markdown 标题连续递增的最佳实践。🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
9-9: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4(MD001, heading-increment)
src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1)
138-138: Markdown 格式建议
请检查文档中强调标记内是否存在多余空格，以符合 Markdown 格式规范（MD037）。🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
138-138: Spaces inside emphasis markers
null(MD037, no-space-in-emphasis)
138-138: Spaces inside emphasis markers
null(MD037, no-space-in-emphasis)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/sites/sites-react/doc/docs/react/start-react.en-US.md(4 hunks)src/sites/sites-react/doc/docs/react/start-react.md(5 hunks)src/sites/sites-react/doc/docs/taro/intro-react.en-US.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.md(3 hunks)src/sites/sites-react/doc/docs/taro/start-react.en-US.md(2 hunks)src/sites/sites-react/doc/docs/taro/start-react.md(2 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
138-138: Spaces inside emphasis markers
null
(MD037, no-space-in-emphasis)
138-138: Spaces inside emphasis markers
null
(MD037, no-space-in-emphasis)
227-227: Spaces inside emphasis markers
null
(MD037, no-space-in-emphasis)
227-227: Spaces inside emphasis markers
null
(MD037, no-space-in-emphasis)
src/sites/sites-react/doc/docs/react/start-react.md
9-9: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (17)
src/sites/sites-react/doc/docs/taro/intro-react.en-US.md (1)
7-7: 更新组件数量显示
将组件数量从原来的数值更新为“80+”，反映出组件库功能的扩展。请确保其它地方（如示例及概述）也同步更新此变更。src/sites/sites-react/doc/docs/taro/start-react.md (2)
116-120: 新增按需加载部分说明
本部分新增了“通过插件实现按需引入”的段落，详细说明了手动加载组件时须在入口文件中引入全局样式文件，以加载 NutUI React Taro 的全局逻辑。文档内容清晰，建议在实际项目中验证配置效果。
149-151: 更新 Babel 配置中的 customName 函数
新加入的customName函数可以动态构造组件导入路径，请确认该逻辑对所有组件名称均能产生正确的路径。src/sites/sites-react/doc/docs/taro/start-react.en-US.md (2)
113-117: New On-Demand Import Section
新增了 “Implement On-Demand Import with Plugins” 小节，明确告知用户在手动按需加载时需要额外引入全局样式文件，以确保 NutUI React Taro 全局逻辑和样式正常加载。
145-147: Babel 配置更新
Babel 配置中新增的customName函数用于生成动态导入路径，请确认其在不同组件名称下返回的路径符合预期。src/sites/sites-react/doc/docs/react/start-react.md (2)
44-56: 手动按需加载说明更新
手动按需加载部分详细描述了如何分别引入组件样式和全局样式文件，且路径已由原先的dist/esm更新为dist/es/packages。请确保示例与实际项目结构保持一致。
137-139: 更新 Babel 插件配置
新增的customName函数用于动态生成组件的导入路径，建议在实际使用中测试不同组件名称下返回值的正确性，确保文档示例与项目配置一致。src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (5)
21-21: 不兼容更新说明明确化
更新后的说明提示用户须仔细阅读 NutUI React 从 2.x 到 3.x 的不兼容更新，并依次进行调整。内容明确，有助于降低升级风险。
43-45: 更新 H5 Babel 配置示例
在 H5 版本的 Babel 配置示例中新增了customName函数，以构造正确的组件导入路径。建议用户按照实际路径验证该配置。
65-67: 更新 Taro Babel 配置示例
在 Taro 相关配置中，同样通过新增customName函数调整了组件路径，确保生成的导入路径符合最新目录结构。
73-77: 新增组件说明
新增了 “SideBar” 和 “PickerView” 两个组件，建议后续补充详细的组件 API 说明及示例，便于用户快速上手。
80-81: 不兼容更新提示补充
新增提示提醒用户：若项目中使用了受影响的组件，需仔细阅读相关文档并依次更新。信息清晰，能有效引导用户升级。src/sites/sites-react/doc/docs/react/start-react.en-US.md (5)
20-23: 更新手动按需加载部分标题和描述
文档中新增的“#### 2. Manual On-Demand Loading”标题及其说明语句非常清晰，能够有效引导用户了解如何进行组件的手动导入。
24-27: 代码示例演示正确
示例代码准确展示了如何手动导入单个组件及其对应的样式，且路径更新为dist/es/packages，符合最新的项目结构要求。
29-33: 全局样式引入说明完整
引导用户在按需加载组件时，必须同时在入口文件中导入全局样式（@nutui/nutui-react/dist/styles/themes/default.scss），确保全局逻辑和样式得以加载。说明清楚且具有良好的指导性。
91-97: Vite 配置中的路径更新正确
在 Vite 插件配置中，vitePluginImp的libList部分更新后，通过style方法正确构造了组件样式文件的路径，并使用了name.toLowerCase()转换。该修改确保了路径与实际组件目录的匹配。
137-139: Babel 配置中新增 customName 函数合理
通过在 Babel 插件配置中新增customName函数，实现了动态构造导入路径的功能，确保自动按需加载时能够正确定位组件包。建议确认此配置与项目其他配置的一致性。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/sites/sites-react/doc/docs/react/start-react.md (2)
9-10: 标题层级调整建议
当前这一行使用了四级标题“#### 1. 安装”，但上一级“## 安装”为二级标题，根据 Markdown 的标题层级规范，建议将本行修改为三级标题“### 1. 安装”。🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
9-9: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4(MD001, heading-increment)
59-60: 文案拼写细节修正
在描述自动按需加载时，出现了“扔需”一词，建议修改为“仍需”，以确保语义准确。src/sites/sites-react/doc/docs/react/start-react.en-US.md (1)
20-22: 标题层级调整建议
“#### 2. Manual On-Demand Loading”这一行使用了四级标题，但在“## Install”之后建议使用三级标题。建议修改为“### 2. Manual On-Demand Loading”，以符合标题层级递增的规范。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/sites/sites-react/doc/docs/react/start-react.en-US.md(3 hunks)src/sites/sites-react/doc/docs/react/start-react.md(5 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
src/sites/sites-react/doc/docs/react/start-react.md
9-9: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (10)
src/sites/sites-react/doc/docs/react/start-react.md (5)
44-47: 手动按需加载说明确认
“#### 方法二、手动按需加载”部分以及随后的描述清晰地说明了如何手动引入部分组件，此处内容表述准确，无需修改。
48-51: 手动按需加载示例正确
代码示例中导入按钮组件及样式的路径已更新为dist/es/packages/button，符合最新的目录结构和文档要求。
53-57: 全局样式导入示例确认
全局样式文件@nutui/nutui-react/dist/styles/themes/default.scss的导入说明清晰，符合手动按需加载的要求，请确认在应用入口处也相应引入。
90-95: Vite 配置更新确认
在 Vite 配置示例中，通过vitePluginImp插件返回的新样式路径"@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css"已正确更新，为新目录结构所用。
137-139: Babel 配置更新确认
在 webpack 的 Babel 配置示例中，customName函数已更新为新的路径逻辑，返回值符合变更要求。src/sites/sites-react/doc/docs/react/start-react.en-US.md (5)
22-23: 手动按需加载说明确认
说明文案“You can manually import individual components.”简洁明了，符合预期，无需修改。
24-27: 手动按需加载代码示例正确
代码示例中引入的按钮组件和样式路径已更新为dist/es/packages/button，与文档要求一致。
29-33: 全局样式导入示例确认
全局样式的引入（@nutui/nutui-react/dist/styles/themes/default.scss）以及相应说明表达清晰，建议保持该写法。
80-95: Vite 配置更新确认
在 Vite 配置部分，vitePluginImp插件中的style配置函数已正确返回新的 CSS 文件路径，确保路径按照${name.toLowerCase()}动态生成，符合最新要求。
137-139: Babel 配置更新确认
Babel 配置示例中customName函数返回的路径已更新为"@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}"，实现与文档中描述保持一致。
Summary by CodeRabbit