尝试将 vue 与 ts-node 一起使用

Question

我已经很乐意在服务器端代码中导入 .vue 文件。深入地说，我还没有真正使用 *.vue 文件导出，但有些代码对于客户端和服务器端来说是常见的，并引用这些文件。

我现在使用 ts-node 进行开发/调试，并使用 webpack 将客户端代码与 *.vue 文件捆绑在一起。

我尝试了很多解决方案，但发现没有一个真正有效 - 即使是 tsConfig.json 中引用的 .d.ts

declare module '*.vue' {
    import Vue = require('vue')
    const value: Vue.ComponentOptions<Vue>
    export default value
}

有谁知道一个优雅的解决方案，或者我应该辞职而在服务器端使用 webpack 吗？（我有些犹豫，因为仅客户端编译的编译已经很慢了）

Answer 1

我建议将客户端和服务器通用的代码提取到单独的目录或包中，然后您可以在服务器和客户端代码中导入此代码。

我不确定你是如何设置你的项目的，但解决这个问题的一种方法是使用 monorepo 设置（你可以查看lerna、npmworkspaces、yarnworkspaces）。另一种方法是将公共代码放在充当其自己的 npm 包的目录中，并具有自己的 package.json 文件。然后，从客户端和服务器代码中的 package.json 文件中，您可以引用公共包作为依赖项，并使用 file :../path/to/common url 指向 npm 目录中的本地目录。