Javascript 从npm包的子文件夹导入

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

使用该包的项目都使用webpack来捆绑/传输代码，因为我尽量避免在组件库中进行任何构建（如果可能）

目录结构 package.json

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

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

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 './ButtonGroup';

export default Button;

export { Button, ButtonGroup};

如果仅从子目录导入，是否确实需要此文件

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';

例子 是React组件库，通过以下方式使用：

从“材料ui/RadioButton”导入{RadioButtonGroup}。我试图弄明白这对他们是如何起作用的，但还没有结果

类似问题



这几乎是我所需要的正确方法，除了这里使用的导入路径涉及
src/
目录，我试图避免它（应该是
component library/item
，而不是
component library/src/item
（虽然它目前可以工作））




这正是我想要的，只是我不希望在包中有“构建”阶段（依赖导入位置来构建/传输）



问题
我可以跳过导入路径中的
src/
目录吗
我可以跳过包中任何类型的构建阶段吗（这样开发人员就不必在提交之前构建）
类似于material ui的包如何处理此问题
答案可能取决于您如何安装组件库。如果您通过
npm安装：/
或
npm安装
进行安装

根据，您应该能够按原样从“组件库/按钮”导入{Button}

。类似于，Webpack应该解析组件库中相对于组件库入口点的子目录。您可以通过属性找到有关自定义解析行为的文档。似乎依赖于从模块条目目录解析子目录导入

要分发ES模块库，无需在分发之前构建。但是，诸如的项目可能需要预传输版本

或者，您可以从“组件库”编写

import{Button}

。

---

Webpack将通过每个

索引

毫无疑问地追溯相关性。

可能的解决方案之一是Webpack别名系统。
您可以创建另一个项目，例如称之为“应用程序别名”，这样您的别名将可重用。
此项目将有一个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.config.js

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

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

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

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

如果您使用的是typescript，则需要将相同的别名添加到

path

tsconfig属性中。
因此，您的问题的答案是：

是的，您可以使用别名中的任何路径

是的，不必构建所有项目

我看到现在mui使用从directi包（例如core）导入，看到有

从'@material ui/core/Radio'导入无线电。但我希望他们使用我在下面描述的再出口

还有关于

node.js

解析机制。
导入某些库时，它会尝试查找

node\u模块/some library/package.json

，然后在其中查找

main

属性。此属性应指向您的主要入口点。通常它是

src/index.js

（如果还没有在package.json中设置它）。在这个文件中，您可以从内部文件结构中重新导出任何您想要的内容，并且可以在没有完整路径的情况下使用它。

---

请看下面的示例。

我是angular开发者，从未使用过react，但我可以告诉大家，material ui使用的是monorepo，angular中存在相同的概念，我们创建了一个工作区，该工作区包含react中指定的多个项目/包。更多信息

材质ui使用tsconfig中的假路径使其看起来好像src文件夹不存在这来自您提供的git:

我可以在导入路径中跳过src/目录吗？ 对。使用package.json

“exports”

字段，该字段应在不久的将来由Webpack支持（请参见此），但自Node 12 LTS起，Node就已经支持该字段，如下所示：

package.json

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

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

现在，输入以下代码：

//此项目负责导入后的生成/传输
从“组件库/按钮”导入{Button，ButtonGroup}；

应翻译为：

从“组件库/src/Button/index.js”导入{Button，ButtonGroup}；

应该正确导入请求的模块

警告 现在，尝试一个更简单的版本当然很有诱惑力，比如：

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

就像通常的进口声明一样

从“组件库/按钮”导入{…}；

被翻译成

从“组件库/src/Button”导入{…}；

这看起来不错，但在这种情况下，不起作用，因为您的子模块没有各自的

package.json

文件，而是依赖于要找到的

index.js

文件

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

---

src/index.js-如果仅从子目录导入，是否确实需要此文件？ 我不这么认为