Научит вас использовать Dumi и Father-build для быстрого создания библиотеки компонентов React.

React.js

1. Предпосылки

В настоящее время бизнес-группа, в которой я состою, отвечает за систему управления фоном, но сторонней библиотеки для используемых компонентов нет, и все разработчики пишут их сами. А вот для Common Project пока в режиме копирования. Потом пришла идея управления общей библиотекой компонентов. В чем преимущество такого подхода?

  • Это может осадить компоненты в группе и избежать дефектов повторного изготовления колеса.
  • Унифицированные компоненты обслуживания, чтобы разные разработчики следовали одному и тому же набору стандартов использования.
  • Его собственная библиотека UI может обеспечить визуальную и интерактивную согласованность системы.
  • Повысьте эффективность разработки продуктов, повторно используйте ресурсы и сократите повторяющиеся разработки.
  • Унифицированный дизайн проекта, правила языка кодирования, более простое общение.
  • Сосредоточьтесь на своем бизнесе, тратьте меньше времени на визуальные требования и больше времени уделяйте написанию своего бизнеса.

2. Выбор технологии (думи + отцовская сборка)

Конечно, поинтересовавшись в Интернете, мы обнаружили, что многие люди делали подобные вещи, и мы можем учиться на большом опыте. Кто-то написал свою конфигурацию. В блоге Юньюна я скринил технологии, отвечающие моим условиям (думи + отцовская сборка). Почему выбирают его?

  • dumi — это подключаемый интерфейсный фреймворк корпоративного уровня для Ant Financial, инструмент документирования, специально разработанный для сценариев разработки компонентов. По сравнению с папиной упаковкой документации компиляция сборки выполняется быстрее и удобнее.
  • отцовская сборка является частью отцовской (библиотеки, объединяющей документацию и упаковку компонентов). Сосредоточьтесь на упаковке компонентов.

Почему я не решил написать его сам? Не только стоимость времени строительства, но и последующая оптимизация и т. д. В настоящее время я не уверен, что у меня получится лучше, чем у тех, кто занимается этим делом. В дальнейшем буду изучать как реализованы великие боги, но на ближайшее время хочу закончить построение своей библиотеки компонентов, поэтому сначала поленюсь ^^.

3. Создание библиотеки документов

@umijs/create-dumi-libГотовый инструмент документирования на основе Umi, ориентированный на разработку и документирование. Выполнение следующей команды инициализирует структуру проекта.

$ npm init
$ npx @umijs/create-dumi-lib

Структура каталогов документов


.umirc.ts

Это конфигурационный файл проекта umi, и думи является передовой практикой umi в разработке библиотек компонентов, но по сути это все еще подключаемый модуль umi, поэтому, пока umi настроен, его можно нормально использовать в думи. .

.fatherrc.ts

Это файл конфигурации отцовской сборки, здесь нужно использовать то, как компилируется библиотека компонентов, и типы, сгенерированные после компиляции.

запускать

бегатьnpm startначать.

4. Пишите компоненты и справочную документацию

Напишите простой пример и документы.

4.1 Настройка логотипа официального сайта (.umirc.ts)

советы: ресурсы нужно размещать вpublicниже каталога. Напримерpublic/image/xxx.png. В противном случае вы не сможете получить доступ.

// .umirc.ts

import { defineConfig } from 'dumi';
let BaseUrl = ''
export default defineConfig({
    mode: 'site', // site: 站点模式（导航头 + 左侧菜单 + 右侧内容）。 doc：文档
    title: 'Biz Library', // 组件库名称
    favicon: BaseUrl + '/images/favicon.ico', 
    logo: BaseUrl + '/images/photos.svg',
    description: '用于Biz Web Dev 前端组件开发。',
});

4.2 Написание компонентов и документации по компонентам

компонент: /src/Dialog/index.tsx

import React, { FC } from 'react';
import './index.less';
interface DialogProps {
  onClick?: React.MouseEventHandler<HTMLElement>;
  type?: 'default' | 'primary' | 'secondary';
  disabled?: boolean;
}
const Dialog: FC<DialogProps> = ({ children, onClick, type = 'dialog' }) => {
  return (
    <div className={'biz_dev_dialog'} onClick={onClick}>
      {children}
    </div>
  );
};
export default Dialog;

css: /src/Dialog/index.less

@btn-prefix-cls: ~'biz_dev';

.@{btn-prefix-cls} {
  &_dialog {
    padding: 6px 16px;
    font-size: 12px;
    min-width: 64px;
    color: red;
  }
}

Документация

  • Документация компонента en: docs/component/dialog.md
  • Документация компонента на китайском языке: docs/component/dialog.zh-CN.md
  • Название пакета Biz-Web-library: это имя в Package.json
import React from 'react';
import { Dialog } from 'biz-web-library'; // 可通过包名引入，而不是相对路径
export default () => <Dialog>dialog example</Dialog>;

запускать

бегатьnpm run start, На данный момент локальная среда разработки завершена, вы можете выполнять отладку во время разработки.

5. Тестирование КИ

Тестирование необходимо для библиотек компонентов. В сборке отца шутка интегрирована для модульного тестирования. Но тестирование компонентов React требует дополнительной настройки.

jest.config.js

module.exports = {
  setupFiles: ['<rootDir>/testSetUp.js'],
  testEnvironment: 'jsdom', // default: jsdom, 可配置： node
};

testSetUp.js

не забудьте установитьenzyme-adapter-react-16а такжеenzyme.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

Пишите тестовые случаи

import React from 'react';
import { render } from 'enzyme';
import Button from '../../src/Button';

describe('test', () => {
	it('test render', () => {
		let Wrapper = render(<Button>case one</Button>);
		expect(true).toBeTruthy();
	})
})

бегатьnpm run test, выполнить через.

6. Полная загрузка и загрузка по требованию

Мы знаем, что многие библиотеки компонентов упаковывают компоненты единообразно и представляют их следующими способами. по умолчаниюfather-buildТо же самое справедливо.

import { componentName } from 'biz-library';

Общие библиотеки (например, antd) импортируются по запросу путем настройки подключаемого модуля babel. И я надеюсь, что мою библиотеку компонентов можно будет импортировать по запросу без настройки плагинов.

import componentName from 'biz-library/componentName';

6.1 Реализовать загрузку по требованию

.fatherrc.ts

так какfather-buildФайл конфигурации, используемый для настройки компиляции библиотеки компонентов и типа компилируемого продукта. Общие настройкиesm: 'rollup'достаточно. Но его недостаток в том, что он будет упакован вместе и не может быть введен по требованию. Поэтому я используюesm: 'babel'.

export default {
  target: 'browser',
  esm: 'babel',
  lessInBabelMode: true, // babel 模式下做 less 编译
  entry: ['src/Button/index.tsx', 'src/Dialog/index.tsx'],
  autoprefixer: {
    browsers: ['ie>9', 'Safari >= 6'],
  },
  pkgs: [
    // 组件依赖构建顺序， 例如 a组件依赖于b组件，那么需要先编译 b,在编译a,则 这里可以控制组件编译顺序
  ],
};

tsconfig.json

О других атрибутах и ​​говорить нечего. "declaration": trueнеобходимо настроить для генерацииtypescriptпроект.d.tsфайлы с суффиксами.

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "lib": ["es2018", "dom"],
    "rootDir": "./",
    "outDir": "es",
    "moduleResolution": "node",
    "importHelpers": true,
    "jsx": "react",
    "esModuleInterop": true,
    "sourceMap": true,
    "baseUrl": "./",
    "strict": true,
    "declaration": true, // 只有declaration设置为true才能生成.d.ts后缀的文件
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "paths": {
      "@/*": ["src/*"],
      "@@/*": ["src/.umi/*"],
      "@@@/*": ["docs/*"]
    },
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["typings", "node_modules/@types"]
  },
  "include": ["src/**/*", "dosc/**/*"],
  "exclude": [
    "node_modules",
    "lib",
    "es",
    "dist",
    "typings",
    "**/__test__",
    "test"
  ]
}

Упаковать и опубликовать в npm

бегатьnpm run buildПосле того, как команда упакована локально, компоненты разделяются один за другим, что открывает нам путь для внедрения по требованию.

бегатьnpm run release, выложите на npm, их можно установить через npm, он использовался в проекте. Npm следует обратить внимание на релизversion: 1.0.0Не будь то же каждый раз.

import React from 'react';
import Button from 'biz-web-library/es/Button';
function App() {
  return (<Button>click me</Button>);
}
export default App;

изменение пути к пакету

Как видно из приведенного выше использования,Buttonне вbiz-web-libraryНиже я на самом деле хочу импортировать по запросу, используя следующее:

import Button from 'biz-web-library/Button';

После запросов я наконец нашел более элегантный способ его использования.Click Me
существуетpackage.jsonНастройте следующую инструкцию в , а затем запустите ее напрямую.npm publishВот и все.

"prepublishOnly": "npm run build && cp -r ./es/* . && rm -rf ./es",
"postpublish": "git clean -fd",
"release": "npm publish",

7. Опубликуйте официальный сайт компонента на GitHub Pages.

На данный момент библиотека компонентов, которую я хочу, написана, и ее можно импортировать полностью или по запросу. Так как же позволить другим видеть нашу библиотеку компонентов. Здесь я используюgithub pages.

конфигурация гитхаба

бегатьnpm run deployДокументы можно развернуть на githubgithub pagesначальство. Это эквивалентно официальному сайту вашего компонента. пожалуйста убедитесьgithubНастройки репозитория компонентов следующие: (Путь: Настройки => Параметры => Страницы GitHub:)

Мы видим сгенерированный адресhttps://yezizhao.github.io/biz-web-library/, оно содержит название заводской библиотеки, поэтому при посещении адреса вы найдетеjsа такжеcssпоявляться404不能访问了。此时不要慌，说明打包产生的路径不正确。 существует.umirc.tsФайл,let BaseUrl = '/biz-web-library';Вы можете изменить его. затем повторитеnpm run deployПросто опубликуйте это.

import { defineConfig } from 'dumi';

let BaseUrl = '/biz-web-library'; // 仓库的路径

export default defineConfig({
  // 网站描述配置
  mode: 'site',
  title: 'Biz Library',
  favicon: BaseUrl + '/images/favicon.ico',
  logo: BaseUrl + '/images/photos.svg',
  description: '用于Biz Web Dev 前端组件开发。',

  // 打包路径配置
  base: BaseUrl,
  publicPath: BaseUrl + '/', // 打包文件时，引入地址生成 publicPath/xxx.js
  outputPath: 'docs-dist',
  exportStatic: {}, // 对每隔路由输出html
  dynamicImport: {}, // 动态导入

  hash: true, //加hash配置，清除缓存
  manifest: {
    // 内部发布系统规定必须配置
    fileName: 'manifest.json',
  },

  // 多国语顺序
  locales: [
    ['en-US', 'English'],
    ['zh-CN', '中文'],
  ],

  // 主题
  theme: {
    '@c-primary': '#16c35f',
  },
});

думи css отсутствует

Теперь ваша веб-страница доступна, но css пропал. На самом деле потому чтоmdПредставленный в нем css указывает на каталог после сборки и не может напрямую указывать на исходный каталог. яpackage.jsonСредняя конфигурацияsideEffectsрешил проблему.

"sideEffects": ["./src/**/*.less"],

78. Заключение

До сих пор была создана простая среда разработки библиотеки компонентов и среда публикации, но в приведенном выше примере фактически используется общедоступная сеть github. Внутренние компоненты компании не должны публиковаться в общедоступной сети, поэтому вам также необходимо создать внутренний частный npm. Описание не будет.

экземпляр примера github:GitHub.com/YMoth Zhao/Be…

Категории