2017-01-31 3 views
2

У меня возникла проблема с использованием 3-й партийной библиотеки в сочетании с TypScript, настраиваемыми типизациями и Webpack. Webpack не может решить 3-ю партийную JS-библиотеку.Webpack не может разрешить JS-модуль (в проекте Typcript)

Всякий раз, когда я вручную компилирую мой .ts-файл и запускаю его с помощью Node.js, он компилируется без каких-либо проблем и выполняется так, как ожидалось. Однако, когда я бегу Webpack он выходит с ошибкой:

ERROR in ./index.ts 
Module not found: Error: Can't resolve '@slack/client' in 'Z:\reproduction' 
@ ./index.ts 1:0-45 

Моя первая догадка, что это было что-то делать с scoped package (@ слабину/клиента). Я пробовал работать с aliases в сочетании с path mapping в tsconfig для этого пакета, но это не решило проблему. Кроме того, скопируйте пакет непосредственно в ./node_modules и удалите часть из области определения из файла определения, а импорт не исправит его.

Мне удалось воспроизвести проблему в небольшом проекте. Я добавил две зависимости к этому репродукционному проекту: «@slack/client» (неразрешимая библиотека) и «abs» (как проверка работоспособности). Для обоих я создал небольшие файлы определения .d.ts. Абс lib работает безупречно, но @ slack/client остается неразрешимым для Webpack.

Я совершенно новичок в машинописном и веб-пакете, поэтому я подозреваю, что не замечаю ничего очевидного. Я просто не могу понять, что. Хорошо, хотя, пытаясь решить эту проблему, я уже много думал о Webpack и Typcript :-)

Может ли кто-нибудь указать мне в правильном направлении?

мне удалось воспроизвести его со следующими файлами:

package.json

{ 
    "devDependencies": { 
     "awesome-typescript-loader": "^3.0.0-beta.18", 
     "typescript": "^2.1.5" 
    }, 
    "dependencies": { 
     "@slack/client": "^3.8.1", 
     "abs": "^1.3.6" 
    } 
} 

tsconfig.json

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es5", 
     "noImplicitAny": true, 
     "sourceMap": false 
    } 
} 

webpack.config.js

module.exports = { 
    entry: './index.ts', 
    target: 'node', 
    module: { 
    loaders: [ 
     { 
     test: /\.ts(x?)$/, 
     loader: 'awesome-typescript-loader' 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['.ts'], 
    }, 
    output: { 
    libraryTarget: 'commonjs', 
    path: './', 
    filename: 'index.js' 
    } 
} 

abs.d.ts

declare module 'abs' { 
    function abs(input: any): any; 
    namespace abs {} 
    export = abs; 
} 

@ slack_client.d.ts

declare module '@slack/client' { 
    export const CLIENT_EVENTS: { 
     RTM: { 
      ATTEMPTING_RECONNECT: string; 
     }; 
    }; 
} 

index.ts

import * as slackClient from '@slack/client'; 
import * as abs from 'abs'; 

var absPath: string = abs('./'); 
console.log(absPath); 

var added: string = slackClient.CLIENT_EVENTS.RTM.ATTEMPTING_RECONNECT; 
console.log(added); 

Примечание

  • Файл определения для @ слабины/клиент может выглядеть немного странно с с @ в имени. Я экспериментировал с изменением его для обоих определений, это мало что делало. Абс продолжал работать, @ slack/client постоянно терпел неудачу.
  • Версия веб-сайта: 2.2.1
  • Версия машинописи: 2.1.5

ответ

2

Я подозреваю, что эта линия:

extensions: ['.ts'] 

должно быть:

extensions: ['.js', '.ts'] 

или даже лучше:

extensions: ['.js', '.ts', '.tsx'] 

для захвата большинства случаев.

+0

Ой, по крайней мере, мое подозрение, что я пропустил что-то маленькое, было правильным :-) Спасибо, это исправлено! – Mark

+0

пустое расширение не поддерживается webpack 2. Этот ответ неверен –

+0

True. Починил это. –

Смежные вопросы