如何连接 ES6 模块？答案

【问题标题】：How do I concatenate ES6 modules?如何连接 ES6 模块？
【发布时间】：2015-02-13 19:28:01
【问题描述】：

如何连接 ES6 模块？

var foo = 2; // This would normally be scoped to the module.
export function Bar() {}

// ...concatenate...

import { Bar } from 'javascripts/bar' //This file no longer exists in the concatenated scenario.
export function Bam() {}

【问题讨论】：

//This file no longer exists in the concatenated scenario. 是什么意思？您必须从文件中导入它，或者将其内容包含在内。您是否尝试在没有单独的文件来定义 Bar 的情况下导入 Bar？
concat 是什么意思？创建导出两个模块项目的第三个文件有什么问题？
在当前的 ES6 语法中不可能在同一个文件中声明两个模块。这是否回答了您最初的问题？
等等，最后一个说法是错误的，System.module 刚刚从 ES6 中删除并放入了不同的规范 - 这让我很头疼：S
@justin 我个人可以推荐 babel（以前是 6to5），它会很乐意在构建步骤中为您执行此操作 - 超级有用并生成非常好的代码。

标签： javascript module ecmascript-6 es6-modules

【解决方案1】：

2020-09-02 更新： 世界语在不久前被Rollup 取代，是解决此问题的绝佳选择。根据您的需要，Webpack 也可能是一个不错的选择。

如果您想做的是创建一个内部不使用 ES6 模块的单个 JavaScript 文件，以便您现在可以在浏览器/节点上使用它，那么我建议使用 Esperanto（完全公开，我是项目的维护者）。它允许您创建一个捆绑包，将所有文件连接在一起，而无需使用加载器，就像使用 browserify 或 webpack 之类的东西一样。这通常会导致更小的代码（无加载器）、更好的死代码消除（当使用像 Google Closure Compiler 或 UglifyJS 这样的压缩器时）以及更好的性能，因为 JS 解释器能够更好地优化结果。

这是一个示例用法，但请注意有plenty of tools to integrate Esperanto into your workflow：

var fs = require( 'fs' );
var esperanto = require( 'esperanto' );

esperanto.bundle({
  base: 'src', // optional, defaults to current dir
  entry: 'mean.js' // the '.js' is optional
}).then( function ( bundle ) {
  var cjs = bundle.toCjs();
  fs.writeFile( 'dist/mean.js', cjs.code );
});

这个例子取自wiki page on bundling ES6 modules。

【讨论】：

链接 esperantojs.org 去一些色情/垃圾邮件网站

【解决方案2】：

我建议你看一下http://webpack.github.io，然后将它与 babel 结合起来。

或者你也可以单独使用 babel：

https://babeljs.io/docs/usage/cli/

【讨论】：

你能描述一下如何单独使用 babel cli 来实现它吗？
看起来 babel 有连接文件的能力，但它不会内联 import/require。那些 import/require 调用仍将存在于连接文件中。看起来您确实需要使用 Webpack 之类的东西来解决所有这些脚本依赖项。