Question

我们说我有一个ES6库＆＃34; foo＆＃34;在我使用最新/vendor构建的EmberJS项目的ember-cli目录下（在撰写本文时为2.4.3）。假设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或{的代码{1}}因为我只在入口点导入了它们（例如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的代码的函数我获得的不仅仅是一个空包，但是如果foo只是一个来自第三方供应商没有＆＃34;应用程序入口点＆＃34;除了类似于清单文件之类的内容之外，汇总似乎是我正在寻找的错误选择。

再次感谢！

Answer 1

有几个选择。

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

2。如果您想使用第三方模块或解决方案，请查看http://emberobserver.com，大多数热门库已转换为Ember Addon，因此您可以使用ember install进行安装。

3。如果您喜欢的库只有npm包，则可以使用ember-browserify。 https://github.com/ef4/ember-browserify 因此，您可以在文件中导入项目，如下所示：import MyCoolModule from "npm:my-cool-module";

4。您可以使用bower安装包装，在这种情况下，您应该按照以下步骤操作：http://ember-cli.com/user-guide/#managing-dependencies

实际上，供应商文件夹就在那里，但如果你从不使用它，那就是最好的。所有外部依赖项应安装为Ember Addon（最好），或npm（好）或bower包（ok）。 Ember CLI会自动将这些依赖项正确捆绑，因此您不必担心它们。

祝你好运！ ;）

如何在/ ember-cli项目中捆绑JavaScript文件？

1 个答案: