Question

我有一个项目，我为一些前端的东西介绍了Vue但是我仍然在TypeScript和jQuery中有很多遗留代码。所有遗留代码都在'ts'文件夹中，新的Vue单文件组件和一些bootstrapping 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

错误消息npm build

./ts/models/PlanDate.ts中的错误找不到模块：错误：无法解析'/ Users / username / dev / project-root / ts / models'中的'js-defs / tools' @ ./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')
    ],
...

导入旧版ts模块的第一个Vue文件

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

提供错误的类/模块

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上是一致的，但我对此有一个单独的问题。我也遇到了遗留打字稿类中一些绝对路径的问题，但我可以想象这是因为它似乎只能在'ts'文件夹中工作并且更深入但我不认为这与WebPack有关似乎没有抱怨导入'IDate'。

由于裸打字稿编译器没有找到声明模块的问题，而且VSCode语言服务器也没有抱怨我认为它是WebPack配置文件中的一个问题但是我可能会丢失/忽略某些东西。

我尝试了声明模块的绝对和相对路径，但都失败了。还尝试了其他不依赖于其他遗留模块的遗留类，并且执行似乎可行。所以看起来模块解析在声明文件上失败了。在webpack.config.js中，我已经尝试了诸如 resolve.alias 和 resolve.modules 之类的东西，但是它们不起作用或者我不知道如何定义路径。

更新

在下面给出的第一个评论和答案后，我很确定它与我自己的声明文件的定义方式，如何导入它或如何配置WebPack以正确查找它有关。有人能告诉我如何在Vue + WebPack + TypeScript中使用声明文件而不会出现“找不到模块”或“没有发出输出”错误吗？

Answer 1

可能是因为该文件的扩展名为d.ts，其中您的配置设置为仅在导入时查找.ts个扩展名？

Webpack和TypeScript无法解析Vue

1 个答案: