如何在 ember-cli 项目的 /vendor 下捆绑 JavaScript 文件？

Question

假设我在使用最新的ember-cli（在撰写本文时为 2.4.3）构建的 EmberJS 项目中的 /vendor 目录下有一个 ES6 库“foo”。假设 foo 是一个包含多个文件的库，例如bar.js、baz.js 等，它们都导出了一些东西。

我想将vendor/foo/bar.js、vendor/foo/baz.js 等打包成一个分发文件，例如vendor/foo/dist/foo-bundle.js 然后我可以将其导入 Ember：

app.import("vendor/foo/dist/foo-bundle.js");

这看起来应该可以使用捆绑器和/或转译器（如Babel），但我不清楚我应该使用哪些工具以及以何种组合使用。 Ember 是否有内置工具可以通过 ember-cli 执行我想要的操作（如果有，我一定是盲人）？我应该使用像webpack、browserify 或rollup 这样的外部捆绑程序吗？

一般来说，JavaScript 工具似乎有很多噪音，这让我很难理解我有哪些选择来解决这个问题以及如何正确利用它们。任何帮助将不胜感激。

---

一些可能有用的注释...

到目前为止，我已经尝试了一些方法：

我尝试只导入main.js 文件，希望EmberJS 也能遍历依赖关系树并导入import 语句中引用的任何其他文件。这仅导入了main.js 文件，没有其他依赖项。

我查看了 broccoli-es6modules 并在运行时出错，但它也使用了 esperanto，它已被弃用以支持汇总。

我也尝试过直接使用 rollup，取得了一定程度的成功，但我的 bundle.js 输出经常是空的，并且不包含来自 bar.js 或 baz.js 的代码，因为我只导入了它们在入口点（例如main.js）：

main.js
-------
import bar from './bar.js';
import baz from './baz.js';

bar.js
------
export default function bar() {
  ...
}

baz.js
------
export default function baz() {
   ...
}

我发现如果我的main.js 包含一个从bar 或baz 调用代码的函数，我得到的不仅仅是一个空包，但如果 foo 只是来自第三方供应商的脚本集合没有“应用程序入口点”，除了类似于清单文件之类的东西，对于我正在寻找的东西，汇总似乎是错误的选择。

再次感谢！

Answer 1

（使用最新选项更新。）

有几个选项。

1. 如果baz.js 和bar.js 是您自己的模块和代码，最好将它们放在app/my-awesome-module 文件夹中。您可以使用 ES6 导入在您想使用它们的其他地方导入。 Ember CLI 将自动转换、连接和缩小它们。

2. 如果您想使用第 3 方模块或解决方案，请查看 http://emberobserver.com，大多数流行的库已经转换为 Ember 插件，因此您可以使用 ember install 安装它们。

3. 在您的项目中使用 ember-auto-import 并将库作为普通 ES6 模块导入，如下所示：import MyCoolModule from "my-cool-module";