在 Node.js 和 Vue.js 之间共享 TypeScript 代码

Posted 2023-02-22

【中文标题】在 Node.js 和 Vue.js 之间共享 TypeScript 代码

【英文标题】：Sharing TypeScript code between Node.js and Vue.js

【发布时间】：2021-09-18 03:43:50

【问题描述】：

我很难弄清楚如何做到这一点。我的环境是：

Node.js 16.1.x Vue.js 3.x TypeScript 4.2.4

我的目录结构是这样的：

根（Node.js 服务器） 共享 MySharedFile.ts ui（Vue.js 代码）

MySharedFile.ts 正在导出一个非常简单的模块：

export const MyShared = 
  TEST: 1
;

在 Vue.js 中，我尝试导入此模块 import MyShared from '../../shared/MySharedFile'，但是当应用程序构建时，我收到错误 Parsing error: 'import' and 'export' may appear only with 'sourceType: module'。我搜索并发现 a thread 建议更改 eslintrc 设置，但没有成功。这个错误对我来说真的没有意义，那么它是什么意思，我该如何解决？

ui/tsconfig.json

  "compilerOptions": 
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "./dist",
    // https://github.com/TypeStrong/ts-loader/issues/1138
    "importsNotUsedAsValues": "preserve",
    "types": [
      "webpack-env"
    ],
    "paths": 
      "@/*": [
        "src/*"
      ]
    ,
    "lib": [
      "es2020",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  ,
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]

ui/.eslintrc.js

module.exports = 
  root: true,
  env: 
    node: true
  ,
  extends: [
    '@vue/typescript',
    'plugin:vue/vue3-recommended',
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: 
    ecmaVersion: 11,
    sourceType: 'module',
    allowImportExportEverywhere: true
  

对于任何想要source code...的人...我现在遇到了一个新错误解析错误：“导入”和“导出”可能只出现在“源类型：模块”中

【问题讨论】：

我开始认为问题源于 TS 文件没有编译成 JS，而 Vue 编译器默认不包含它，因为它是同级目录。我的 Node.js tsconfig 确实在服务器编译中包含了共享目录，所以这就是我在 Node 中导入时没有问题的原因。

好吧，看来是eslint的问题……我卸载了eslintnpm remove @vue/cli-plugin-eslint，错误已经不存在了，至少我知道问题出在哪里了。

【参考方案1】：

我从中学到了一些东西。首先是我正在使用所谓的monorepo。第二个是我应该使用某种工作区，最后我使用了npm workspaces，但还有其他选项，比如yarn workspaces。我不得不重构我的应用程序以遵循不同的结构，所以我现在有这样的东西：

根（主工作区） api (Node.js) package.json ("dependencies": "shared": "^1.0.0") tsconfig.json package-lock.json（已删除） 共享（TypeScript 代码） package.json ("version": "1.0.0") tsconfig.json ui (Vue.js) package.json ("dependencies": "shared": "^1.0.0") tsconfig.json package-lock.json（已删除） package.json ("workspaces": ["api", "shared", "ui"]) package-lock.json（生成，现在包含工作区的所有 dep）

转移到这个结构后，我不必修改tsconfig.json 或vue.config.js 文件来添加shared 目录，因为我可以在导入时像任何其他包一样引用它。我也喜欢这种方法，因为它将我的所有node_modules 保存在主工作区级别的一个目录中。