时间戳

首页 > 解决方案 > Vuejs 和 Webpack 5 Federation 打字稿错误

javascript - Vuejs 和 Webpack 5 Federation 打字稿错误

问题描述

我对新的 webpack 5 模块联邦和打字稿有疑问。我有两个独立的 vuejs 应用程序，用 VueJS 3 编写。我的问题可能出在 webpack 配置中ts-loader，并且需要appendTsSuffixTo选项（我会Cannot find module '@/App.vue' or its corresponding type declarations.没有它）。

注意：此问题仅适用于使用 vue 3 或组合 api 和 vue 2。Vue 2（没有组合 api）适用于 typescript。

Webpack ts-loader 在这里：

   'babel-loader',
    {
       loader: 'ts-loader',

       options: {
          appendTsSuffixTo: [/\.vue$/],
       },
    }

当我使用动态联合模块时，我的问题从这里开始：

new ModuleFederationPlugin({
       name: 'main-app',
       filename: 'remoteEntry.js',
       remotes: {
           nav: "nav@http://localhost:5000/remoteEntry.js",
       },
       shared: {
           ...deps,
           vue: {
               singleton: true,
               requiredVersion: deps.vue
           }
       }
   })

并将其导入我的 App.vue.:

<template>
  <div id="module">
    <h2>Main app</h2>

    <Header />

  </div>
</template>

<script lang="ts">

import {defineComponent} from "vue";

import Header from "nav/Header";

//const Header = () => import("nav/Header"); //The same problem

//const module = "nav/Header";
//const Header = () => import(module); //The same problem, but error is thrown in browser inspector console.

export default defineComponent({
  name: 'App',
  components: {
    Header
  }
})

</script>

Webpack 抛出这个错误：

TS2307: Cannot find module 'nav/Header' or its corresponding type declarations.

是一些错误还是我在任何地方都有问题？对于没有组合 api 的 vue 2.xx，确实一切正常。

标签： javascripttypescriptvue.jswebpack

解决方案

您需要在 typescript 中声明您将拥有外部模块。

.d.ts在 tsconfig.json 中定义的源根目录下创建一个扩展名文件，并在文件中声明一个模块。

declare module 'nav/Header'

以防万一，请确保声明文件包含在您的tsconfig.json. 关于如何在https://stackoverflow.com/a/59728984/9195902中包含声明文件有一个很好的解释

{
  "include": [
    "**/*.d.ts"
  ]
}

推荐阅读