如何使用webpack导出带有路径的库？

Question

实际上我的图书馆以这种方式导出了要导入的资源：

16

我需要在import { fooComponent } from 'my-library/lib/components' import { fooHook } from 'my-library/lib/hooks' 中进行哪些更改才能以这种方式导入资源？

webpack.config.js

我的import { fooComponent } from 'my-library/components' import { fooHook } from 'my-library/hooks' ：

webpack.config.js

将 ... entry: { components: './src/components/index.js', hooks: './src/hooks/index.js', index: './src/index.js', services: './src/services/index.js', templates: './src/templates/index.js' }, ... output: { filename: '[name].js', globalObject: 'typeof self !== "undefined" ? self : this', library: 'my-library', libraryTarget: 'umd', path: path.join(fileRoot, 'lib'), umdNamedDefine: true }, 修改为path: path.join(fileRoot, 'lib')是不可行的，因为我需要一个分发路径。

是否可以使用TypeScript或Webpack解决此问题？

Answer 1

首先，这不是Webpack的问题。 Webpack将根据您的配置将所有内容捆绑在./lib/[name].js中，这正是您想要的，因为您需要分配路径。 Webpack的工作到此结束。

输入package.json的角色，该角色定义了哪些软件包可用以及在何处可用。让我们看一下两个不同的代码以及幕后发生的事情（过于简化）：

import lib from 'my-lib';

1. 查找“ node_modules / my-lib / package.json＃main”中指定的脚本
2. 从此脚本中全部导入为lib

import { someComponent } from 'my-lib/lib/components';

1. 查找'node_modules / my-lib / lib / components.js , or node_modules / my-lib / lib / components / index.js`
2. 从此脚本导入someComponent

因此，似乎没有任何可能的软件包配置会简单地允许您从导入中删除lib。但是，这有什么大问题吗？只是三个字母