如何在Sveltekit项目之间共享代码

Question

我试图为一个由四个包组成的sveltekit和类型记录项目设置一个monorepo：

.
├── frontend // sveltekit project
├── backend // typescript proeject
├── app // sveltekit project
└── shared // where I'll store my common svelte and typescript files

我希望在共享包中使用前端、后端和应用程序项目中的代码。我只想在我的项目之间共享一些类型记录界面和精简组件，但我不知道如何才能做到这一点。

首先，我尝试使用svelte-kit package命令构建共享包，以生成一个包，可以导入到每个项目中，但是这个包与纱线工作区完全中断。

我可以采取哪些步骤来在我的项目之间共享类型记录文件和精简组件？

Answer 1

一种方法是使用涡轮增压器。

遵循以下简单规则：

应用程序和站点转到应用程序文件夹，库和信任转到包文件夹。

npx create-turbo@latest

当添加软件包时，请确保它们遵循npm软件包准则，并具有package.json，以便可以在应用程序中导入。下面是我的存根svelte库uikit的package.json示例：

{
  “name”: “uikit”,
  “version”: “0.0.0",
  “main”: “./index.svelte”,
  “types”: “./index.svelte”,
  “devDependencies”: {
    “svelte”: “^3.44.0”
  }
}

在添加应用程序和包之后，我们需要配置位于turbo.json中的turbo配置。我只需在生成的输出中附加svelte-kit命令：

{
  “pipeline”: {
    “build”: {
      “dependsOn”: [“^build”],
      “outputs”: [“dist/**“, “.next/**“, “svelte-kit/**“]
    },
    “lint”: {
      “outputs”: []
    },
    “dev”: {
      “cache”: false
    }
  }
}

无法在您的sveltkit应用程序中导入svelte组件，如：

<script>
  import Button from “uikit”
</script>
<Button> Test Button </Button>

接下来，您需要从“应用程序”文件夹中为每个存储库设置不同的端口，以便我们可以同时运行所有站点。对于某些用例来说，这可能非常方便。Update命令脚本位于站点根目录中各自的package.json中：

  “scripts”: {
     “dev”: “svelte-kit dev --port 3003”,
     ...

应该是这样的，开始发展吧！

npm run dev

这将在其指定端口上生成项目中的所有应用程序。

npm run build

您一定是在哪里运行这些命令，因为每个lib或app都有自己的package.json？

运行monorepo根目录中的所有命令。Turborepo在处理这件事

你可以在这里读到更多关于它的https://turborepo.org/。

这里还有一个回购示例，它在同一个https://nenadkostic.com/blog/turborepo-sveltekit/中具有svelte和react库/应用程序。