Vuejs 和 Webpack 5 Federation 打字稿错误
Posted
技术标签:
【中文标题】Vuejs 和 Webpack 5 Federation 打字稿错误【英文标题】:Vuejs and Webpack 5 Federation typescript bug 【发布时间】:2021-02-10 21:57:56 【问题描述】:我对新的 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.x.x,确实一切正常。
【问题讨论】:
This question 有类似的问题,你有没有尝试过这种意义上的任何东西。 【参考方案1】:您需要在 typescript 中声明您将拥有外部模块。
在源根目录下创建一个扩展名为.d.ts
的文件,定义在tsconfig.json中,并在文件中声明一个模块。
declare module 'nav/Header'
以防万一,请确保声明文件包含在您的 tsconfig.json
中,如下所示。关于如何在https://***.com/a/59728984/9195902中包含声明文件有一个很好的解释
"include": [
"**/*.d.ts"
]
【讨论】:
以上是关于Vuejs 和 Webpack 5 Federation 打字稿错误的主要内容,如果未能解决你的问题,请参考以下文章
使用 Vuejs、Webpack 和 tailwindcss 创建一个 Electron 应用程序
在 Webpack + VueJs 中链接样式表和要求它们有啥区别?