ember.js 如何在ember-cli项目中的/vendor下捆绑JavaScript文件?

omjgkv6w  于 2022-11-05  发布在  Java
关注(0)|答案(1)|浏览(143)

假设我在EmberJS项目的/vendor目录下有一个ES6库“foo”,它是使用最新的ember-cli(在编写本文时为2.4.3)构建的。假设foo是一个包含多个文件的库,例如bar.jsbaz.js等,它们都导出了一些内容。
我想将vendor/foo/bar.jsvendor/foo/baz.js等文件捆绑到一个分发文件中,例如vendor/foo/dist/foo-bundle.js,然后我可以将其导入Ember中:

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

这看起来像是可以使用捆绑器和/或传送器(比如Babel),但是我不清楚应该使用什么工具,以及如何组合。Ember是否有内置的工具可以通过ember-cli完成我想做的事情(如果有的话,我一定是瞎了)?我应该使用webpackbrowserify,还是rollup这样的外部捆绑器?
总的来说,关于JavaScript工具似乎有很多噪音,这让我很难理解我有什么选择来解决这个问题,以及如何正确地利用它们。如果有任何帮助,我将不胜感激。

一些可能有帮助的注解...

到目前为止,我已经尝试了几种方法:
我试着只导入main.js文件,希望EmberJS也能遍历依赖关系树,并导入import语句中引用的任何其他文件。这样只导入了main.js文件,没有其他依赖关系。
我看过broccoli-es6modules,在运行它时出现了错误,但它也使用了esperanto,这是为了支持汇总而废弃的。
我也尝试过直接使用rollup,取得了一定程度的成功,但是我的bundle.js输出经常是空的,并且不包括来自bar.jsbaz.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包含一个调用barbaz代码的函数,那么我得到的不仅仅是一个空包,但是如果foo只是来自第三方供应商的脚本集合,没有“应用程序入口点”,除了相当于一个清单文件之外,对于我正在寻找的东西,汇总似乎是错误的选择。
再次感谢!

bvjveswy

bvjveswy1#

(已更新为最新选项。)
有几个选项。
1.如果baz.jsbar.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";

相关问题