如何使用第三方npm包与ember cli app

时间：2014-10-24 08:54:24

标签： ember.js npm ember-cli

编辑： 这实际上是关于任何不能与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 个答案:

答案 0 :(得分：52)

最简单的recommended answer is to use ember-browserify。 （作为support for bower packages will be removed in the future.）

这是在Ember CLI应用程序中使用npm包dexie的示例。

安装browserify：npm install ember-browserify --save-dev

安装dexie（或您需要的任何模块）：npm install dexie --save-dev

导入模块如下：import Dexie from 'npm:dexie';

答案 1 :(得分：6)

更新：我让这项工作更好，更直接！感谢@j_mcnally的评论！

将第一个答案留在那里，这样每个人都可以看到我遇到的麻烦：）

我做了什么：

bower install crypto-js=svn+http://crypto-js.googlecode.com/svn/#~3.1.2 --save

在我的文件Brocfile.js中，我可以app.import('bower_components/crypto-js/build/rollups/hmac-md5.js');

无需手动下载或移动文件，只需管理依赖项，更好的解决方案！

但老实说，它仍然是很多vodoo！直到我找到文档......甜蜜：http://bower.io/docs/api/#install

OLD方法

我让这个工作，但我不知道这种方法有多漂亮或正确。包含带有ember cli的第三方软件包或库，远非直接或自我解释。

使我进入工作解决方案的资源是：

我采取了以下步骤来实现它：

然后构建工作，我最终可以使用该库。

可悲的是我没有让npm包工作！我不得不手动下载zip文件，解压缩并将其移动到正确的位置，如果版本发生变化，它不受任何版本/依赖控制......我不会将此标记为答案，因为它不能满足我的要求完全，但至少我想分享我所做的一切，让它对我有用。

答案 2 :(得分：2)

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

答案 3 :(得分：1)

正如Pablo Morra comment simplabs' post "Using npm libraries in Ember CLI"所述，第三方npm模块可以直接从版本2.15 导入Ember.js，无需插件或包装：

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/2017 https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/

我已经从Ember CLI documentation about managing dependencies直接在Ember.js上获得了2个直接导入第三方npm模块的解决方案，虽然它也已经过时并且说npm模块可以＆＃39 ;进口，只有凉亭和供应商：

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

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

  

AMD: Asynchronous Module Definition

我更喜欢并使用这种方式，因为它避免了全局变量，并遵循Ember.js的import约定。

<强>余烬-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

<强>余烬-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还显示对我不起作用的第三个选项，可能是因为我导入的特定包：

<强>余烬-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文档中描述的关于管理依赖关系对我不起作用的方式，也许是因为我导入的特定包：

<强>余烬-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( /* ... */ );

答案 4 :(得分：0)

尽管这是一个老线程，但我认为我会花费一些时间来做这件事。我试图链接到ember的特定包是'd3plus'，并且必须做各种各样的事情才能让它工作。

  1. <span class="curvy"></span> <div class="active">hi</div> <span class="curvy"></span>
  2. npm install ember-browserify --save-dev
  3. npm install d3plus --save-dev
  4. ember install ember-cli-coffeescript

    5. 然后在你的组件中做 npm install --save-dev coffeeify coffeescript

    很长一段时间我在搜索coffescript时遇到运行时错误，并认为这对于专门寻找d3plus的人来说会有所帮助。

相关问题
最新问题