如何在 npm 包中添加文件夹作为条目？

Posted 2023-02-16

【中文标题】如何在 npm 包中添加文件夹作为条目？

【英文标题】：How to add a folder as entry in npm package?

【发布时间】：2019-08-28 00:31:53

【问题描述】：

我正在尝试发布一个 npm 模块。它具有以下文件夹结构。

在我的package.json 中有"main": "./dist/" 我理解index.js 的这种解决方案。但是在 dist 文件夹中，我有名为 string.js、class.js、dom.js 的单个文件，我打算将它们导入为 import isValidZipCode from '@scope/utils/string'; 但现在我必须将它们导入为 import isValidZipCode from '@scope/utils/dist/string';

当我从node_modules 导入模块时，有什么方法可以解析文件夹吗？

编辑：主要想法是当我为单独的导出保留单独的文件时，将文件导入为import isValidZipCode from '@scope/utils/string'。

【参考方案1】：

其他答案在大多数情况下是正确的，但我认为缺少一件事（来自您的 OG 帖子或他们的答案），即：

您的文件夹结构绝对不标准，这可能导致您当前的问题以及当您尝试查找答案时在 Google 搜索中出现无帮助的结果。 您没有显示您的package.json 或webpack.config.js 文件内容，即使您确实有如此奇怪的文件结构，这也是回答您问题的关键。

一些建议：

将您的文件夹结构更改为类似于

/
|--src
    |--utils
        |--string.js
        |--[... other js files]
        |--index.js
|--dist (will be generated automatically)
|--[config files, like package.json, webpack.config.js, etc]

使您的 webpack.config.js 具有以下内容：

output: 
    path: path.resolve(__dirname, 'dist'),
    //...

plugins: [
    new CopyWebpackPlugin(
        patterns: [
            'ReadMe.md', // optional
            'package.json',
            'LICENSE.md' // optional
        ]
    )
],

为了修复/规范化输出（例如，输出将是/dist/utils/[string.js, ...], /dist/package.json）。

然后，将你的 package.json 设为 main 之类的

"main": "utils/string.js"

完成此操作后，您的输出应该类似于

/
|--src
    |--utils
        |--string.js
        |--[... other js files]
        |--index.js
|--dist
    |--utils
        |--string.js
        |--[... other js files]
        |--index.js // optional: only if you want to support stuff like
                    // `import  isValidZip  from '@scope/utils';`
    |--package.json
|--[config files, like package.json, webpack.config.js, etc]

最后，你需要cd dist 并从里面运行npm publish。 （这就是为什么您需要该目录中的 package.json。）

我无法真正详细介绍 @scope 部分，因为我自己没有这样做，但我为自己的一个项目做了上述工作，并且按预期工作。

【参考方案2】：

您需要做的就是在根文件夹中创建一个索引文件，然后使用以下内容导出所有文件：

在您的dist/string 中导出每个方法/函数，并为索引执行以下操作：

export * from "./dist";

因为它有助于维护代码并且看起来更干净

问候:)

【讨论】：

然后将它们导入为import isValidZipCode from '@scope/utils/string'?

抛出错误，无法解析./dist。我假设它在 dist 中寻找 index.js，而 dist 中没有。

【参考方案3】：

在root 文件夹中创建一个index 文件，然后像这样导出所有文件

export  default as Str  from "./dist/string";
export  default as Cls  from "./dist/class";
export  default as Dom  from "./dist/dom";

同时更新package.json 将main 从./dis/ 更改为./

希望这会对您有所帮助。编码愉快。

【讨论】：

嗯是的，这可以解决问题，但您必须将它们导入为import isValidZipCode from '@scope/utils'，而不是import isValidZipCode from '@scope/utils/string'，对吧？

@SubhenduKundu 是，如果在 utils 文件夹上创建索引文件

知道了，但我想将它们导入为'@scope/utils/string'，我知道这听起来很傻，但这可能吗？

@SubhenduKundu 以字符串名称创建文件夹并在其中创建索引文件。在该文件中只需导入 export default as Str from "../dist/string";

让我们continue this discussion in chat.