@abr-ya/lib-travel-kit-demo 中文文档教程

Question

Demo Travel UI-kit

• React
• Typescript
• StoryBook
• TailwindCSS
• Figma
• TSDX

Custom installation instructions

首先我们使用 tsdx 来设置我们的 react + storybook。

npx tsdx create courseStorybook
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

如果在前面的步骤中出现错误（“从注册表收到格式错误的未定义响应。注册表可能已关闭。”），请尝试

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

现在我们可以在项目中初始化 TailwindCSS

npx tailwindcss init

在根目录中创建 tsdx.config.js

// tsdx.config.js

module.exports = {
  rollup(config, options) {
    options.env = "production";

    return config;
  },
};

在 / 中创建 tailwind.css src

// src/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

在 index.tsx

import './tailwind.css`;

最后，检查你缺少哪些包需要安装（通过 package.json）。

Commands

build:css

• Install postcss globally: npm install postcss-cli -g Then run yarn build:css

TSDX 在 /src 中搭建你的新库，并在 / 中为它设置一个 Parcel-based playground示例。

推荐的工作流程是在一个终端中运行 TSDX：

npm start # or yarn start

这构建到 /dist 并以监视模式运行项目，因此您在 src 中保存的任何编辑都会导致重建到 /分布。

然后运行 ​​Storybook 或示例游乐场：

Storybook

在另一个终端内运行：

yarn storybook

这会从 ./stories 加载故事。

注意：故事应该像使用库一样引用组件，类似于示例游乐场。 这意味着从根项目目录导入。 这在 tsconfig 和 storybook webpack 配置中被别名为 helper。

Example

然后在另一个内部运行该示例：

cd example
npm i # or yarn to install dependencies
npm start # or yarn start

默认示例导入并实时重新加载 /dist 中的任何内容，因此如果您看到过时的组件，请确保 TSDX 像我们上面推荐的那样以监视模式运行. 不需要符号链接，我们使用包裹的别名。

要进行一次性构建，请使用 npm run build 或 yarn build。

要运行测试，请使用 npm test 或 yarn test。

Configuration

使用 prettier、husky 和 lint-staged 为您设置代码质量。 相应地调整 package.json 中的各个字段。

Jest

Jest 测试设置为使用 npm test 或 yarn test 运行。

Bundle analysis

使用 size-limit 和 npm run size 计算你的库的实际成本，并用<代码>npm 运行分析。

Continuous Integration

GitHub Actions

默认添加两个操作：

• main which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
• size which comments cost comparison of your library on every pull request using size-limit

Named Exports

根据 Palmer Group 指南，始终使用命名导出。 代码拆分在您的 React 应用程序中而不是您的反应库。

Including Styles

发布样式的方法有很多，包括使用 CSS-in-JS。 TSDX对此没有意见，自己喜欢怎么配置。

对于 vanilla CSS，您可以将其包含在根目录并将其添加到您的 package.json 中的 files 部分，以便您的用户可以单独导入它并运行他们的捆绑程序的加载程序。

Publishing to NPM

我们推荐使用 np。

TSDX 文档。