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

Question

我正在尝试发布一个 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'。

Answer 1

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

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

一些建议：

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

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

2. 使您的 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 部分，因为我自己没有这样做，但我为自己的一个项目做了上述工作，并且按预期工作。

Answer 2

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

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

export * from "./dist";

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

问候:)

Answer 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/ 更改为./

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