如何将 package 分成模块？ （如 Firebase SDK）

Question

赏金将在 2 天内到期。 此问题的答案有资格获得+50声望赏金。 Javier Bullrich正在从有信誉的来源寻找答案。

如果下载Firebase JS SDK只需要添加一个依赖： firebase

从那里您可以根据您的导入属性访问所有不同的模块：

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';

然后，如果您使用任何摇树工具，任何不会使用的库都会被自动删除。

我怎样才能实现类似的目标？ 我正在为我们的组织构建一个包集合，这样，不是让每个人都工作和更新 15 个包，而是拥有一个可以分为模块/导入的 package，因此项目只导入必要的模块。

我一直在寻找几天，我什至不知道如何命名这种方法。

如果有人可以将我链接到教程、文档或任何能够开始我的调查的内容，我将不胜感激。

谢谢你。

Answer 1

没有什么特别的事情要做：这很自然。

例如下面的结构：

foo
├── bar
│   ├── baz
│   │   └── index.js
│   └── index.js
├── fum
│   ├── index.js
│   └── qux
│       └── index.js
├── index.js
└── package.json

允许以下用法：

import foo from './foo';
import foobar from './foo/bar';
import foobarbaz from './foo/bar/baz';
import foofum from './foo/fum';
import foofumqux from './foo/fum/qux';

出于测试目的，考虑每个js文件导出一个包含其所有父文件夹名称的串联值的字符串，例如./foo/bar/baz/index.js包含export default 'foobarbaz'; ，而package.json包含{ "type": "module" } 。

然后，下面的代码：

console.log({
    foo,
    foobar,
    foobarbaz,
    foofum,
    foofumqux
});

输出：

{
  foo: 'foo',
  foobar: 'foobar',
  foobarbaz: 'foobarbaz',
  foofum: 'foofum',
  foofumqux: 'foofumqux'
}

Answer 2

如果您查看 Firebase JS SDK 存储库，您可以看到他们使用 monorepo 来管理所有这些，它们实际上都是单独的包。 他们使用Lerna来管理他们的 monorepo - 但是那里有几个 monorepo 工具（npm 工作区，yarn）。 我自己喜欢 npm 工作区，因为它是原生的。

他们所做的是大量使用 npm 中的导出模块。 您可以在此处查看相关文档： https://nodejs.org/api/packages.html#exports

所以他们有一个看起来像这样模糊的存储库：

my-project
├── packages
│   ├── pkg-1
│   │   ├── package.json
│   │   └── index.js
│.  ├── pkg-2
│   │   ├── package.json
│   │   └── index.js
│   └── all
│.      ├── pkg-1
│       │   └── index.js
│.      ├── pkg-2
│       │   └── index.js
│       ├── package.json
│       └── index.js
└── package.json

root package.json 的关键部分是包的声明：

{
  ...
  packages: [
    "packages/*",
  ],
  ...
}

样品 package.json 来自 package：

{
  "name": "@my-project/pkg-1",
  "main": "index.js",
  ...
}

这里的诀窍是他们有一个额外的 package ，它只是导出 repo 中的所有其他包：

我的项目/包/所有/package.json：

{
  "name": "my-project"
  "exports": {
    "./pkg-1": "./pkg-1/index.js",
    "./pkg-2": "./pkg-2/index.js",
  }
  "dependencies": [
    "@my-project/pkg-1": "*",
    "@my-project/pkg-2": "*",
  ],
  ...
}

例如 /my-project/packages/all/pkg-1/index.js：

export * from "@my-project/pkg-1"

现在，当有人尝试安装您的 package all时，他们将获得所有其他包的别名。

import * as pkg1 from "all/pkg-1"

它们还将 ES 模块和 CommonJS 捆绑在一起，因此您可以使用“import”或“require”。 仔细查看他们存储库中的 package.json 文件，这是一件艺术品！ https://github.com/firebase/firebase-js-sdk

Answer 3

TLDR； 在您的 package.json 添加文件属性。 这将公开您指定的目录。 这也将使它们在您寻找时可以通过路径访问。

{
  "name": "mybase",
  "main": "index.js",
  "files": ["app/**", "store/**"]
}

使用上面的配置，您将能够访问这样的文件：

import { initializeApp } from 'mybase/app';
import { getFirestore, collection, getDocs } from 'mybase/store/lite';

只需确保文件如@KaKi87 所述存在即可。 在 package.json 中指定 files 属性是向客户端应用程序公开文件结构的关键。