内部包

内部包是 包，仅用于在您的单仓库内部使用。它们对于在闭源单仓库中应用程序之间共享代码非常有用。

内部包创建起来很快，并且可以转换为 外部包，如果您最终想要将它们发布到 npm。

是什么让一个包成为内部包？

外部包在将文件放到包注册表之前会通过打包器运行它们的文件。这意味着它们需要大量工具来处理。

• 打包器：用于构建包
• 版本控制：用于帮助版本控制和发布
• 发布：用于发布包

如果您想在本地使用这些文件，您还需要

• 开发脚本：用于在文件更改时在本地打包包

由于内部包不会发布，我们可以跳过所有这些步骤。我们不会自己打包包，而是让导入包的应用程序为我们打包。

这听起来很复杂，但设置起来非常容易。

我们的第一个内部包

我们将在单仓库中创建一个共享的 math-helpers 包。

1. 创建您的单仓库

如果您没有现有的单仓库，请使用我们的指南 创建一个。

2. 创建一个新包

在 /packages 中，创建一个名为 math-helpers 的新文件夹。

mkdir packages/math-helpers

创建一个 package.json

{
  "name": "math-helpers",
  "version": "0.0.1",
  "dependencies": {
    // Use whatever version of TypeScript you're using
    "typescript": "latest"
  }
}

创建一个 src 文件夹，并在 packages/math-helpers/src/index.ts 中添加一个 TypeScript 文件。

export const add = (a: number, b: number) => {
  return a + b;
};
 
export const subtract = (a: number, b: number) => {
  return a - b;
};

您还需要在 packages/math-helpers/tsconfig.json 中添加一个 tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "noEmit": true,
    "strict": true
  },
  "exclude": ["node_modules"]
}

太棒了！我们现在拥有了内部包所需的所有文件。

3. 导入包

我们现在将导入包并看看会发生什么。进入您的一个应用程序，并将 math-helpers 添加到其 package.json 的依赖项中

{
  "dependencies": {
    "math-helpers": "*"
  }
}

从根目录安装所有包以确保依赖项正常工作。

现在，将来自 math-helpers 的导入添加到您的应用程序的源文件之一中

+ import { add } from "math-helpers";
 
+ add(1, 2);

您可能会看到错误！

Cannot find module 'math-helpers' or its corresponding type declarations.

这是因为我们错过了一步。我们还没有告诉我们的 math-helpers/package.json 包的入口点是什么。

4. 修复 exports

返回 packages/math-helpers/package.json 并添加一个字段：exports

{
  "name": "math-helpers",
  "exports": {
    ".": "./src/index.ts"
  },
  "dependencies": {
    "typescript": "latest"
  }
}

现在，任何导入我们 math-helpers 模块的内容都将直接指向 src/index.ts 文件 - 也就是说，他们将导入该文件。

返回 apps/web/pages/index.tsx。错误应该消失了！

5. 尝试运行应用程序

现在，尝试运行该应用程序的开发脚本。在默认的 turborepo 中，这将非常简单

turbo dev

../../packages/math-helpers/src/index.ts
Module parse failed: Unexpected token (1:21)
You may need an appropriate loader to handle this file type,
currently no loaders are configured to process this file.
See https://webpack.js.cn/concepts#loaders

> export const add = (a: number, b: number) => {
|   return a + b;
| };

6. 配置您的应用程序

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['math-helpers'],
};
 
module.exports = nextConfig;

7. 总结

我们现在可以在我们的 math-helpers 包中添加任意数量的代码，并在我们单仓库中的任何应用程序中使用它。我们甚至不需要构建我们的包 - 它可以正常工作。

这种模式对于创建可以在团队之间轻松共享的代码片段非常强大。

快速参考

快速参考 - 创建新的内部包

1. 在 packages/<folder> 中创建一个新文件夹
2. 添加一个 package.json，其中 name 和 types 指向 src/index.ts（或 src/index.tsx）
3. 添加 src/index.tsx，至少包含一个命名导出
4. 安装您的包 来自根目录

快速参考 - 导入内部包

1. 确保您 正确导入它
2. 确保您已 配置您的应用程序以对其进行转译