react-native - npm 包导出路径定义

Question

我正在生成我的第一组 npm 包来支持 react-native 环境。我希望以这样一种方式配置包，即内容在本质上是有组织的，并且可以通过客户端上的导入语句轻松区分。

给定在我的 npm 包中定义的 4 个函数定义(包名称:super-cool-animals):

蛇.ts

export function Boa() {}
export function Anaconda() {}

鸟.ts

export function Pigeon() {}
export function Hawk() {}

我希望库的使用者能够安装库:

npm install --save super-cool-animals

然后像这样导入它们:

import { Boa, Anaconda } from 'super-cool-animals/snakes'
import { Pigeon, Hawk } from 'super-cool-animals/birds'

Pigeon();  // direct access to the function!

我很难确定实现这一点的正确机制，我相信我已经在某些环境中看到了这种机制(即角)

我看到了一些建议，允许您使用 index.ts 文件将它们组合成单个变量:

蛇/index.ts

export * from './snakes.ts'

鸟类/索引.ts

export * from './birds.ts

./index.ts

import * as Birds from './birds'
import * as Snakes from './snakes'
export { Birds, Snakes}

但这有一个丑陋的最终结果，你现在必须引用容器来获取函数:

图书馆消费者:

import { Birds } from 'super-cool-animals';

Birds.Pigeon();

任何帮助表示赞赏。谢谢你。

Answer 1

事实证明答案非常简单，让我们以我们的示例为例，假设您希望按动物类型划分每个类别，但您只想安装一个包。

> super-cool-animals
    > snakes
        anaconda.js
        boa.js
        package.json
        index.js
    > birds
        hawk.js
        pigeon.js
        package.json
        index.js
    package.json
    readme.md
    index.js

每个索引文件只是导出该级别感兴趣的文件或函数

索引.js

import * as Birds from './birds'
import * as Snakes from './snakes'
export { Birds, Snakes}

蛇/index.js

export * from './anaconda.js'
export * from './boa.js'

鸟类/index.js

export * from './hawk.js'
export * from './pigeon.js'

现在转到 package.json 文件:顶级包文件描述了任何依赖项、作者、导入时使用的库名称等。特定于动物的 package.json 文件只描述了要导入的库的名称.

包.json

{
  "name": "super-cool-animals",
  "version": "1.0.0",
  "description": "Super cool animal library",
  "main": "index.js",
  "author": "Kevin Quinn <glorifundel@gmail.com>",
  "license": "MIT",
  "dependencies": {},
  "peerDependencies": {},
  "devDependencies": {}
}

在较低级别(birds 和 snakes 文件夹)找到的包文件只是描述了可用的相对路径。

蛇/package.json

{
  "name": "super-cool-animals/snakes",
  "main": "index.js"
}

鸟类/package.json

{
  "name": "super-cool-animals/birds",
  "main": "index.js"
}

定义完所有内容后，您现在可以安装 npm 包，并且客户端可以很好地定义它们的导入:

import { Hawk } from 'super-cool-animals/birds';
const SomeBird = Hawk();

不确定这是否是最好的解决方案，但它似乎对我有用，我希望它对某人有所帮助，如果有更好或更清晰的解决方案，请发布它，我很乐意接受更好的答案，或更新我自己的答案。