**编辑:**这实际上是关于任何不是为ember设计的npm包。在我的例子中,我试图让crypto-js工作,但似乎总是同样的麻烦与任何不是专门为ember cli设计的npm包。
我想在我的ember应用程序中使用cryptoJS,我目前正在使用ember cli进行重构,但我在导入我已经使用的所有第三方包和库时遇到了很多麻烦,例如cryptoJS。
CryptoJS至少有一个npm的包,我甚至不想去想如果我的一些库没有包会发生什么...
我是不是错过了ember-cli文档中的要点,或者它真的没有描述如何导入其他npm包,以及如何正确地包含非包库,以使它们处于版本控制和依赖关系控制之下?
如果我按照crypto-js软件包手册中的描述:
var CryptoJS = require("crypto-js");
console.log(CryptoJS.HmacSHA1("Message", "Key"));
我的ember build
中出现错误
utils/customauthorizer.js: line 1, col 16, 'require' is not defined.
谢谢你的帮助,我对ember cli项目感到非常兴奋,但是导入我现有的ember应用程序到目前为止还是很痛苦的...
编辑:
不幸的是,仅导入不起作用。
import CryptoJS from 'crypto-js';
在建置期间掷回
daily@dev1:~/VMD$ ember build
version: 0.1.2
Build failed.
File: vmd/utils/customauthorizer.js
ENOENT, no such file or directory '/home/daily/VMD/tmp/tree_merger-tmp_dest_dir-F7mfDQyP.tmp/crypto-js.js'
Error: ENOENT, no such file or directory '/home/daily/VMD/tmp/tree_merger-tmp_dest_dir-F7mfDQyP.tmp/crypto-js.js'
at Error (native)
at Object.fs.statSync (fs.js:721:18)
at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:84:46)
at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:133:9)
at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:133:9)
at /home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:59:7
at $$$internal$$tryCatch (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:470:16)
at $$$internal$$invokeCallback (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:482:17)
at $$$internal$$publish (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:453:11)
at $$rsvp$asap$$flush (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1531:9)
5条答案
按热度按时间rfbsl7qr1#
最简单和推荐的答案是使用
ember-browserify
。(因为对bower包的支持将在将来被删除。)这是一个在Ember CLI应用程序中使用npm包
dexie
的示例。安装browserify:
npm install ember-browserify --save-dev
安装dexie(或您需要的任何模块):
npm install dexie --save-dev
导入模块,如下所示:
import Dexie from 'npm:dexie';
更新日期(2021年4月):
ember-browserify现在已被弃用,支持ember-auto-import或ember-cli-cjs-transform
(see不赞成使用warning at the top of ember-browserify)
0mkxixxg2#
**更新:**我得到了这个工作得更好,直接向前!感谢@j_mcnally的评论!
会把第一个答案留在下面,这样每个人都能看到我是从什么麻烦来的:)
"我做了什么"
Brocfile.js
在我的文件
Brocfile.js
中,我可以只做app.import('bower_components/crypto-js/build/rollups/hmac-md5.js');
无需手动下载或移动文件,只需管理依赖关系,这是一个更好的解决方案!
但老实说,这仍然是很多伏都教!直到我找到了文档...甜:http://bower.io/docs/api/#install
旧方法
我得到了这个工作,但我不能告诉如何漂亮或正确的方法是。包括第三方包或库与ember cli是相当远离直接或自我解释。
引导我找到工作解决方案的资源是:
我采取了以下步骤让它工作:
mkdir vendor/crypto-js
app.import('vendor/crypto-js/hmac-md5.js');
附加到Brocfile.js
文件中"CryptoJS"
添加到了.jshintrc
文件中的"predef"
密钥中然后,构建工作,我最终可以使用库。
我不得不手动下载zip文件,解压缩并将其移动到正确的位置,如果版本发生变化,它不受任何版本/依赖性控制...我不会将其标记为答案,因为它根本不满足我,但至少我想分享我做了什么,使它为我工作。
6ioyuze23#
正如Timm所描述的,使用browserify可以将代码注入到ember应用中。然而,我在实际使用注入的模块时遇到了麻烦。为了做到这一点,我必须在使用它之前使用
New
创建模块:为了导入NPM模块。
1)安装browserify:
npm install ember-browserify --save-dev
个2)安装您型号:
npm install my-module --save-dev
3)将您的模块导入到您感兴趣的成员文件(app/controller/post.js):
import Module from 'npm:my-module';
4)通过使用
New
创建模块来在代码中使用该模块:var output = new Module(var1, var2, etc.);
6fe3ivhb4#
即使这是一个老线程,我认为我会贡献,因为我花了一段时间做这件事。我试图链接到ember的具体包是“d3plus”,必须做各种事情才能让它工作。
npm install d3plus --save-dev
npm install d3plus --save-dev
个ember install ember-cli-coffeescript
npm install --save-dev coffeeify coffeescript
然后在组件中执行
import d3plus from 'npm:d3plus';
在很长一段时间里,当它搜索coffescript时,我会收到运行时错误,并认为这对专门寻找d3plus的人会有帮助。
w6lpcovy5#
如Pablo Morra在simplabs' post "Using npm libraries in Ember CLI"的注解中所述,第三方npm模块可以直接从2.15版导入Ember.js**,而无需插件或 Package 器**:
https://www.emberjs.com/blog/2017/09/01/ember-2-15-released.html#toc_app-import-files-within-node_modules
不幸的是,文档仍在工作中,它没有说npm模块可以导入,只有bower和供应商的:
https://github.com/emberjs/guides/issues/2017https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/打印机
我已经得到了两个解决方案,可以直接在Ember.js上从Ember CLI documentation about managing dependencies导入第三方npm模块,尽管它也过时了,并且说npm模块不能导入,只能导入bower和vendor模块:
npm模块作为标准匿名AMD资产
https://ember-cli.com/managing-dependencies#standard-anonymous-amd-asset
AMD: Asynchronous Module Definition
我更喜欢并使用这种方式,因为它避免了全局变量,并遵循Ember.js的
import
约定。ember-cli-build.js文件夹:
amd
是应用的转换类型,ic-ajax
是在javascript文件上导入时要使用的模块名称。在Ember.js javascript文件上(路由器、组件...):
raw
是由ic-ajax
导出的模块。这就是它对我的工作方式,尽管Ember CLI文档显示了
import
的另一种方式,但对我不起作用,可能是因为我导入的特定包:npm模块作为全局变量
https://ember-cli.com/managing-dependencies#standard-non-amd-asset
ember-cli-build.js文件夹:
在Ember.js javascript文件上(路由器、组件...):
/* global moment */
是ESLint的注解,用于在生成项目时不显示错误,因为文件中未定义moment()
。npm模块作为标准命名AMD资产
https://ember-cli.com/managing-dependencies#standard-named-amd-asset
Ember CLI还显示了第三个选项,不适合我,可能是因为我导入的特定包:
ember-cli-build.js文件夹:
在Ember.js javascript文件上(路由器、组件...):
npm模块作为AMD JavaScript模块
https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/#toc_amd-javascript-modules
Ember.js文档中描述的有关管理依赖项的方法也不适用于我,可能是因为我导入的特定包:
ember-cli-build.js文件夹:
在Ember.js javascript文件上(路由器、组件...):