首页 文章

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

提问于
浏览
25

EDIT: 这实际上是关于任何不能与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应用程序到目前为止一直非常痛苦...

EDIT:

只是导入不幸不起作用 .

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 回答

  • 6

    最简单的和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';

  • 2

    UPDATE: 我让这项工作更好,更直接!感谢@j_mcnally的评论!

    将第一个答案留在那里,这样每个人都可以看到我来自哪个麻烦:)

    What I did:

    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 approach

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

    导致我使用我的工作解决方案的资源是:

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

    然后构建工作,我最终可以使用该库 .

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

  • 1

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

  • 49

    正如Pablo Morrasimplabs' post "Using npm libraries in Ember CLI"comment所述,第三方npm模块可以从版本2.15 directly without the need of addons or wrappers 导入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上导入了第二方npm模块的2个解决方案,虽然它是's also out-of-date and says that npm modules can' t,但只有bower和供应商才能导入:

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

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

    AMD:异步模块定义

    我更喜欢并使用这种方式,因为它避免了全局变量并遵循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文件中导入时使用的模块名称 .

    on Ember.js javascript file (router, component...):

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

    rawic-ajax 导出的模块 .

    这就是它对我有用的方式,虽然Ember CLI文档显示 import didn't work for me ,可能是因为我导入的特定包:

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

    on Ember.js javascript file (router, component...):

    /* 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还显示了 didn't work for me 的第三个选项,可能是因为我导入的特定包:

    ember-cli-build.js:

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

    on Ember.js javascript file (router, component...):

    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

    关于管理依赖关系 didn't work for me 的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'
        ]
      }
    });
    

    on Ember.js javascript file (router, component...):

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

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

    • npm install ember-browserify --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的人来说会有所帮助 .

相关问题