假设我在EmberJS项目的/vendor
目录下有一个ES6库“foo”,它是使用最新的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,这是为了支持汇总而废弃的。
我也尝试过直接使用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只是来自第三方供应商的脚本集合,没有“应用程序入口点”,除了相当于一个清单文件之外,对于我正在寻找的东西,汇总似乎是错误的选择。
再次感谢!
1条答案
按热度按时间bvjveswy1#
(已更新为最新选项。)
有几个选项。
1.如果
baz.js
和bar.js
是您自己的模块和代码,最好将它们放在app/my-awesome-module
文件夹中。您可以使用ES6 import将它们导入到其他地方,在那里您想使用它们。Ember CLI将自动翻译,连接和缩小它们。1.如果您想使用第三方模块或解决方案,请查看http://emberobserver.com,大多数流行的库已经转换为Ember Addon,所以您可以使用
ember install
安装它们。1.在您的项目中使用
ember-auto-import
,并将库作为普通ES6模块导入,如下所示:import MyCoolModule from "my-cool-module";