Shopify Polaris 开源项目安装与使用指南

目录结构及介绍

当你克隆了 https://github.com/Shopify/polaris.git 到本地后，你会看到以下主要目录结构：

• .github - 包含GitHub Actions相关的工作流程文件。
• docs - 存放项目文档和示例代码。
• packages - 包含所有的Polaris组件库及其依赖。
  • @shopify/polaris - 主要的Polaris组件库。
  • @shopify/polaris-react - React版本的Polaris组件库。
  • @shopify/polaris-vue - Vue.js版本的Polaris组件库。
  • ...（其他子包）
• scripts - 执行构建、测试等脚本的地方。
• tests - 单元测试和集成测试的存放位置。
• config/ - webpack和babel配置文件。

packages/@shopify/polaris

此目录下的子目录是整个Polaris核心组件的所在地，包括CSS样式、SVG图标、HTML模板等资源。

启动文件介绍

为了运行Polaris并查看其组件在浏览器中的效果，你需要执行以下命令来启动开发服务器：

yarn start # 或 npm start

该指令会在你的默认浏览器中打开一个页面展示所有Polaris组件的实时预览。它通过监视文件更改并在每次保存时自动刷新页面来提供热重载功能。

配置文件介绍

Polaris的配置主要是通过Webpack和Babel进行管理的，它们位于项目的根目录下：

• webpack.config.js: 定义了模块打包规则以及优化选项。
• .babelrc: 控制转换ES6语法到向下兼容的JavaScript的规则。

此外，对于React版本的Polaris组件库，在packages/@shopify/polaris-react/中有特定于React框架的配置，例如React组件所需的propType验证和React lifecycle方法处理的设置。

当你要自定义主题或修改某些组件的行为时，可以参考这些配置文件作为起点，并且了解如何覆盖默认的样式或者行为以满足你的项目需求。

---

以上就是关于Shopify Polaris开源项目的基本介绍，希望这份指南能够帮助你更顺利地理解和使用这个项目。如果你有任何疑问或遇到问题，欢迎查阅项目的官方文档或提交issue寻求支持。