Создайте автономный компонент React для доставки в CDN с помощью umijs.

После создания приложения React и MyModule я создаю html-файл для теста:

      <!-- MAIN.html -->
<body>
    <div id="root"></div>
    <script src="http://localhost/cdn/js/MyModule.js.js"></script>
    <script>
        MyModule.mount()
    </script>
</body>

Примечание. При монтировании компонента в админке все работает нормально. Но в базовом HTML-тесте не загружен стиль.

Результат

Как загрузить только мой собственный CSS и необходимый стиль antd , не переопределяя CSS телаMAIN.htmlфайл ?

Я заметил, чтоMyModule.js.604c4d96.cssбыли сгенерированы с помощью хеша.

Ожидал

Я пытаюсь доставить модуль React как в файле js. Для этого я создал три файлаMyComponent.tsx,MyComponent.less,MyModule.tsxзатем добавьте запись вconfig.ts.

      // config.ts
//...
chainWebpack(config) {
  config.entry('MyModule.js').add(path.join(__dirname, '/../src/cdn/js/MyModule.tsx'));
  config.output.filename((chunkData) =>
    chunkData.chunk.name === 'umi' ? '[name].[contenthash:8].js' : 'cdn/js/[name]');
}
//...

      // MyModule.tsx
import MyComponent from '@/components/MyComponent';
import { render } from 'react-dom';

const MyModule = {
  mount(element: string = '#root') {
    const container = window.document.querySelector(element);
    if (!container) {
      throw new Error(`Can't found element ('${element}') in your document`);
    }
    render(<MyComponent />, container);
  },
};

window.MyModule = MyModule;

      // MyComponent.tsx
import 'antd/dist/antd.css';
import { Form, InputNumber, Select } from 'antd';
import styles from './MyComponent.less';

const MyComponent: React.FC = () => {
  return (
    <Form className={styles.MyStyle}>
      <InputNumber />
      <Select />
    </Form>
  );
};

export default MyComponent;

      /* MyComponent.less */
.MyStyle {
  background-color: #f00;
}

Заранее спасибо !

Источник

0 ответов

Другие вопросы по тегам