Запись о разработке библиотеки компонентов TypeScript+Webpack+React

внешний интерфейс TypeScript React.js Webpack

Обзор

Эта статья представляет собой отчет о ямах, возникших при настройке TypeScript + Webpack + React и разработке библиотеки компонентов пользовательского интерфейса и соответствующего решения, которое подходит для соответствующих студентов, чтобы проконсультироваться и решить проблему.

Основное содержание этой статьи:

  • tsconfig.jsПроблемы, возникающие при настройке
  • Проблемы с выбором загрузчика TypeScript
  • Проблемы с вебпаком

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

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

Проблемы, возникающие при разработке

Используйте псевдоним, соответствующий Webpack в проекте

При использовании TypeScript, если вам нужно использовать функцию псевдонима, есть следующие два метода. Справочник по связанным решениямStack OverflowОтвет выше, но есть еще части этого ответа, которые не рассматриваются, мы объясним это, когда представим его ниже.

использовать ts-загрузчик

При использовании TS-Loader в качестве загрузчика для компиляции TypeScript необходимо настроить в TypeScriptbaseUrlа такжеpaths, конкретная конфигурация может относиться к следующему примеру:

{
    "baseUrl": ".",
    "paths": {
        "Src/*": [
            "src/*"
        ],
        "Interfaces/*": [
            "src/interfaces/*"
        ],
        "Components/*": [
            "src/components/*"
        ],
        "Utils/*": [
            "src/utils/*"
        ]
    }
}

Примечание. В путях абсолютные пути не могут начинаться с @, например: разрешить абсолютный путь @utils в src/utils.

существуетtsconfig.jsonПосле завершения настройки используйтеTsConfigPathsPluginплагин для чтения связанных файлов конфигурации вwebpack.config.js, официальная примерная конфигурация выглядит следующим образом:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  ...
  resolve: {
    plugins: [new TsconfigPathsPlugin({ /*configFile: "./path/to/tsconfig.json" */ })]
  }
  ...
}

Таким образом, функцию псевдонима можно использовать с помощью ts-loader.

Используйте awesome-typescript-loader

Рекомендуется использовать этот загрузчик для компиляции TypeScript, по сравнению с ts-loader скорость выше, чем у ts-loader.

При использовании awesome-typescript-loader в ответе на Stack Overflow говорится, что этот плагинtsconfig.jsonФайлы конфигурации автоматически добавляются в Webpack. После практики выяснилось, что когда файл, на который в конечном итоге ссылается абсолютный путь, является интерфейсом, он должен находиться только вtsconfig.jsВы можете найти соответствующий файл, указав его.

Когда файл, на который наконец ссылается абсолютный путь, является функцией, если поле псевдонима веб-пакета не указано, произойдет соответствующая ошибка, напримерModule not found: Error: Can't resolve 'Utils/handle-url'. Нужно решить эту проблему, просто нужно добавить псевдоним той же конфигурации в псевдоним веб-пакета.

Webpack поддерживает суффиксы ts/tsx

Необходимо, чтобы Webpack поддерживал суффикс ts/tsx, должен быть вextensionДобавьте соответствующее значение в поле следующим образом:

{
    "extensions": [".ts", ".tsx"]
}

Примечание. Все поля, которые необходимо добавить, должны сопровождаться знаком «.», иначе Webpack все равно не распознает их.

Не удалось разобрать файл tsx

Произошла ошибкаjsx You may need an appropriate loader to handle this file type..

Нужно решить эту проблему, нужно увеличитьtsconfig.jsonсерединаjsxСоответствующие значения следующие:

{
    "jsx": "react"
}

Не удалось найти @types/csstypes

При компиляции возникает ошибка, что не удается найти @types/csstypes Конкретное содержание ошибкиCannot find module 'csstype'..

Нужно решить эту проблему, нужно увеличитьtsconfig.jsonсерединаjsxСоответствующие значения следующие:

{
    "moduleResolution": "node"
}

Элемент неявно имеет тип «любой», потому что тип «окно» не имеет подписи индекса?

При изменении некоторых файлов JavaScript на файлы TypeScript возникает эта ошибка Проблема, с которой я столкнулся, заключается в следующем: определенный глобальный объект не отформатирован.

Для решения этой проблемы необходимо добавить указанный Интерфейс, формат следующий:

Interface ObjInterface {
    [key: string]:string
}

Суммировать

Эта статья представляет собой проблему, с которой я столкнулся при настройке TypeScript+Webpack+React для разработки соответствующих шаблонов на работе.Вам нужно только прочитать соответствующий каталог, чтобы понять соответствующие проблемы. Когда вы столкнетесь с соответствующей проблемой, вы можете найти и решить ее снова.

Категории