WebPack-React-TypeScript: загрузка CSS и экспорт типов

Question

Вопрос

Я создаю библиотеку компонентов пользовательского интерфейса для повторного использования в моих проектах. Библиотека написана на TypeScript и .less с React и построена с помощью WebPack.

.
├── README.md
├── dist
├── index.js
├── package-lock.json
├── package.json
├── src
│   ├── Span
│   │   ├── Span.less
│   │   └── index.tsx
│   └── Tag
│       ├── Tag.less
│       └── index.tsx
├── tsconfig.json
├── types
│   └── custom.d.ts
└── webpack.config.js

Каждый компонент экспортируется как именованный модуль. В WebPack я извлекаю каждый .ts файл как запись, пропускаю его через ts-loader и выводю его в папку dist в другой папке с именем модуля. Затем я обрабатываю файлы объявлений TypeScript и отправляю их в эту структуру папок. С файлом index. js в папке root я импортирую каждый модуль из их папки и экспортирую его как именованный модуль, используя общий синтаксис js.

// ./index.js
exports.Span = require('./dist/Span').Span;
exports.Tag = require('./dist/Tag').Tag;

В пакете. json Я объявляю files моего npm модуля как [ "/dist", "index.js" ]; Таким образом, опубликованный модуль npm будет:

.
├── dist
│   ├── Span
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   └── index.js.map
│   └── Tag
│       ├── index.d.ts
│       ├── index.js
│       └── index.js.map
└── index.js

Наконец, из моего клиентского кода я могу импортировать эти компоненты как именованные модули, например:

// client code
import { Span, Tag } from 'components_library_example';

Мои вопросы:

1. В настоящее время файлы css не загружаются.

   • Есть ли какая-либо причина, по которой мой клиентский код не может прочитать встроенный код css?
   • Другим решением будет использование MiniCssExtractPlugin для извлечения css и импорта стилей из index.js; легко в теории, но на самом деле это кажется невозможным. Есть ли хороший подход?

2. В настоящее время, когда я импортирую компоненты, машинопись не распознает файлы объявлений, поэтому я теряю все типы.

   • ¿Как я могу экспортировать модули в index.js, чтобы обеспечить доступ к файлам декларации .d.ts?

Спасибо!

---

Примечание: мой веб-пакет conf:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  name: 'server',
  entry: {
    Span: path.join(__dirname, 'src/Span/index.tsx'),
    Tag: path.join(__dirname, 'src/Tag/index.tsx'),
  },
  output: {
    filename: '[name]/index.js',
    path: path.join(__dirname, 'dist'),
    libraryTarget: 'commonjs2',
    globalObject: "(typeof self !== 'undefined' ? self : this)", 
    library: 'MyLib',
    umdNamedDefine: true,
  },
  target: 'node',
  devtool: '#source-map',
  externals: [nodeExternals(), 'react'],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        loader: ['ts-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.(less|css)$/,
        use: ['css-loader', 'less-loader'],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  stats: 'errors-only',
  plugins: [
    new CleanWebpackPlugin({
      dry: false,
      verbose: true,
      protectWebpackAssets: false,
      cleanOnceBeforeBuildPatterns: [path.join(__dirname, 'dist', '/**/*')],
    }),
  ],
};

Answer 1

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

В настоящее время файлы css не загружаются. Есть ли причина, по которой мой клиентский код не может прочитать встроенный код css?

Ваши стили включены в связанные файлы, но не будут применяться. Стили должны быть каким-то образом вставлены в страницу, и обычно для этого используется загруженный стиль . Инъекция является побочным эффектом, поэтому ваша библиотека не будет подвержена влиянию дерева.

В зависимости от того, как вы собираетесь использовать библиотеку, я бы посоветовал избегать импорта стилей в компоненты и один из следующих:

1. Предоставляйте потребителям как можно меньше файлов, если потребительское приложение использует веб-пакет и будет обрабатывать меньше собственных файлов
2. Обрабатывать меньше файлов и предоставлять один файл css, который можно включить в индекс. html в тем не мение. Это может подойти в случае потребителя, у которого нет процесса сборки, скажем, просто stati c html. И да, это кажется маловероятным, поскольку ваши компоненты должны реагировать :)
3. Используйте какое-нибудь решение css -in- js. Именно так большинство библиотек реагирует в 2020 году.

В настоящее время, когда я импортирую компоненты, машинопись не распознает файлы объявлений, поэтому я теряю все типы. Вы можете добавить index.d.ts файл в root вашей библиотеки и повторно экспортировать туда все типы компонентов

export * from './src/Span';
export * from './src/Tag';

Если вы хотите разместить их где-то еще , вам нужно указать types поле в вашей упаковке. json