问 Vue + webpack + TS:生成声明时找不到.vue.d.ts

EN

我正在开发一个用Typescript和VueJS编写的库。我也在使用webpack来做建筑部分。

我在生成TypeScript声明文件(.d.ts)时遇到了一个问题。

首先，让我们谈谈我的源代码。我有Typescript文件(很明显)和Vue组件。每个Vue组件由两个文件组成:一个.vue文件和一个.ts文件。

让我们举个例子。

我有以下代码：

// index.ts
export { default } from './components/Foobar.vue';
// components/Foobar.vue
<template><p>Hello!</p></template>
<script lang="ts" src="./Foobar.ts"></script>
// components/Foobar.ts
@Component
export default class Foobar extends Vue {
}

构建的输出将如下所示：

lib/
dist/
    index.js // my lib
    index.d.ts // aggregated .d.ts with dts-bundle
    lib/ // all my .d.ts are here !
        index.d.ts
        components/
            Foobar.d.ts

问题是dts-bundle无法输出dist/index.d.ts，因为生成的声明( dist/lib/**/*.d.ts )无效。它们是由ts-loader生成的。

如果我们查看dist/lib/index.d.ts，我们会发现：

// dist/lib/index.d.ts
export { default } from './components/Foobar.vue'

当然，问题是： /dist/lib/components/Foobar.vue 并不存在。此组件的定义是 Foobar.d.ts ，而不是 Foobar.vue.d.ts 。

当将每个声明捆绑在一起时，dts-bundle会失败，因为它找不到 /dist/lib/components/Foobar.vue.d.ts 。

我怎么才能修复它？

我只需要换掉这个

// dist/lib/index.d.ts
export { default } from './components/Foobar.vue'

通过这个

// dist/lib/index.d.ts
export { default } from './components/Foobar'

我认为这是一个非常常见的错误，我只是在我的webpack配置上做了一些错误。这是我的webpack配置：

{
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: 'path/to/index.ts',
  output: { /* ... */}
  resolve: {
    symlinks: true,
    extensions: [
      '.ts',
      '.vue',
      '.js',
      '.json',
    modules: [
      'node_modules',
  module: {
    noParse: /^(vue|vuex)$/,
    rules: [
        test: /\.vue$/,
        use: [
            loader: 'cache-loader',
            options: {
              cacheDirectory: // cache path
            loader: 'vue-loader',
            options: {
              cacheDirectory: // cache path
        test: /\.ts$/,
        use: [
            loader: 'cache-loader',
            options: {
              cacheDirectory: // cache path
            loader: 'babel-loader'
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: [
                /\.vue$/
      // ...
  plugins: [
    new ProgressPlugin(),
    new FriendlyErrorsWebpackPlugin({
      clearConsole: false
    new VueLoaderPlugin(),
    new ForkTsCheckerWebpackPlugin({
      vue: true,
      tslint: 'custom path to my file',
      formatter: 'codeframe',
    new CopyWebpackPlugin(
          from: 'assets',
          to: 'dist',
          ignore: [
            '.gitkeep',
            '.DS_Store'
    new DtsBundlePlugin({
      name: `MyModule`,
      main: path.join(LIB_PATH, entry.output.path, 'lib', 'index.d.ts'),
      out: path.join(LIB_PATH, entry.output.path, 'index.d.ts'),