如果我想用 ES 模块制作一个共享库怎么办？

Question

从我刚刚做的一些测试来看，似乎如果我在 dependencies.js 文件中导入一些模块，没有摇树，然后将其加载到页面中，然后加载另一个 js 文件页面，想要使用来自 dependencies.js 的模块，它不会工作，因为它似乎模块范围为 dependencies.js 并且在外部不可用。这是正确的吗？如果我想，有没有办法解决 'solve' 这个问题？

Answer 1

是的，你 re-export 他们来自 dependencies.js。例如：

// dependencies.js
export { something } from "./something.js";
export { somethingElse } from "./something-else.js";

请注意，它们只会被 re-export 编辑，它们将无法在 dependencies.js 中进行编码。如果要在 dependencies.js 中使用 something / somethingElse，请导入它们，然后 re-export 它们：

// dependencies.js
import { something } from "./something.js";
import { somethingElse } from "./something-else.js";

export { something, somethingElse }; // Or export them individually

无论哪种方式，这些导出都可用于从 dependencies.js 消耗它们的任何东西。但请注意，它们也可以直接从 something.js 和 something-else.js 获得。（无论哪种方式，它们都绑定到 相同的 导出。）

Answer 2

好的，在这里添加我自己的答案。所以，要恢复：

需要一种在所有网站页面上加载 shared.js 文件的方法，其中包含所有共享库（例如 Swiper、Fancybox 等，您希望将其放入缓存中，不想单独重新加载或捆绑在每个页面上）。
需要这些库可供在 shared.js
之后加载到页面中的其他 js 文件和模块使用
需要使用es模块
需要使用捆绑器（在我的例子中是 rollup，或者 webpack）

问题#1

模块范围仅是定义或导入它们的 js 文件。

问题#2

通过导出模块并将它们导入到其他模块文件中：

如果我们不使用bundlers，会有性能问题（换句话说，即使目前主流浏览器都支持es modules，但其实并不推荐使用raw > 而是，我们仍然需要 budlers > 网上有关于此的文章）。
如果我们使用捆绑器，导入库时它们将被添加到主文件中。因此，在这种情况下，我们最终会在每个页面上加载一份 Swiper & co 的副本。

解决方案 #1（又快又脏）

一句话：在shared.js上，导入模块，然后将它们添加到全局范围，老派方式：window.Swiper = Swiper.

或者，如果你真的害怕全局变量（幸运的是，它已经在整个网络上使用了 20 年而没有破坏它，幸运的是......），在 shared.js 上导出它们，然后通过将文件打包，您最终会在 'namespaced' 全局范围内得到这些库。 budler 将创建一个变量（只需查看 budle 文件的源代码），它将作为对库的访问。类似于 shared.Swiper。 Whish 只是意味着 window.shared.Swiper

解决方案 #2（'modern' 一个）

代码拆分。所有主要的打包器都可以通过各种方式来完成，所以只需查看来自 Webpack、Parcel、Rollup 或 Laravel mix 的文档。

如果我想用 ES 模块制作一个共享库怎么办？

What if I want to make a shared library out of ES modules?

javascript

es6-modules