Vue + webpack + TS: не удается найти .vue.d.ts при создании объявления

Question

Я работаю над библиотекой, написанной на Typescript и использующей VueJS.Я также использую веб-пакет для сборки.

У меня возникла проблема с генерацией файлов объявлений TypeScript (.d.ts).

Сначала давайте поговорим о моихисходный код.У меня есть файлы Typescript (очевидно) и компоненты Vue.Каждый компонент Vue состоит из 2 файлов: файла .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.Вот мой конфиг веб-пакета:

{
  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'),
      verbose,
    })
  ],
}

Я работаю над минимальным репозиторием, я отредактирую этот вопрос вовремя.

А пока сообщите мне, если мне нужнопредоставить конкретную информацию.

Спасибо за помощь.

Answer 1

Хорошо, наконец-то мне удалось его получить.

vue-loader используется для разделения монофайлов vue на различные ресурсы веб-пакетов.Цель состоит в том, чтобы заставить webpack выполнять разные загрузчики в каждой части монофайла vue (скрипт, стиль и шаблон).

В моем случае я не использую vue " real "monofile, потому что часть машинописного текста находится в другом файле, чем файл .vue.Затем он ссылается на <script lang="ts" src="./MyComponent.ts"></script>.

Из-за того, как ts-loader и vue-loader работают, выполнение этого приводит к сбою генерации объявлений.

Все, что мне нужно было сделать, это использовать простой монофайлкомпоненты.Но так как я нуждался в , чтобы сохранить свои ts от моего .vue (из-за известной ошибки в машинописи), мне пришлось явно импортировать мой модуль ts вместо ссылки на мой файл ts, например:

<script lang="ts">
    export { default } from './MyComponent.ts';
</script>

Надеюсь, я ясно дал понять.