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

Question

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

• 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...的人...我现在遇到了一个新错误解析错误：“导入”和“导出”可能只出现在“源类型：模块”中

Answer 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 保存在主工作区级别的一个目录中。