Как использовать ссылку npm с модулем, написанным с использованием TypeScript для разработки? - PullRequest
Новая
       71

Как использовать ссылку npm с модулем, написанным с использованием TypeScript для разработки?

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

Я создаю библиотеку, используя TypeScript и Webpack.

Для разработки этой библиотеки я создал отдельный тестовый проект (написанный с использованием JS) и связал библиотеку с помощью npm link <package-name>.

Проблема в том, что ссылка ведет к файлу сборки, и мне нужно запускать npm run build каждый раз, когда я вносю изменения.

Я хочу иметь ссылку на исходный файл и выполнить перезагрузку в реальном времени. Является ли это возможным? Нужно ли писать свой тестовый проект, используя TS, чтобы это стало возможным?

Библиотека package.json: 

{
  ...
  "main": "lib/qr-code-styling.js",
  "files": [
    "lib"
  ],
  "scripts": {
    "build": "webpack --mode=production"
  },
  ...
}

Код библиотеки https://github.com/kozakdenys/qr-code-styling/tree/v1

Кодтестового проекта https://github.com/kozakdenys/qr-code-styling-site

PS Я также пытался "module": "src/index.ts" в package.json, но это вызывает ошибку в тестовом проекте Uncaught Error: Cannot find module './core/QRCodeStyling'

Ответы [ 2 ]

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

Да, вам также нужно написать свой тестовый проект на TypeScript. После этого вам необходимо сопоставить пакет с исходными файлами связанного модуля в файле тестового проекта tsconfig.

В записи compilerOptions файла tsconfig добавьте baseUrl и paths запись, как в следующем примере: 

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "linked-module-name": ["node_modules/linked-module-name/src"],
      "linked-module-name/*": ["node_modules/linked-module-name/src/*"],
    }
  }
}

Подробнее о сопоставлении путей в документах TypeScript .

0 голосов
/ 19 октября 2019

Это можно настроить для вашего файла tsconfig.json, так как это функция TS.

Вы можете сделать это следующим образом: 

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

Имейте в виду, что path где вы хотите сослаться, он берет baseUrl в качестве основы route, на которую вы указываете, и обязательный , как описано в документе.

Символ ' @ 'не является обязательным.

После того, как вы настроите его таким образом, вы можете легко использовать его так: 

import { Yo } from '@config/index';

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

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

выможете оформить заказ здесь

https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea

...