Create-реагировать-приложение + TypeScript + модули CSS: автоматическая генерация определений типов без извлечения из CRA - PullRequest
Новая
       81

Create-реагировать-приложение + TypeScript + модули CSS: автоматическая генерация определений типов без извлечения из CRA

1 голос
/ 14 октября 2019

Проблема

create-react-app v2 + поддерживает модули TypeScript и CSS из коробки ... отдельно. Проблема возникает, когда вы пытаетесь использовать два вместе. Facebook подробно обсудил эту проблему и в конечном итоге закрыл ее на GitHub. Поэтому разработчикам приходится использовать хаки и другие обходные пути, чтобы эти две технологии хорошо сочетались вместе с CRA.

Существующий обходной путь :

Вы можете вручную создавать ComponentName.module.css.d.ts файлыс такими определениями типов: export const identifierName: string. Это позволяет вам воспользоваться преимуществами набора текста TypeScript и автозаполнения кода VS при переходе на импорт ComponentName.module.css. К сожалению, это очень утомительно.

Решение (?) :

Люди в Dropbox создали typed-css-modules-webpack-plugin для решения этой проблемы;он автоматически генерирует эти *.d.ts файлы для вас. Они показывают, как установить его с помощью yarn или npm, а затем приводят следующий пример минимального кода: 

const path = require('path');
const {TypedCssModulesPlugin} = require('typed-css-modules-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          // Use CSS Modules
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  // Generate typing declarations for all CSS files under `src/` directory.
  plugins: [
    new TypedCssModulesPlugin({
      globPattern: 'src/**/*.css',
    }),
  ],
};

К сожалению, не сразу понятно, как я могу использовать это с create-react-app. Я не очень хорошо осведомлен, когда дело доходит до Webpack, и я использую customize-cra, чтобы избежать извлечения из create-react-app, поэтому я могу настроить конфиги Webpack для некоторых вещей, которые мне нужны. Например, Ant Design позволяет импортировать компоненты по требованию, используя babel-plugin-import, как подробно описано здесь:

https://ant.design/docs/react/use-in-typescript#Use-babel-plugin-import

Вопрос : Как я могу преобразовать вышеуказанный веб-пакеткод конфигурации в customize-cra эквиваленте, так что мне не нужно извлекать из CRA?

...