Webpack 4多部件库和子库

Question

概述

我正在使用Webpack4＆amp ;;开发一个javascript库。 ES6称为：“共享服务”，包含不同的子文件夹。这些子文件夹中的每一个都代表一个“本地子库”，里面可以包含：

• 引用其他第3个库，如lodash等，但也
• 引用其他“子文件夹或子库”的方法

示例

我做了一个我的问题的例子并将其推送到github：https://github.com/iarroyo5/multi-part-library-webpack。有用的是它应该像遵循Readme文件一样简单，以便执行它：）

问题

1. 在我的示例中，我将“shared-services”库命名为“multi-part-library-webpack”。有两个“子文件夹”：api和path。我们的目标是以这种方式提供sub-folders/sub-libraries：

   import { API_URL, getApiUrl } from '@iarroyo/multi-part-library-webpack/api"; import { getUserPath } from '@iarroyo/multi-part-library-webpack/path";

在提供的例子中，我已经实现了目标!! ... Webpack输出是3个文件：

1. index.js - ＆gt;包含api和path中apiLib和pathLib
的所有方法
2. api.js - ＆gt;包含api种方法
3. path.js ---＆gt;包含path方法和 api方法 :(



但我的未解决的大问题来自于此^。由于某些api方法被导入path库（每个文件夹必须是sub-library本身，并且可以在其他文件夹中使用）webpack {{1 } file完全包含path.js子文件夹。

在示例中api正在使用path，但是第三个库没有被导出，因为我已将它们添加到lodash Webpack选项中，所以这至少有效。

1. 这不太理想，还有另一个大问题：

   externals

^这是完全正常的，并且它返回正确的值，因为名为imports的这些来自import { API_URL, getApiUrl } from '@iarroyo/multi-part-library-webpack/api";，但是......我也可以这样做：

api

因为import { API_URL, getApiUrl } from '@iarroyo/multi-part-library-webpack/path"; 中的所有方法都在api内......唯一的区别是这些方法/变量的值是path ...所以这个解决方案是根本不理想，因为有些人可能会尝试使用undefined，methods和variables库应该抛出类似path

的异常

Applied Insights

1. 我已经尝试将每个子文件夹添加为外部，这样我就会想到也许Webpack会认识到他们是彼此外在的......但是这并不是'帮助。

2. 我添加了选项invalid method...以便使用Webpack 4启用"sideEffects": false，但显然它根本不起作用。我读到Tree Shaking无法使用tree-shaking转换代码，但我不确定这是否已在webpack4中解决（似乎官方webpack发布日志说是......但是！ ！）。 在任何情况下，我也已将其从babel-loader中移除并尝试了一下，而webpack-config也无效...（我需要tree-shaking作为我的最终库，所以这是一项要求）

3. 我尝试了babel-loader并且我已经审核了所有Webpack examples以尝试获得一些新的想法，但我认为分成DllPlugin个文件不是出于这个原因的解决方案：

正如您所看到的，使用webpack4的chunks选项我有可重复使用的代码，但问题是，当我生成最终的optimization.splitChunks库时，我无法访问commonjs2喜欢

sub-libraries

这不再适用了!! :( 因为现在所有的方法都在import { API_URL, getApiUrl } from '@iarroyo/multi-part-library-webpack/api"; import { getUserPath } from '@iarroyo/multi-part-library-webpack/path"; 和commons-index-path.js api.js commons-api-index-path.j and path.js`是缩小的文件，当我试图访问这些方法时他们抛出了这个错误：

and

这篇文章window is not defined when consuming webpack multi-part-library sample files可能是相关的。

我当时希望webpack可以保存对我的方法的引用，我将能够使用ReferenceError: window is not defined at /Users/inakiarroyo/workspace/spartancode/export-library/dist/index.js:1:1011 at Object.<anonymous> (/Users/inakiarroyo/workspace/spartancode/export-library/dist/index.js:1:1163) at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/inakiarroyo/workspace/spartancode/export-library/dev/es6-lib.js:3:25) error An unexpected error occurred: "Command failed. 和api.js，但是又一次：（

可能的解决方案

1. 我认为它可以工作的唯一方法是在运行这些“children-webpack”运行程序的path.js中每个“子文件夹”有一个package.json，以便生成每个库和有另一个“parent-webpack”运行器，它将使用为每个“child-webpack”生成的每个子文件作为webpack "multi-part-library-webpack" ... 但老实说这听起来像一个混乱的解决方案。

2. 我真的可以尝试使用entry吗？

3. 有人知道Rollup是否可以这样做吗？