Как мне заставить Webpack и Typescript использовать внешнюю папку node_module? - PullRequest
Новая
       26

Как мне заставить Webpack и Typescript использовать внешнюю папку node_module?

0 голосов
/ 18 октября 2018

Настройка

У меня есть модуль bluebird вместе с @types/bluebird, установленным в папке node_modules.

У меня также есть некоторые .ts файлы, которые будут упакованы с помощью Webpack и будут использоваться в браузере.

По разным причинам папка node_modules находится вне иерархии путей моего .ts files.

Проблема

Я хотел бы импортировать модуль bluebird в мои .ts файлы так, чтобы:

  1. Я получил набор текста.
  2. 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 Ответ

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

Я использовал несколько хакерское решение этой проблемы.

Суть проблемы, с которой я столкнулся, заключалась в том, что мне требовался один оператор 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 оба счастливы.

...