Ember为什么我们必须对某些Bower依赖项使用import

时间:2018-10-06 18:21:44

标签: javascript ember.js ember-cli broccolijs

在Ember应用程序中,当使用某些依赖项(例如通过Bower安装的moment)时,我们还必须将其导入ember-cli-build.js文件:

app.import('bower_components/moment/moment.js');

我的问题是为什么需要这样做,因为我认为node_modules和bower_components内部的所有内容都应可在应用程序内部使用。 同样如果不是这种情况,我们如何确定哪些依赖项需要这种显式导入才能使用它们?

2 个答案:

答案 0 :(得分:1)

实际上,您不必如此。

现在有一个软件包可以让您“仅导入”内容:https://github.com/ef4/ember-auto-import

一些有关导入的内容:https://discuss.emberjs.com/t/readers-questions-how-far-are-we-from-being-able-to-just-use-any-npm-package-via-the-import-statement/14462?u=nullvoxpopuli

在这里深入回答您的问题,并说明为什么事情是这样发布的: https://discuss.emberjs.com/t/readers-questions-why-does-ember-use-broccoli-and-how-is-it-different-from-webpack-rollup-parcel/15384?u=nullvoxpopuli (对于堆栈溢出(在移动设备上也是如此),时间太长了,我不想在复制粘贴中丢失所有链接和引用)

希望这会有所帮助

编辑:

要回答:

  

我只是想了解“在什么情况下”,我们需要在ember-cli-build中使用import语句(这意味着我们不会为package / bower.json中具有的所有依赖项进行导入)。 ..但仅针对特定人员...我想知道导入的标准或用例是什么。

通常,对于每个软件包,自动导入和/或打包程序(将来可能会使用webpack代替汇总)的吸引力都很大。

尽管,ember-addons定义自己的app.import是很常见的,因此您不需要像any of these shims那样配置它,具体地说,这是对c3图表库进行填充的方式: https://github.com/mike-north/ember-c3-shim/blob/master/index.js#L7

像这样“手动”导入所有内容有点麻烦,但这在某种程度上是由于js软件包的发行格式不一致。有umd,amd,cjs,es6等。 使用汇总和西兰花组合时,我们需要手动指定文件的格式。汇总+西兰花方法有一些很大的优势,可以证明herehere

有时,根据转换的不同,您将需要“供应商填充程序”。 当模块决定要在窗口/全局对象上可用而不是在模块导出时可用时,这些方法很方便。 链接:https://simplabs.com/blog/2017/02/13/npm-libs-in-ember-cli.htmlself代表窗口/全局)

但是,webpack已经完成了确定如何检测js文件所采用格式的工作,并将所有这些抽象出来。 webpack是ember-auto-import所使用的,它使您可以简单地 import { stuff} from 'package-name';。 Webpack的缺点是您无法流水线化转换(大多数人可能不需要,但是如果您正在执行Typescript-> Babel-> es5,则可能会很方便)。

答案 1 :(得分:1)

实际上:(几乎)一切!

默认情况下,Ember不会向您的应用添加任何内容(除ember插件之外)。但是,有些插件会动态地向您的应用中添加内容,例如ember-browserifyember-auto-import

仅仅是因为您进行了app.import,这并不意味着您可以将代码与import ... from 'my-package'一起使用。 app.import要做的一件事是将指定的文件添加到您的vendor.js文件中。其他注意事项。

如何使用此依赖项完全取决于所提供的JS文件! Ember使用loader.js,一种AMD模块加载器。因此,如果您app.import使用的JS文件使用AMD(或UMD),则此文件将起作用,并且您可以import Foo from 'my-package'。 (因为这实际上已移植到AMD进口产品中)

如果提供的JS文件提供了全局变量,则可以使用全局变量。 但是,还有concept of vendor-shims.。那基本上只是一个很小的AMD模块,您可以编写以将全局导出为AMD模块。

不过,有很多余烬插件会为您的应用添加内容。例如,ember-cli-moment-shim之类的东西就可以自动地添加到您的项目中。但是,如何完全取决于插件。


所以规则是:

  • 如果它是一个余烬插件,请阅读插件文档,但通常不应该app.import
  • 在其他每种情况下,您都需要通过app.import或手动西兰花转换来手动使用该库。

唯一的例外是,如果您使用的插件会尝试向项目中普遍添加依赖项,例如ember-browserifyember-auto-import