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

关键词：

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

【讨论】：

在多个文件 node.js 之间共享和修改变量

】在多个文件node.js之间共享和修改变量【英文标题】：Sharing&modifyingavariablebetweenmultiplefilesnode.js【发布时间】：2013-06-1504:14:35【问题描述】：main.jsvarcount=1;//psuedocode//if(wordstypedbeginswith@add)require(\'./add.js\');//if(wordstypedbegin 查看详情

在多个 .env 文件之间切换，例如 .env.development 和 node.js

】在多个.env文件之间切换，例如.env.development和node.js【英文标题】：Togglebetweenmultiple.envfileslike.env.developmentwithnode.js【发布时间】：2019-08-1917:21:28【问题描述】：我想为每种模式（开发、生产等）使用单独的.env文件。在处理我的v... 查看详情

在 app.js 和路由 y node.js 之间共享一个对象

】在app.js和路由ynode.js之间共享一个对象【英文标题】：sharinganobjectbetweenapp.jsandroutesynode.js【发布时间】：2017-10-0408:00:22【问题描述】：这是我的app.jsvarexpress=require(\'express\');...varmodel=require(\'./models/my_model\');varroutes=require(\'./ro 查看详情

Node.js 和前端之间共享的模块中的模块语法和依赖关系

】Node.js和前端之间共享的模块中的模块语法和依赖关系【英文标题】：ModulesyntaxanddependenciesinmodulessharedbetweenNode.jsandfrontend【发布时间】：2014-11-0610:25:20【问题描述】：我开始了解node.js和javascript前端，并且在前端和后端之间共... 查看详情

在 node.js 中的客户端和服务器 js 文件之间共享 mysql 连接

】在node.js中的客户端和服务器js文件之间共享mysql连接【英文标题】：Sharingamysqlconnectionbetweenclientandserverjsfilesinnode.js【发布时间】：2021-08-1606:01:57【问题描述】：我在这里看到过类似的问题，但没有一个完全像这样，所以我希望... 查看详情

Node.js 和 Vue.js，为啥 Refresh 让 vue.js 的 store 清晰？我如何在 vue.js 中使用上传的图片？

】Node.js和Vue.js，为啥Refresh让vue.js的store清晰？我如何在vue.js中使用上传的图片？【英文标题】：Node.jsandVue.js,whyRefreshmakevue.js\'sstoreclear?Andhowcaniuseuploadedimageinvue.js?Node.js和Vue.js，为什么Refresh让vue.js的store清晰？我如何在vue.js中使... 查看详情

在通过 VHOST 连接的 node.js 应用程序之间共享 404 页面

】在通过VHOST连接的node.js应用程序之间共享404页面【英文标题】：Sharing404pageacrossnode.jsappsconnectedviaVHOST【发布时间】：2012-02-0303:30:41【问题描述】：我对node.js和一般的web编程有点陌生，所以如果我问奇怪的问题，请原谅：D这就... 查看详情

如何在 node.js 中的模块之间共享连接池？

】如何在node.js中的模块之间共享连接池？【英文标题】：Howtoshareconnectionpoolbetweenmodulesinnode.js?【发布时间】：2016-12-0910:16:10【问题描述】：我对如何在node.js模块中正确实现postgres连接池知之甚少。我的问题是：当我在需要连接... 查看详情

如何在 Vue.js 中的组件之间共享方法？

】如何在Vue.js中的组件之间共享方法？【英文标题】：HowcanIshareamethodbetweencomponentsinVue.js?【发布时间】：2016-05-0420:41:55【问题描述】：查看这个简单的购物车演示：http://plnkr.co/edit/CHt2iNSRJAJ6OWs7xmiP?p=preview用户可以选择蔬菜和水果... 查看详情

如何在 Vue.js 中的两个组件之间共享一个方法？

】如何在Vue.js中的两个组件之间共享一个方法？【英文标题】：HowtoshareamethodbetweentwocomponentsinVue.js?【发布时间】：2018-12-2619:17:13【问题描述】：我有一个Ag-Grid，它具有某些操作按钮和从MongoDB数据库填充的动态数据。我的MasterDat... 查看详情

如何在 Node.js 服务器上部署 Vue.js 应用程序

】如何在Node.js服务器上部署Vue.js应用程序【英文标题】：HowtodeployaVue.jsapplicationonNode.jsserver【发布时间】：2019-02-1305:25:00【问题描述】：我有一个dist文件夹，其中包含CSS、字体、JS文件夹和一个为Vue.js最小化的index.html文件，可... 查看详情

Node.js 和客户端共享相同的脚本

...使用Node.js的一个理论上的好处是可以在客户端和服务器之间共享相同的脚本。如果客户端不支持javascript，则可以将相同的功能降级到服务器。但是，Node.jsrequire()方法可以独立运行。在您加载的脚本中，您可以向this或expor 查看详情

在所有 Vue.js 组件之间共享数据

】在所有Vue.js组件之间共享数据【英文标题】：SharingdatabetweenallVue.jscomponents【发布时间】：2019-08-1817:58:43【问题描述】：我是第一次使用Laravel/Vue.js构建一个CRUDWeb应用程序。我正在使用MySQL数据库，并且使用了许多Vue.js组件，每... 查看详情

端口错误：heroku 中的 vue.js+node.js 项目

】端口错误：heroku中的vue.js+node.js项目【英文标题】：Errorwithports:vue.js+node.jsprojectinheroku【发布时间】：2018-08-2507:53:27【问题描述】：尝试部署我的全栈项目。它在本地构建并运行良好，但在Heroku中，在“gitpushherokumaster”命令和... 查看详情

在客户端和服务器之间共享类型

】在客户端和服务器之间共享类型【英文标题】：Sharetypesbetweenclientandserver【发布时间】：2021-03-1016:40:48【问题描述】：我正在开发一个包含Node.js、Express.js和TypeScript后端(RESTAPI)以及React、Redux和TypeScript前端的项目。在后端我创... 查看详情

如何在 AngularJS 客户端和 Node.js 服务器之间重用代码 [关闭]

】如何在AngularJS客户端和Node.js服务器之间重用代码[关闭]【英文标题】：Howtore-usecodebetweenAngularJSclientandNode.jsserver[closed]【发布时间】：2014-05-1018:05:00【问题描述】：在AngularJS客户端和Node.js服务器之间重用/共享代码的最佳实践是... 查看详情

Vue.js 在哪里？

...频（YouTube:一小时vue.js）但我不明白这是什么语言！我用Node.js和Jquery开发了一些网站....Mongodb我认为Web应用程序需要两个部分，例如（apache、Mysql、Node.js....等）但Vue.js真的很奇怪，因为vue.js只是一方面，但提供we 查看详情

Node.js 和 C++ 之间的集成

】Node.js和C++之间的集成【英文标题】：IntegrationbetweenNode.jsandC++【发布时间】：2019-01-2411:52:28【问题描述】：我有一个Node.js应用程序，我希望能够将JSON对象发送到C++应用程序中。C++应用程序将使用Poco库(pocoproject.org)。我希望交... 查看详情