web-dev-qa-db-ja.com

ember cli appでサードパーティのnpmパッケージを使用する方法

編集：これは、実際には、エンバーと一緒に遊ぶように設計されていないnpmパッケージに関するものです。私の場合、crypto-jsを動作させようとしましたが、ember cli。

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)
ember.jsnpmember-cli
27
Preexo

最も簡単で 推奨される答えは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';

54
Timm

UPDATE：私はこれをはるかに良く、簡単に動作させることができました！ @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');

手動でファイルをダウンロードしたりファイルを移動したりすることなく、依存関係を管理するだけで、はるかに優れたソリューションを実現できます！

しかし、正直なところ、それはまだたくさんの愚か者でした！ドキュメントが見つかるまで... sweet： http://bower.io/docs/api/#install

古いアプローチ

私はこれを機能させましたが、そのアプローチがどれほどきれいで正しいかはわかりません。 ember cliを使用してサードパーティのパッケージまたはライブラリを含めることは、簡単な説明や自己説明からはほど遠いものです。

私の作業ソリューションに導いたリソースは次のとおりです。

私がそれを機能させるために取った次のステップ：

  • ライブラリを手動でダウンロードしました https://code.google.com/p/crypto-js/downloads/detail?name=CryptoJS%20v3.1.2.Zip を解凍しました
  • ベンダーディレクトリに手動でディレクトリを作成しました：_mkdir vendor/crypto-js_
  • app.import('vendor/crypto-js/hmac-md5.js');を_Brocfile.js_ファイルに追加しました
  • _"CryptoJS"_ファイルの_"predef"_キーに_.jshintrc_を追加しました

その後、ビルドが機能し、最終的にライブラリを使用できました。

残念ながら、npmパッケージが機能しませんでした！ Zipファイルを手動でダウンロードして解凍し、正しい場所に移動する必要がありました。バージョンが変更されても、バージョン/依存関係の管理下にありません。これは答えとしてマークしません。しかし、少なくとも私はそれが私のために働くようにしたことを共有したかった。

6
Preexo

Timmが説明するように、browserifyを使用するとコードがemberアプリに挿入されます。ただし、実際に挿入されたモジュールを使用するのに問題がありました。そのために、実際にモジュールをNewで作成する必要がありました使用する前に：

NPMモジュールをインポートするため。

1）browserifyをインストールします。

_npm install ember-browserify --save-dev_

2）モデルをインストールします：

_npm install my-module --save-dev_

3）モジュールをember対象のファイル（app/controller/post.js）にインポートします。

_import Module from 'npm:my-module';_

4）Newでモジュールを作成して、コード内からモジュールを使用します。

var output = new Module(var1, var2, etc.);

2
jtf

Pablo Morra on comment on 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モジュールをインポートできるとは言わず、お辞儀とベンダーのモジュールのみをインポートできます。

https://github.com/emberjs/guides/issues/2017https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/

依存関係の管理に関するEmber CLIドキュメント からEmber.jsに直接サードパーティのnpmモジュールをインポートする2つのソリューションを入手しましたが、それは古く、npmモジュールはできないと言っていますインポートされた、バウワーとベンダーのみ：

standard Anonymous AMD Assetとしてのnpmモジュール

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ファイルにインポートされるときに使用されるモジュール名です。

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 */_は、moment()がファイルで定義されていないため、プロジェクトをビルドするときにエラーを表示しないESLintの注釈です。

標準のAMDアセットとしてのnpmモジュール

https://ember-cli.com/managing-dependencies#standard-named-AMD-asset

Ember CLIには、3番目のオプション私にとっては機能しませんでしたも表示されます。これは、特定のパッケージをインポートしたためかもしれません。

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( /* ... */ );
_

aMD JavaScriptモジュールとしてのnpmモジュール

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( /* ... */ );
_
1
AMS777

これは古いスレッドですが、私がこれをやっている間に私が貢献すると思っていました。 emberにリンクしようとしていた特定のパッケージは 'd3plus'で、それを機能させるためにさまざまなことをしなければなりませんでした。

  1. npm install ember-browserify --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を探している人に役立つと考えていました。

0
algreen11