Как заставить Webpack и Typescript использовать внешнюю папку node_module?
Установка
У меня есть модуль bluebird вместе с @types/bluebird, установленным в папке node_modules.
У меня также есть несколько файлов .ts, которые будут объединены с помощью Webpack и использоваться в браузере.
По разным причинам папка node_modules находится вне иерархии путей моих файлов .ts.
Эта проблема
Я хотел бы импортировать модуль bluebird в мои файлы .ts таким образом, чтобы:
- Я получаю отпечатки.
- Webpack разрешит модуль и включит его в выходной пакет.
Если бы node_modules был в нужном месте в иерархии путей, я мог бы просто сделать это:
import * as Promise from 'bluebird'
Компилятор Typescript (через ts-loader) преобразует определения типов в node_modules/@types/bluebird и проверяет тип кода, а Webpack преобразует фактический модуль в node_modules/bluebird и передает его в комплекте.
Однако с внешней папкой node_modules я не могу заставить это работать.
Подходы, которые я пробовал
Пока я могу понять, что Typescript доволен, но не Webpack.
1. Установка baseURL и paths в tsconfig.ts
Самым очевидным решением для меня казалось установить baseURL и установить paths в node_modules в tsconfig.json следующим образом (shared содержит папку node_modules):
"baseUrl": "..",
"paths": {"shared/*":["shared/*"]}
Однако я не могу:
import * as Promise from 'shared/node_modules/bluebird'
Мне нужно:
import * as Promise from 'shared/node_modules/@types/bluebird/index'
Но этот импорт не работает для Webpack. Он либо не может его найти, либо, если я настрою его на поиск, ts-loader не захочет его компилировать (потому что это файл декларации), или, если я настрою его игнорировать его, он выйдет из строя во время выполнения, потому что его там нет.
2. Относительный импорт
Я попытался указать относительный путь к папке node_modules, но столкнулся примерно с той же проблемой.
Ответы 1
Я применил несколько хитроумное решение этой проблемы.
Суть проблемы, с которой я столкнулся, заключалась в том, что мне нужен был один оператор import, который по-разному разрешался с помощью Typescript и Webpack. Typescript должен разрешить его в определения типа, а Webpack должен разрешить его в модуль.
Чтобы добиться этого, я использовал paths в tsconfig.json, чтобы указать импорт на определения типов, и resolve.alias в webpack.config.js, чтобы указать тот же импорт в текущий модуль.
tsconfig.json:
{
"compilerOptions": {
"baseUrl":"..", // you need this to set paths below.
"paths":{
"shared/bluebird":["shared/node_modules/@types/bluebird/index"]
}
...
}
}
webpack.config.js
resolve: {
alias: {
"shared/bluebird": path.resolve(__dirname, '../shared/node_modules/bluebird')
}
...
}
Это позволяет мне делать:
import * as Promise from 'shared/bluebird'
и Typescript, и Webpack довольны.