WebpackとTypeScriptでVueの宣言ファイルを解決できない

Question

私はVueをいくつかのフロントエンド用に導入したプロジェクトを持っていますが、TypeScriptとjQueryにはまだ多くのレガシーコードがあります。すべてのレガシーコードは 'ts'フォルダにあり、新しいVueの単一ファイルコンポーネントといくつかのブートストラップtsファイルは 'src'にあります。 VSCodeではすべて正常に見え、コマンドラインで 'tsc'を直接呼び出してもうまく動作しますが、WebPackは 'ts'フォルダから宣言/定義（モジュール）をインポートするとすぐに不平を言います。

プロジェクトのフォルダ構造

+ root 
    + php/css/etc 
    + ts 
    + models 
     - LegacyTypeScriptModules.ts 
     - PlanDate.ts 
    + js-defs 
     - tools.d.ts 
    - tsconfig.json (to be able to build only legacy code) 
    + src 
    + components 
     - RecentChanged.vue 
    + pages 
     - Welcome.vue 
    - App.vue 
    - main.ts 
    - tsconfig.json (main configuration) 
    - package.json 
    - tsconfig.json (only fixing experimentalDecorators issue in VSCode) 
    - tslint.json 
    - webpack.config.js 

エラーメッセージNPMビルド

ERROR in ./ts/models/PlanDate.ts Module not found: Error: Can't resolve 'js-defs/tools' in '/Users/username/dev/project-root/ts/models' @ ./ts/models/PlanDate.ts 1:0-45 @ ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/RecentChanged.vue @ ./src/components/RecentChanged.vue @ ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/Welcome.vue @ ./src/pages/Welcome.vue @ ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue @ ./src/App.vue @ ./src/main.ts

'SRC' フォルダ内のメインtsconfig.json

{ 
    "compilerOptions": { 
     "target": "es5", 
     "strict": true, 
     "module": "es2015", 
     "moduleResolution": "node", 
     "lib": [ 
      "dom", 
      "es2015", 
      "es2015.iterable" 
     ], 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "baseUrl": ".", 
     "paths": { 
      "*": [ 
       "*", 
       "./*", 
       "../ts/*" 
      ] 
     } 
     }, 
     "include": [ 
      "**/*", 
      "../ts/**/*" 
     ] 
} 

webpack.config.js

module.exports = { 
    entry: './src/main.ts', 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: '/dist/', 
    filename: 'build.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.ts$/, 
     loader: "ts-loader", 
     exclude: /node_modules|vue\/src/, 
     options: { 
      appendTsSuffixTo: [/\.vue$/] 
     } 
     }, 
... 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js', 
    }, 
    extensions: ['.js', '.vue', '.json', '.ts'], 
    modules: [ 
     'node_modules', 
     path.resolve(__dirname, 'src'), 
     path.resolve(__dirname, 'ts') 
    ], 
... 

エラーに

import { IDate, IDateSink, IDateSource} from "./interfaces/IDate"; 
import { addDays, pad } from "js-defs/tools"; 

export class PlanDate implements IDate { 
... 

モジュールを与える

まずVueのファイルのインポートレガシーTSモジュール

import Vue from 'vue' 
import { ChangedItem } from '../../ts/models/ChangedItem' 
import { PlanDate } from "../../ts/models/PlanDate" 
import { Customer } from "../../ts/models/Customer" 
import { Component, Prop } from 'vue-property-decorator' 

@Component 
export default class RecentChanged extends Vue { 
... 

クラス/モジュールそれは、 tは最初の問題は、すでに私はVueのSFCで働いて絶対パスを取得するように見えることはできませんので、私はすでに醜い相対パスに妥協しなければならなかったということであることを

import { IMainOptions } from "models/interfaces/IOptions"; 

export declare function addDays(d: IDate, n: number, keepTime?: boolean): IDate; 
export declare function pad(inputString: any, width: number, paddingCharacter?: string): string; 

お知らせを見つけること。 （おそらくすでに問題の最初の兆候でしょうか？）Vueのこの絶対パスの問題は、VSCode、tsk、WebPackよりも一貫していますが、私はこれについて別個の質問をしています。 従来のtypescriptクラスの絶対パスでも問題がありましたが、これは「ts」フォルダからしか動作しないようですが、これはWebPackが見えないので関連しないと思います輸入についての不平を言う 'IDate'。

裸のtypescriptコンパイラは宣言モジュールを見つけることに問題がなく、VSCode言語サーバもWebPackの設定ファイルに問題があると私は思っていますが、何かが見落とされている。

宣言モジュールへの絶対パスと相対パスの両方を試しましたが、両方とも失敗しました。他のレガシーモジュールに依存しない他のレガシークラスも試してみてください。doが動作するようです。したがって、宣言ファイルでモジュールの解決が失敗するようです。 webpack.config.jsで私はすでにresolve.aliasとresolve.modulesのようなものを試しましたが、動作しなかったか、パスの定義方法がわかりません。

更新Iの下に与えられた最初のコメントと回答した後

は、それは私自身の宣言ファイルの定義方法に関係しているかなり確信して、私はそれをインポートする方法や、私は適切に見つけることWebPACKの構成方法それ。誰かがVue + WebPack + TypeScriptで宣言ファイルを使用する方法を教えてもらえますか？ 'モジュールが見つかりません'または '出力がありません'というエラーは出ませんか？

Answer 1

拡張子がd.tsで、インポート時に拡張子が.tsになるように設定されている可能性があります。