sku 前端开发工具包使用教程

1. 项目介绍

sku 是一个前端开发工具包，由 seek-oss 团队开发并维护。它集成了 Webpack、Babel、Vanilla Extract、ESLint、Prettier 和 Jest 等工具，旨在帮助开发者快速搭建零配置的前端开发环境。sku 特别适用于与 braid-design-system 结合使用，尽管这不是必需的。

该项目的主要目的是提高跨团队协作和代码质量的一致性，尤其是在 SEEK 公司内部。虽然 sku 是开源的，但其设计初衷是为了满足特定需求，因此可能不完全适合所有场景。对于其他需求，可以考虑使用 Vite 或 Parcel 等替代方案。

2. 项目快速启动

2.1 安装

首先，使用 pnpm 安装 sku：

pnpm dlx sku init my-app

2.2 启动开发环境

进入项目目录并启动开发服务器：

cd my-app
pnpm start

2.3 可选配置

如果你希望使用其他包管理器（如 yarn），可以在初始化时指定：

pnpm dlx sku init --packageManager yarn my-app
cd my-app
yarn start

3. 应用案例和最佳实践

3.1 与 braid-design-system 结合使用

sku 特别设计用于与 braid-design-system 结合使用，以提高开发效率和代码一致性。以下是一个简单的示例，展示如何在一个项目中同时使用 sku 和 braid-design-system。

import React from 'react';
import { Box, Text } from 'braid-design-system';

const App = () => (
  <Box padding={3}>
    <Text>Hello, World!</Text>
  </Box>
);

export default App;

3.2 自定义配置

虽然 sku 提供了零配置的开发环境，但在某些情况下，你可能需要添加一些自定义配置。例如，你可以通过修改 sku.config.js 文件来调整 Webpack 配置。

module.exports = {
  webpack: (config) => {
    // 自定义 Webpack 配置
    return config;
  },
};

4. 典型生态项目

4.1 braid-design-system

braid-design-system 是一个设计系统，与 sku 结合使用可以显著提高开发效率和代码一致性。它提供了丰富的 UI 组件和样式工具，帮助开发者快速构建一致的用户界面。

4.2 eslint-config-sku

eslint-config-sku 是 sku 推荐的 ESLint 配置，集成了许多最佳实践和规则，帮助开发者编写高质量的代码。

4.3 jest-sku

jest-sku 是 sku 推荐的 Jest 配置，提供了针对前端项目的测试工具和配置，帮助开发者进行单元测试和集成测试。

通过以上模块的介绍和示例，你应该能够快速上手并使用 sku 进行前端开发。希望这篇教程对你有所帮助！