woocommerce/packages/js/zh-cn/README.md
2026-04-15 10:18:01 +08:00

3.2 KiB

WooCommerce 包

当前我们有一组面向公开的包,可以从 npm 下载并在外部应用程序中使用。以下是一个非详尽列表。

  • @woocommerce/components:一个组件库,可用于在 WooCommerce 仪表板和报告页面中创建页面。
  • @woocommerce/csv-export:一组函数,用于将数据转换为 CSV 值,并启用浏览器下载 CSV 数据。
  • @woocommerce/currency:一个用于显示和处理货币价值的类。
  • @woocommerce/date:一组用于显示和处理日期值的实用工具。
  • @woocommerce/navigation:一组与导航相关的函数,用于处理查询参数对象、序列化查询参数、更新查询参数以及触发路径更改。
  • @woocommerce/tracks:用于基于 Automattic 项目的用户事件跟踪实用函数。

处理现有包

  • 您可以像往常一样修改包文件,运行 pnpm start 将编译并监视应用文件和包文件。
  • ⚠️ 使用 pnpm add 从包根目录添加任何依赖项。
  • ⚠️ 确保您没有从包外部的任何其他文件导入(您可以从其他包导入,只需使用 import from @woocommerce/package 语法)。
  • 不要更改 package.json 中的版本。
  • 使用 Packages 标签标记您的 PR。
  • 有关如何发布包的说明,请参阅包发布工具

创建新包

大部分内容参考古腾堡工作流程

要创建新包,请在 /packages 目录下添加一个新文件夹,其中包含…

  1. 基于以下模板的 package.json 文件:

    {
     "name": "@woocommerce/package-name",
     "version": "1.0.0-beta.0",
     "description": "Package description.",
     "author": "Automattic",
     "license": "GPL-2.0-or-later",
     "keywords": [ "wordpress", "woocommerce" ],
     "homepage": "https://github.com/woocommerce/woocommerce/tree/trunk/packages/js/[_YOUR_PACKAGE_]/README.md",
     "repository": {
      "type": "git",
      "url": "https://github.com/woocommerce/woocommerce.git"
     },
     "bugs": {
      "url": "https://github.com/woocommerce/woocommerce/issues"
     },
     "main": "build/index.js",
     "module": "build-module/index.js",
     "react-native": "src/index",
     "publishConfig": {
      "access": "public"
     }
    }
    
  2. .npmrc 文件,用于禁用为此包创建 package-lock.json 文件:

    package-lock=false
    
  3. README.md 文件,至少包含:

    • 包名称
    • 包描述
    • 安装详情
    • 使用示例
  4. 一个 src 目录,用于存放模块的源代码。注意,你需要一个 index.js 文件来导出包内容,可以参考其他包的示例。

  5. 一个空白的更新日志文件 changelog.md

    # 更新日志
    
    本项目遵循[语义化版本控制](https://semver.org/spec/v2.0.0.html)。
    
  6. 将新包名称添加到 packages/js/dependency-extraction-webpack-plugin/assets/packages.js 中,以便该插件的用户也能在不手动入队的情况下使用新包。