无法使用 Typescript 项目引用构建 Vue.js 应用

Question

我正在尝试利用 Typescript 项目引用在 monorepo 中构建 Vue 应用程序。我目前的项目结构如下：

client/
  package.json
  tsconfig.json
  src/
    ...

server/
  package.json
  tsconfig.json
  src/
    ...

shared/
  package.json
  tsconfig.json
  preferences.ts
  permissions.ts
  interfaces/
    ...

client/tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "strictNullChecks": false,
    "strictPropertyInitialization": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "baseUrl": ".",
    "types": ["mocha", "chai", "vuetify", "webpack-env"],
    "paths": {
      "@/*": ["src/*"],
      "@shared/*": ["../shared/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"],
  "references": [
    { "path": "../shared" }
  ]
}

shared/tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "declaration": true,
        "declarationMap": true,
        "rootDir": "src",
        "outDir": "./dist",
        "composite": true
    }
}

我遇到的唯一错误是在 shared 文件夹中引用 preferences 或 permissions 时。需要注意的几点：

如果我从 client 引用 shared/interface 中的内容，它不会引发任何问题。如果我直接在 shared.
Intellisense 未检测到 vscode 中的任何问题。

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 ERROR  Failed to compile with 7 errors                                                                                                              11:14:37 AM
These dependencies were not found:

* @shared/permission in ./src/router/index.ts, ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home/Index.vue?vue&type=script&lang=ts& and 1 other
* @shared/preference in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Navigation.vue?vue&type=script&lang=ts&, ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Account/Preferences.vue?vue&type=script&lang=ts& and 2 others

To install them, you can run: npm install --save @shared/permission @shared/preference
No type errors found
Version: typescript 3.9.9
Time: 6921ms

关于如何修复这些错误有什么想法吗？

Answer 1

最终对我有用的是配置 Webpack（Vue 在后台使用）以将我的别名 "@shared" 解析为正确的路径。

为此，您需要像这样编辑 vue.config.js：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      "@shared": path.resolve(__dirname, '../shared/dist')
    }
  }
};

（来源：https://github.com/TypeStrong/ts-loader/blob/main/REFERENCES.md#setup-your-codebase-to-consume-the-project）

注意-就像使用module-alias一样-如果您在shared项目中指定了outDir（tsconfig.json），您需要将别名路径指向文件位于那里。对我来说，这意味着将 /dist 附加到路径中。

然而，当启动开发服务器时，我收到一条错误消息，告诉我没有为我的 @shared 路径配置 ESLint（这是正确的）。所以最后缺少的是从 ESLint 中排除我的 @shared 路径。为此，您需要做的就是在指向 shared 目录的 client 目录中创建一个 .eslintignore 文件：

../shared

我希望这对你有用，即使我问这个问题可能有点晚。 :)

Answer 2

@Murph 这并不完全正确。您需要将该设置放在键 configureWebpack 下。参见 https://dev.to/alansolitar/webpack-aliases-in-vue-js-41hp

无法使用 Typescript 项目引用构建 Vue.js 应用

Can't build Vue.js app with Typescript project references

dependencies

typescript

vue.js

monorepo