Использование Ant Design of React в приложении create-реагировать с Eject

внешний интерфейс React.js Babel Ant Design

На официальном сайте Ant Design есть ответ на вопрос «Какreact-app-rewiredзагрузка по запросу», см.Использовать в приложении create-реагироватьОдна статья, в статье есть такой абзац

Вы также можете открыть все встроенные конфигурации с помощью команды запуска пряжи, предоставляемой приложением create-react-app. Однако этот метод настройки требует вашего собственного исследования, которое выходит за рамки этой статьи.

В этой статье в основном исследуется метод Eject.

Создайте проект с помощью приложения create-реагировать

Ссылаться на:Как расширить конфигурацию Webpack приложения Create ReactСпособ извлечения

Сначала создайте проект с помощью приложения create-реагировать

$ create-react-app antd-test

После создания проекта перейдите в каталог проекта и выполните yarn run eject или npm run eject.

$ npm run eject

После выполнения появится подсказка, операция необратима, выберите y, чтобы продолжить

После успешного извлечения конфигурация webpack будет раскрыта, а package.json добавит множество зависимостей.

установить и

Установить antd с помощью cnpm

$ cnpm install antd

Исправлятьsrc/App.js, который вводит компонент кнопки antd.

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

Выполните установку cnpm, чтобы установить зависимости и запустить проект.

$ cnpm install
$ npm start

После запуска обнаруживается, что у кнопки нет стиля, и необходимо импортировать css-файл antd.

Исправлятьsrc/App.css, импортируется вверху файлаantd/dist/antd.css.

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

Используйте babel-plugin-import для импорта стилей antd по требованию.

импортировать в начало файлаantd/dist/antd.cssНа самом деле загружает все стили компонентов и компонентов (скрытая опасность для производительности интерфейса).babel-plugin-importэто плагин Babel для загрузки по требованию кода компонентов и стилей (принцип)

$ cnpm install babel-plugin-import --save-dev

Исправлятьsrc/App.js

...
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
...

затем удалите предыдущийsrc/App.cssДобавить всего добавлено@import '~antd/dist/antd.css';

В настоящее время стиль кнопки не действует, самый простой способ - изменитьpackage.jsonКонфигурация babel в файле, добавьте конфигурацию babel-plugin-import

...
  "babel": {
    "presets": [
      "react-app"
-    ]
+    ],
+   "plugins": [
+      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+    ]
  }
...

сделай это сноваnpm start, стиль снова вступает в силу

До сих пор был исследован метод введения antd по запросу с помощью метода Eject.

Категории