Typescript 网页包和打字脚本可以'；无法解析Vue的声明文件

我有一个项目，在那里我为一些前端的东西引入了Vue，但我在TypeScript和jQuery中仍然有很多遗留代码。所有旧代码都位于“ts”文件夹中，新的Vue单文件组件和一些引导ts文件位于“src”文件夹中。在VSCode中看起来一切正常，甚至在命令行上直接调用“tsc”也可以，但只要我从“ts”文件夹导入声明/定义（模块），WebPack就会不断抱怨

项目文件夹结构

+ 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

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 {
...

错误消息npm构建

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;

./ts/models/PlanDate.ts中出错 未找到模块：错误：无法解析“/Users/username/dev/project root/ts/models”中的“js defs/tools” @/ts/models/PlanDate.ts 1:0-45 @./node_模块/ts加载器/node_modules/vue loader/lib/selector.js？type=script&index=0/src/components/RecentChanged.vue @./src/components/RecentChanged.vue @./node_模块/ts加载器/node_modules/vue loader/lib/selector.js？type=script&index=0/src/pages/Welcome.vue @./src/pages/Welcome.vue @./node_模块/ts加载器/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/**/*"
      ]
}

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

export class PlanDate implements IDate {
...

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')
    ],
...

导入传统ts模块的第一个Vue文件

+ 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

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 {
...

给出错误的类/模块

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

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

export class PlanDate implements IDate {
...

找不到的模块

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 SFC中获得绝对路径，因此我已经不得不妥协到一个丑陋的相对路径。（可能已经是问题的第一个迹象？）Vue中的绝对路径问题在VSCode、tsk和WebPack上是一致的，但我对此有单独的问题。 我还遇到了遗留typescript类中一些绝对路径的问题，但我可以想象，这是因为它似乎只在“ts”文件夹和更深层的文件夹中工作，但我认为这与此无关，因为WebPack似乎没有抱怨导入“IDate”

由于bare typescript编译器在查找声明模块方面没有问题，而且VSCode语言服务器也没有抱怨，我认为这是WebPack的配置文件中的一个问题，但可能我遗漏了/忽略了一些东西

我尝试了到声明模块的绝对路径和相对路径，但都失败了。还尝试了其他不依赖于其他遗留模块的遗留类，它们确实可以工作。因此，在声明文件上，模块解析似乎失败。 在webpack.config.js中，我已经尝试了诸如resolve.alias和resolve.modules之类的方法，但它们不起作用，或者我不知道如何定义路径

更新

+ 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

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 {
...

---

在下面给出的第一个注释和答案之后，我非常确定这与我自己的声明文件是如何定义的、我应该如何导入它或者我如何配置WebPack以正确查找它有关。有人能告诉我如何在Vue+WebPack+TypeScript中使用声明文件，而不会出现“未找到模块”或“未发出输出”错误吗？

这可能是因为该文件的扩展名为

d.ts

，其中您的配置设置为在导入时仅查找

.ts

扩展名？

您确定能够导入定义吗作为模块的文件？我尝试了更多只依赖于其他类的类，但这似乎确实有效，因此可能与定义文件有关。扩展名或语法之类的内容都不被接受。这方面有什么进展吗？在这里使用定义文件时遇到了相同的错误。不幸的是，没有，所以我将所有内容都转换为TS，这样就不需要定义文件了。如果我像这样将其添加到配置中：解析：{extensions:['.js'，'.vue'，'.json'，'.TS'，'.d.TS'].I得到另一个错误：./ts/js defs/tools.d.ts模块构建失败中的错误：错误：Typescript在Object.loader（/Users/username/dev/project root/tools.d.ts.）的successLoader（/Users/username/dev/project root/node_modules/ts loader/dist/index.js:47:15）上没有为/Users/dev/dev/dev/dev/project-defs/tools.d.ts发出输出（/Users/username/dev/project root/node_modules/ts loader/dist/index.js:29:12）.WebPack是否需要具有这些功能的实际js文件？这是我的假设，定义文件肯定只用于类型检查？那么我应该如何处理我自己的js代码的定义文件？当我确保这些功能由浏览器中的另一个js文件定义时，这对tsc来说总是很好的。那么

addDays

和

pad

函数实际定义了吗？是的。我还针对声明文件提出了更具体的问题，因为其他模块似乎可以很好地解决。您知道在Vue+WebPack+TypeScript中应该如何使用声明文件吗？