1

假设我在使用最新版本（在撰写本文时为 2.4.3）/vendor构建的 EmberJS 项目中的目录下有一个 ES6 库“foo”。ember-cli假设 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，它已被弃用以支持汇总。

我也尝试过直接使用汇总，取得了一定程度的成功，但通常我的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 只是来自第三方供应商的脚本集合，没有“应用程序入口点”，除了数量对于清单文件之类的东西，汇总似乎是我正在寻找的错误选择。

再次感谢！

4

1 回答 1

3

（使用最新选项更新。）

有几个选项。

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

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

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

于 2016-04-13T07:28:59.193 回答