Модули TypeScript в node_modules, но развернутые в wwwroot

Question

Для веб-приложения ASP.NET Core 2.x я бы ожидал, что это будет очень просто, как стандартный шаблон. Я явно делаю это очень неправильно.

У меня есть эта структура папок.

projectRoot
├── node_modules
│   ├── jquery
│   └── // others you'd see in node_modules
├── wwwroot
│   ├── lib
│   │   ├── jquery
│   |   │   └── dist
|   │   |   │   └── jquery.js
│   │   └── // others copied by specific Gulp tasks from node_modules
│   ├── js
│   │   └── site.js // generated from site.ts
│   ├── css
│   └── page.html // script tag to /js/site.js
├── ts
│   └── site.ts
├── gulpfile.js
└── tsconfig.json

Теперь моя проблема в том, что в моем site.ts мне нужно импортировать из jquery

// site.ts
import $ from "???"

Но я не могу понять путь, учитывая:

1. Это в конечном итоге записано в site.js

2. Он должен быть доступен из браузера.

3. Он должен быть разрешен компилятором TypeScript.

4. Компилятор TypeScript, похоже, использует node_modules\@types\jquery

Вот мой tsconfig.json. Обратите внимание, что я использую задачу Gulp для компиляции моих .ts файлов, хотя я не добавляю никаких дополнительных настроек, поэтому, кажется, что используется json ниже.

{
    "compilerOptions": {

        "module": "es2015",
        "baseUrl": "./wwwroot/js/", // This must be specified if "paths" is.
        "paths": {
            "*": [ "./node_modules/@types/*" ],
            "../lib/jquery/dist/jquery.js": [ "./node_modules/jquery/dist/jquery" ] // This mapping is relative to "baseUrl"
        },
        "esModuleInterop": true,
        "moduleResolution": "node"
    }
}

Я играл с baseUrl и paths, чтобы заставить его работать.

Либо TypeScript разрешает его, но в браузере его путь один раз неверный - я полагаю, это потому, что Chrome не может найти путь:

import $ from "lib/jquery/dist/jquery";

Uncaught SyntaxError: Неожиданный идентификатор

Или TypeScript не разрешает и не компилирует.

Опять же, я бы предположил, что это не необычная установка.

Answer 1

Чтобы использовать jquery с угловым, мне нужно установить 2 пакета

npm install jquery --save
npm install @types/jquery --save

Затем в разделе скриптов файла architect => build angular.json я добавлю путь для jquery lib

"scripts": [
  "node_modules/jquery/dist/jquery.min.js"
]

Тогда в tsconfig.app.json. Добавьте jquery в раздел типов, и вы должны быть хороши, поэтому нет необходимости импортировать $ везде

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

Обновление

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

Но некоторые сторонние библиотеки, такие как jquery, mathjax, предоставляют нам только js-файл, поэтому мы можем импортировать его только в angular.json, чтобы использовать его глобально.

Так что от библиотеки зависит, экспортируют ли нам API или нет

Answer 2

Так что, похоже, я вообще не должен импортировать jquery, но какая-то магия заставляет его просто работать.

Как импортировать JQuery в файл Typescript?

Я удалил свой оператор импорта, и он просто сработал.

Тем не менее, я все еще не уверен, как, если бы я хотел использовать какой-то другой модуль JS таким образом, мне нужно было бы настроить TypeScript для этого расположения папок, поэтому я оставляю вопрос открытым.