Создайте библиотеку webpack- typescript для использования в другом webpack-проекте typescript с npm

Как создать библиотеку typescript с webpack, которую я могу использовать в другом проекте typescript, управляемом webpack?

В проекте ES6 я могу оставить все файлы как ES6 в библиотеке, а в моем клиентском приложении webpack скомпилирует мою библиотеку в ES5 с некоторой конфигурацией. Однако с ts-loader он не будет компилировать любые ts файлы в node_modules и вместо этого ожидает, что файлы будут скомпилированы с соответствующим файлом типизации.

1.) Как настроить сборку библиотеки в проекте библиотеки для создания соответствующих css, файлов и скомпилированного javascript с типом?

2.) Как только у меня будет подходящая сборка, как я могу использовать эти файлы в другом проекте?

У меня есть ряд компонентов angular2, поэтому мне нужны изображения /css/javascript для переноса компонентов из библиотеки и использования в клиентском приложении. Оба приложения имеют тяжелые внешние зависимости, управляемые webpack.

ОТВЕТЫ

Ответ 1

awesome-typescript-loader позволяет использовать typescript непосредственно из node_modules.

Ответ 2

Связывание пакетов

Пусть сначала укажите результат:

Ваши компоненты Angular находятся в папке shared, которая также содержит следующий файл package.json:

{
  "name": "shared",
  "private": true,
  "version": 0.0.0,
  "dependencies": {
    [...additional dependencies...]
  }
}

В папке projectA и projectB находятся два проекта, которые потребляют ваш общий пакет, написав:

{
  [...]
  "dependencies": {
    [...]
    "shared": "file:../shared"
    [...]
  }
}

В настоящее время разные версии npm и yarn обрабатывают ситуацию по-другому:

  • npm < 5.0.0 копирует папку shared в локальную папку node_modules при запуске npm install. Поэтому, если вы изменяете какие-либо общие компоненты Angular, вам необходимо повторно запустить команду установки. Поскольку это может быть субоптимальным во время разработки, можно использовать linklocal для создания символической ссылки вместо копирования всей папки.

  • npm >= 5.0.0 ведет себя как linklocal, он просто создает символическую ссылку во время работы npm install. (Примечание: если во время npm install вы столкнулись с ошибкой, это может быть из-за # 16812, который исправлен в версии 5.0. 3-canary.8 (просто запустите npm i -g [email protected]))

  • yarn ведет себя как npm < 5.0.0, на момент написания есть не планирует изменять это поведение, но ссылка по крайней мере, возможно running yarn link.

Компиляция

Для компиляции файлов Typescript и SASS существует несколько параметров:

Весьма полезный вариант (особенно для разработки) заключается в том, чтобы хранить только ваши файлы TS, SASS (и изображения) в вашем общем пакете. Затем вы можете включить эти файлы в свой проект (например, с помощью include SampleComponent from 'shared/path/to/file'), они будут скомпилированы в соответствии с правилами вашего модуля в конфигурационных файлах ваших проектов (не забудьте удалить папку node_modules из ваш список исключений tsconfig или используйте files свойство или просто переключитесь на awesome-typescript-loader вместо ts-loader).

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

Поэтому, как вы упомянули, вы можете использовать webpack в своем совместном проекте для его ручной компиляции. Вам просто нужен файл webpack.config.js, похожий на один из ваших основных проектов (который включает компилятор Typescript (с флагом declaration компилятора, установленным для генерации файлов .d.ts) и компилятором SASS и возможно, плагин extract-text-webpack-plugin для извлечения вашего скомпилированного CSS-кода в отдельный файл).

Внутри projectA и projectB вы можете использовать общий пакет, как и любой другой пакет npm (не забудьте указать файл CSS и скопировать изображения из вашего плагина в папку dist с помощью file-loader плагин).

Используя второй подход, по-прежнему можно использовать сервер webpack dev, однако вам нужно настроить (и запустить) два процесса: один, который следит за общей папкой и перекомпилирует пакет и один (в рамках вашего проекта), который следит за изменениями в пакете скомпилированных файлов.

Ответ 3

Вариант 1:

Если вы хотите самостоятельно построить библиотеку, вам следует, вероятно, пойти с одним из нескольких стартеров библиотеки, например: https://github.com/Hotell/typescript-lib-starter А затем просто импортируйте модуль javascript node.

Вариант 2:

Также никто не останавливает вас от создания модуля node только с вашими файлами и активами typescript без компилируемого javascript. Вы можете опубликовать это или связать его с локальной папкой с npm link.

Затем вы просто используете относительный typescript импорт, как это.

import {Foo} from "../../node_modules/typescript-example-lib/src/index"

Прямо импортируемый файл будет подхвачен компилятором typescript, даже если вы исключили node_modules в tsconfig.json. Остальная часть материала должна автоматически обрабатываться Webpack. Просто не забудьте исключить этот путь из вашего typescript -loader в Webpack.

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

Ответ 4

Есть много способов сделать это.

Вариант 1 - Сборка script

Используйте что-то вроде gulp-ts, grunt-ts или просто пакет script, чтобы скопировать файлы в папку в основном проекте.

В качестве альтернативы запустите событие сборки в Visual Studio, которое скопирует файлы в основной проект.

Вариант 2 - пакет npm

Если вы используете npm, вы можете создать пакет для своего другого проекта. Затем вы можете использовать свой пакет в своем основном проекте. Указание локальной зависимости - это хороший способ сделать это или используя что-то вроде sinopia, который является частным сервером репозитория. Я никогда не использовал его, но похоже, что он будет работать хорошо.

Вариант 3 - пакет NuGet

Вы можете посмотреть создание пакета nuget, а затем установить его локально.

Вариант 4 - --declaration --outDir вариант компилятора

Вы можете установить параметр компилятора --outDir или свойство outDir в tsconfig.json с каталогом в другой проект, а затем скомпилировать его с помощью --declaration, чтобы он также генерировал файлы декларации (.d.ts), Например: --declaration --outDir ../Test1/External.

И последнее, но не менее важное (использование --out)

Вы можете сделать что-то подобное в Visual Studio, если вы щелкните правой кнопкой мыши на проекте библиотеки и щелкните свойства. В TypeScript Build tab отметьте опцию Combine JavaScript output into file и укажите местоположение в своем основном проекте, который вы хотите, чтобы он прошел (пример $(SolutionDir)/TypedApp/External/TypedLibrary.js). Затем также отметьте Generate declaration files, чтобы сгенерировать файл .d.ts.

Настройка проекта для автоматизированных построек

Как только это будет сделано, создайте проект библиотеки, а затем включите .js и .d.ts в свой основной проект. Добавьте файл .js в свой html и укажите .d.ts в своих файлах typescript.

Включить файлы в основной проект

Каждый раз, когда вы перестраиваете проект библиотеки, он автоматически обновляет основной проект с изменениями.