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

Posted 2023-03-13

【中文标题】如何使用 webpack 导出带有路径的库？

【英文标题】：How export my library with paths using webpack?

【发布时间】：2019-07-24 00:26:42

【问题描述】：

其实我的库就是这样导出要导入的资源的：

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') 为path: path.join(fileRoot, '') 不是一个选项，因为我需要一个分发路径。

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

【问题讨论】：

@PlayMa256 在 OP 的配置中，webpack 不会将所有内容合并在一起。再次检查 webpack 配置中的 entry 和 output.filename 值。

【参考方案1】：

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

输入package.json 的角色，它定义了哪些包可用以及在哪里可用。让我们看看两个不同的代码，看看幕后发生了什么（过于简单化）：

import lib from 'my-lib';

查找 'node_modules/my-lib/package.json#main` 中指定的脚本 从此脚本中全部导入为lib

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

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

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

【讨论】：

不，这当然不是什么大问题，但是......对于这个库的任何导入，有四个字符。你回答对我帮助不大。在任何时候我都说这是一个 webpack 问题，但我看不出如何正确配置它以按预期工作。

如果无法使用 webpack 做我想做的事，也许可以更改 package.json 中的一些内容，或者创建 typescript 配置，这是可能的。我没有。