在Ember应用程序中,当使用某些依赖项(例如通过Bower安装的moment)时,我们还必须将其导入ember-cli-build.js文件:
app.import('bower_components/moment/moment.js');
我的问题是为什么需要这样做,因为我认为node_modules和bower_components内部的所有内容都应可在应用程序内部使用。 同样如果不是这种情况,我们如何确定哪些依赖项需要这种显式导入才能使用它们?
答案 0 :(得分:1)
实际上,您不必如此。
现在有一个软件包可以让您“仅导入”内容:https://github.com/ef4/ember-auto-import
在这里深入回答您的问题,并说明为什么事情是这样发布的: 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等。 使用汇总和西兰花组合时,我们需要手动指定文件的格式。汇总+西兰花方法有一些很大的优势,可以证明here 和here
有时,根据转换的不同,您将需要“供应商填充程序”。
当模块决定要在窗口/全局对象上可用而不是在模块导出时可用时,这些方法很方便。
链接:https://simplabs.com/blog/2017/02/13/npm-libs-in-ember-cli.html
(self
代表窗口/全局)
但是,webpack已经完成了确定如何检测js文件所采用格式的工作,并将所有这些抽象出来。 webpack是ember-auto-import所使用的,它使您可以简单地
import { stuff} from 'package-name';
。 Webpack的缺点是您无法流水线化转换(大多数人可能不需要,但是如果您正在执行Typescript-> Babel-> es5,则可能会很方便)。
答案 1 :(得分:1)
实际上:(几乎)一切!
默认情况下,Ember不会向您的应用添加任何内容(除ember插件之外)。但是,有些插件会动态地向您的应用中添加内容,例如ember-browserify或ember-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-shim
s.。那基本上只是一个很小的AMD模块,您可以编写以将全局导出为AMD模块。
不过,有很多余烬插件会为您的应用添加内容。例如,ember-cli-moment-shim
之类的东西就可以自动地添加到您的项目中。但是,如何完全取决于插件。
所以规则是:
app.import
app.import
或手动西兰花转换来手动使用该库。唯一的例外是,如果您使用的插件会尝试向项目中普遍添加依赖项,例如ember-browserify或ember-auto-import