从 npm 包的子文件夹导入

Question

我一直致力于创建一个小型 React 组件库，以用于其他几个项目。我在内部发布包（使用私有 GitHub 存储库），然后包含在另一个项目中。但是，当我从包的子目录导入时，由于路径不匹配，我无法这样做。

使用该包的项目都使用 webpack 来捆绑/转译代码，因为我尽量避免在组件库中进行任何构建。

目录结构

- package.json
- src/
  - index.js
  - Button/
    - index.js
    - Button.jsx
    - ButtonGroup.jsx
  - Header/
    - index.js
    - Header.jsx (default export)

package.json

...
"main": "./src/index.js",
"scripts": "",
...

src/Button/index.js

import Button from './Button';
import ButtonGroup from './ButtonGroup';

export default Button;

export { Button, ButtonGroup};

src/index.js

如果只从子目录导入，这个文件真的有必要吗？

import Button from './Button';
import ButtonGroup from './Button/ButtonGroup';
import Header from './Header';

export { Button, ButtonGroup, Header };

其他项目

// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';

示例

Material-UI 是一个 React 组件库，通过以下方式使用：import { RadioButtonGroup } from 'material-ui/RadioButton。我试图弄清楚这对他们是如何工作的，但还没有成功。

类似问题

• How would I import a module within an npm package subfolder with webpack?
  • 这几乎是我需要的正确方法，除了那里使用的导入路径涉及src/ 目录，我试图避免（应该是component-library/item，而不是component-library/src/item（虽然目前确实有效） ))
• Publishing Flat NPM Packages
  • 这正是我想要的，只是我希望包中没有“构建”阶段（依赖于导入位置来构建/转换）

问题

1. 我可以在导入路径中以某种方式跳过src/ 目录吗？
2. 我可以跳过包中的任何类型的构建阶段（这样开发人员就不必在提交之前构建）吗？
3. 类似于 material-ui 的包如何处理这个问题？

Answer 1

答案可能取决于您安装组件库的方式。如果您是通过npm install <git-host>:<git-user>/<repo-name> 或npm install <git repo url> 完成的，

1. 根据your first linked question，您应该可以按原样使用import {Button} from 'component-library/Button'。与Node's require() resolution 类似，Webpack 应该解析组件库中相对于组件库入口点的子目录。您可以通过 webpack.config.resolve 属性找到有关自定义解析行为的文档。 material-ui 似乎依赖于从模块入口目录解析子目录导入。

2. 要分发 ES 模块库，无需在分发之前进行构建。但是，create-react-app 等项目可能需要预编译版本。

或者，您可以写import {Button} from 'components-library'。 Webpack 会毫不费力地通过每个 index 追溯依赖关系。

Answer 2

其中一个可能的解决方案是 webpack 别名系统。
您可以创建另一个项目，例如将其命名为“app-aliases”，这样您的别名就可以重复使用。
这个项目将有一个包含所有包路径的 js 文件：

const path = require('path');

module.exports = {
'@components': path.resolve(__dirname, 'node_modules/components-library/src'),
'@another': path.resolve(__dirname, 'node_modules/any/path/you/want'),
}

然后将其添加到任何负责构建/转译的项目的 webpack 配置中：
webpack.config.js

const appAliases = require('app-aliases');

const config = {
...
  resolve: {
    alias: {
      ...appAlises
    }
  }
}

在运行时代码中你可以这样使用它：

import {Button} from '@components/Button';
import {Something} from '@another'

如果您使用的是 typescript，则需要将相同的别名添加到 paths tsconfig 属性。
所以你的问题的答案是：

1. 是的，您可以在别名中使用任何路径
2. 是的，不必构建所有项目
3. 我看到现在 mui 使用来自 directi 包（例如核心）的导入，请参阅 https://material-ui.com/components/radio-buttons/ 有 import Radio from '@material-ui/core/Radio';。但我希望他们使用我在下面描述的再出口。

还有关于node.js的解析机制。
当您导入某个库时，它会尝试在其中找到 node_modules/some-library/package.json 和 main 属性。此属性应指向您的主要入口点。通常是src/index.js（如果还没有，你应该在 package.json 中设置它）。在此文件中，您可以从内部文件结构中重新导出您想要的任何内容，并且可以在没有完整路径的情况下使用它。 有关示例，请参阅此repo。

Answer 3

我是一名 Angular 开发人员，从未使用过 react，但我可以说 material-ui 正在使用 monorepo，其中相同的概念存在于 angular 中，我们创建一个工作区，并且该工作区包含多个项目/包，如 react 中命名的那样。欲了解更多信息Workspaces with Yarn

Material-ui 在 tsconfig 中使用假路径使其看起来像 src 文件夹在您提供的 git 中不存在：tsconfig.json

Answer 4

我可以在导入路径中以某种方式跳过 src/ 目录吗？

是的。使用 package.json "exports" 字段，Webpack 应该会在不久的将来支持该字段（请参阅此 issue），但自 Node 12 LTS 之后的 Bare Module Specifier Resolution proposal 之后，Node 已经支持：

package.json

...
"main": "./src/index.js",
"type": "module",
...
"exports": {
  "./Button": "./src/Button/index.js",
  "./Header": "./src/Header/index.js"
},
...

现在，下面的代码：

// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';

应该翻译成：

import { Button, ButtonGroup } from 'components-library/src/Button/index.js';

应该正确导入请求的模块。

警告

现在，尝试更简单的版本肯定会很诱人：

...
"exports": {
  "./Button": "./src/Button/",
  "./Header": "./src/Header/"
},
...

所以和通常的导入语句一样

import { ... } from 'components-library/Button';

被翻译成

import { ... } from 'components-library/src/Button';

这看起来不错，但在这种情况下它不起作用，因为您的子模块没有各自的 package.json 文件，而是依赖于它们的 index.js 文件才能找到。

/!\ 与 CommonJS 不同，没有自动搜索 index.js 或 index.mjs 或文件扩展名。

---

src/index.js - 如果只从子目录导入，这个文件真的有必要吗？

我不这么认为，但如果你愿意，你可以保留它。

---

我可以跳过包中的任何类型的构建阶段吗？

使用"exports" 字段不需要您转译代码。

Answer 5

你必须安装babel-plugin-module-resolver包

像这样在 .babelrc 文件别名中指定包的相对路径

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "components-library": "./node_module/components-library"
      }
    }]
  ]
}

然后你可以像这样导入npm包的子目录

import { Button, ButtonGroup } from 'components-library/Button';

Answer 6

这是可能的，但需要发布一个精选的 dist 文件夹，而不是项目的根目录。

如果您了解模块解析的工作原理，整个事情就相当简单了，您只需要一个小脚本来准备您的分发。

为了避免我在这里重复所有细节，请参阅我对Importing from subfolders for a javascript package的回答。