javascript - 在ES5模块中支持ES6导入(Support for ES6 imports in ES5 module)

Question

(The bounty expires in 6 days) . ((赏金将 在6天后失效) 。) Answers to this question are eligible for a +50 reputation bounty. (这个问题的答案有资格获得+50声望奖励。) Snow wants to (draw more attention) to this question. (Snow希望(引起更多)关于这个问题的(注意) 。)

For my 1st year students I have provided a simple ES5-based library written using the Revealing Module Pattern.(对于一年级的学生，我提供了一个简单的基于ES5的库，该库使用显示模块模式编写。)

Here is a snippet of the "main" module/namespace, which will house other extensions:(这是“主”模块/命名空间的片段，它将包含其他扩展：) window.Library = (function ($) { if (!$) { alert("The Library is dependent on jQuery, which is not loaded!"); } return {}; })(window.jQuery); This works for pretty much 99.9% of the students who are new to web-development and are not using fancy things like ES6 in combination with Webpack or Babel.(对于几乎不从事Web开发并且没有将ES6等奇特的东西与Webpack或Babel结合使用的学生来说，这适用于大约99.9％的学生。) The 0.1% has now requested me to provide an ES6 based version, which can be imported properly.(现在，0.1％的用户要求我提供基于ES6的版本，可以正确导入该版本。) I'd be happy to provide this, but I'm kind of stuck how to best approach this.(我很乐意提供此服务，但是我对如何最好地解决这个问题感到困惑。) I obviously want to keep the ES5 way, so my students can just include the file using a script-tag and type Library.SomeExtension.aFunction();(我显然想保持ES5的方式，因此我的学生可以只使用脚本标签包含文件，然后键入Library.SomeExtension.aFunction();) where-ever they please.(无论他们在哪里。) On top of that, some of the extensions are reliant on jQuery, which gets injected in a similar way as the snippet above.(最重要的是，某些扩展依赖于jQuery，它的注入方式与上面的代码段类似。) I'm now looking for some maintainable way to get the best of both worlds, with one code-base, with jQuery as a dependency.(我现在正在寻找一种可维护的方法，以一个代码库，以jQuery作为依赖关系来实现两全其美。) I want to give the 99.9% a window.Library , whereas I want to give the 0.1% a way to use import Library from 'library' .(我想给99.9％一个window.Library ，而我想给0.1％一种使用import Library from 'library'的方法。) Can I accomplish this with a single JS file that does both?(我可以用同时做两个的单个JS文件来完成此操作吗？) Or would I need a special ES6 version (not a problem to do)?(还是我需要一个特殊的ES6版本（不是问题）？) And most of all: How would I reshuffle my code (all similar to above snippet) in such a way I can support both situations?(最重要的是：如何以我可以同时支持两种情况的方式重新整理我的代码（均与上述代码段相似）？) Any and all pointers will be greatly appreciated!(任何和所有的指针将不胜感激！) EDIT: Just as a side note, I already have a gulpfile.js in place which runs this library through Babel, minifiers and other things.(编辑：作为一个旁注，我已经有一个gulpfile.js可以通过Babel，minifiers和其他东西运行该库。) So having to extend that to solve above problem is not a problem!(因此，必须扩展它来解决上述问题不是问题！)   ask by Lennard Fonteijn translate from so

Answer 1

You can use Rollup.js to bundle your code as an ES5 library as well as an accompanying ES6 module.(您可以使用Rollup.js将代码捆绑为ES5库和随附的ES6模块。)

Rollup has built-in support for Gulp so something like this would be a reasonable starting point (based on Rollup's Gulp example):(Rollup具有对Gulp的内置支持，因此这样的事情将是一个合理的起点（基于Rollup的Gulp示例）：) const gulp = require('gulp'); const rollup = require('rollup'); const rollupTypescript = require('rollup-plugin-typescript'); gulp.task('bundle', () => { return rollup.rollup({ input: './src/main.ts', plugins: [ rollupTypescript() ] }).then(bundle => { return Promise.all([ // Build for ES5 bundle.write({ file: './dist/library.js', format: 'umd', name: 'Library', sourcemap: true }), // Build for ES6 modules bundle.write({ file: './dist/library.esm.js', format: 'esm', sourcemap: true }) ]); }); }); You can see more information on the different output formats that are available: https://rollupjs.org/guide/en/#outputformat(您可以查看有关可用的不同输出格式的更多信息： https : //rollupjs.org/guide/en/#outputformat) It's generally easiest if your library source is written using ES modules and then bundled/transpiled down to the ES5 bundle.(如果您的库源代码是使用ES模块编写的，然后捆绑/向下移植到ES5捆绑软件，这通常是最简单的。)