ember.js 如何将第三方npm软件包与ember cli app一起使用

wgmfuz8q  于 2022-11-05  发布在  其他
关注(0)|答案(5)|浏览(123)

**编辑:**这实际上是关于任何不是为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)
rfbsl7qr

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-importember-cli-cjs-transform
(see不赞成使用warning at the top of ember-browserify

0mkxixxg

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是相当远离直接或自我解释。
引导我找到工作解决方案的资源是:

我采取了以下步骤让它工作:

然后,构建工作,我最终可以使用库。
我不得不手动下载zip文件,解压缩并将其移动到正确的位置,如果版本发生变化,它不受任何版本/依赖性控制...我不会将其标记为答案,因为它根本不满足我,但至少我想分享我做了什么,使它为我工作。

6ioyuze2

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.);

6fe3ivhb

6fe3ivhb4#

即使这是一个老线程,我认为我会贡献,因为我花了一段时间做这件事。我试图链接到ember的具体包是“d3plus”,必须做各种事情才能让它工作。

  1. npm install d3plus --save-dev
  2. npm install d3plus --save-dev
  3. ember install ember-cli-coffeescript
  4. npm install --save-dev coffeeify coffeescript
    然后在组件中执行import d3plus from 'npm:d3plus';
    在很长一段时间里,当它搜索coffescript时,我会收到运行时错误,并认为这对专门寻找d3plus的人会有帮助。
w6lpcovy

w6lpcovy5#

Pablo Morrasimplabs' 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文件夹:

app.import('node_modules/ic-ajax/dist/amd/main.js', {
  using: [
    { transformation: 'amd', as: 'ic-ajax' }
  ]
});

amd是应用的转换类型,ic-ajax是在javascript文件上导入时要使用的模块名称。

在Ember.js javascript文件上(路由器、组件...):

import raw from 'ic-ajax';
// ...
icAjaxRaw( /* ... */ );

raw是由ic-ajax导出的模块。
这就是它对我的工作方式,尽管Ember CLI文档显示了import的另一种方式,但对我不起作用,可能是因为我导入的特定包:

import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );

npm模块作为全局变量

https://ember-cli.com/managing-dependencies#standard-non-amd-asset

ember-cli-build.js文件夹:

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

在Ember.js javascript文件上(路由器、组件...):

/* global moment */
// No import for moment, it's a global called `moment`

// ...
var day = moment('Dec 25, 1995');

/* global moment */是ESLint的注解,用于在生成项目时不显示错误,因为文件中未定义moment()

npm模块作为标准命名AMD资产

https://ember-cli.com/managing-dependencies#standard-named-amd-asset
Ember CLI还显示了第三个选项,不适合我,可能是因为我导入的特定包:

ember-cli-build.js文件夹:

app.import('node_modules/ic-ajax/dist/named-amd/main.js');

在Ember.js javascript文件上(路由器、组件...):

import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );

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文件夹:

app.import('node_modules/ic-ajax/dist/named-amd/main.js', {
  exports: {
    'ic-ajax': [
      'default',
      'defineFixture',
      'lookupFixture',
      'raw',
      'request'
    ]
  }
});

在Ember.js javascript文件上(路由器、组件...):

import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );

相关问题