javascript - 支持 ES5 模块中的 ES6 导入

Question

对于我一年级的学生，我提供了一个使用显示模块模式编写的简单的基于 ES5 的库。这是“主”模块/命名空间的片段，它将容纳其他扩展:

window.Library = (function ($) {
    if (!$) {
        alert("The Library is dependent on jQuery, which is not loaded!");
    }

    return {};
})(window.jQuery);

这适用于几乎 99.9% 的 Web 开发新手，并且没有将 ES6 等花哨的东西与 Webpack 或 Babel 结合使用。

0.1% 现在要求我提供一个基于 ES6 的版本，可以正确导入。我很乐意提供这个，但我有点坚持如何最好地解决这个问题。

我显然想保持 ES5 的方式，所以我的学生可以使用脚本标签包含文件并输入 Library.SomeExtension.aFunction();他们喜欢的地方。最重要的是，一些扩展依赖于 jQuery，它以与上面的代码片段类似的方式注入(inject)。

我现在正在寻找一些可维护的方法来获得两全其美，使用一个代码库，将 jQuery 作为依赖项。我想给 99.9% 一个 window.Library ，而我想给 0.1% 一个使用 import Library from 'library' 的方法.

我可以通过一个 JS 文件来完成这两者吗？或者我需要一个特殊的 ES6 版本(不是问题)？最重要的是:我将如何重新调整我的代码(都类似于上面的代码片段)以支持这两种情况？

任何和所有的指针将不胜感激!

编辑:顺便说一句，我已经有一个 gulpfile.js通过 Babel 运行这个库的地方, minifiers和其他东西。所以必须扩展它来解决上述问题不是问题!

Answer 1

经过几个晚上移动代码并安装了这么多 gulp 包，我什至不记得我尝试过的所有包，我最终确定了一些我半满意的东西。
首先，回答我自己的问题，@Bergi 在评论中也支持了这个问题:

Short answer: No, you cannot, in any way (right now), mix ES6 syntax with ES5 (modules) in a single file because the browser will error out on the use of export.

Long answer: Technically you can set your script-element type to "module", which will make browsers accept the export keyword. However, your code will simply run twice (once on load, and once after importing). If you can live with this, then the no becomes a yes, kinda.

那么我最终做了什么？让我先说明一下，我真的很想在输出 ES5 文件中保留我(目前)拥有的 IIFE 模块设置。我将我的代码库更新为纯 ES6，并尝试了各种插件组合(包括 @David Bradshaw 提到的 Rollup.js)。但是我根本无法让它们工作，或者它们会以浏览器无法再加载模块或放弃源映射支持的方式完全破坏输出。随着学生们现在正在做的项目接近尾声，我已经为0.1%的学生浪费了足够多的业余时间。所以明年更好的“更好”的解决方案。

我将我的 UMD 模式(如 @Sly_cardinal 提到的)基于 jQuery 并将该代码放入 Library.umd.js .对于 ES6 部分，我做了一个 Library.es6.js只有 export default Library在里面。

在这两个文件中，我放置了一个多行注释 /*[Library.js]*/我想在其中注入(inject)连接的未缩小 Library.js。

我修改了我现有的 Gulp 任务来构建 Library.js与 concat和 Babel并将其存储在临时位置。我选择在这个过程中牺牲源映射支持，因为连接的代码在输出中是完全可读的。从技术上讲，源映射支持“有效”，但它仍然会过多地甩掉调试器。

我添加了一个额外的 Gulp 任务来读取 temp Library.js 的内容，然后对于步骤 1 中的每个文件，我会找到并用内容替换多行注释。保存生成的文件，然后将它们扔到最后的 concat (例如，与 jQuery 捆绑)，terser和源图生成。

最终结果是两个文件:

一种支持 UMD/ES5 浏览器

一个支持 ES6

虽然我对结果感到满意，但我不喜欢 Gulp 任务链以及在该过程的前半部分失去 sourcemap 支持。如前所述，我尝试了许多 gulp 插件来达到相同的效果(例如 gulp-inject )，但它们要么不能正常工作，要么对源映射做了奇怪的事情(即使他们声称支持它)。
对于下一次尝试，我可能会研究与 Gulp 不同的东西，或者创建我自己的插件来完成上述工作，但正确:P