web-dev-qa-db-ja.com

bowerコンポーネントをsails.jsに接続するにはどうすればよいですか？

bowerを介してJavascriptの依存関係をインストールし、それらを sails.js アプリで使用できるようにしたいのですが、私は貼り付けファイルをbower_componentsフォルダからSailsアセットフォルダにコピーするだけでは、これを行う方法を理解できません。

理想的には、requirejsを使用して、main.jsファイルのbowerコンポーネントを指定したいと思います。丸い穴に四角いペグを打ち込もうとしている可能性があります。その場合はお知らせください。 Sailsでのcomponents/librariesの管理についての考えは大歓迎です。

javascriptdependency-managementbowersails.js
42
Cole Reed

Sails 0.10では 'assets/linker'ディレクトリが存在しなくなりましたが、bower->アセットリンカーワークフローをある程度自動化すると同時に、最終的に何がリンクされるかを細かく制御できるシンプルなソリューションのリードを見つけました。

ソリューションは grunt-bower をSails.jscompileAssetsタスクに追加することです

grunt.registerTask('compileAssets', [
    'clean:dev',
    'bower:dev',
    'jst:dev',
    'less:dev',
    'copy:dev',
    'coffee:dev'
]);

次に、次のようにgrunt-bowerタスクを構成します（tasks/config/bower.jsとして）：

module.exports = function(grunt) {
  grunt.config.set('bower', {
    dev: {
        dest: '.tmp/public',
        js_dest: '.tmp/public/js',
        css_dest: '.tmp/public/styles'
    }
  });

  grunt.loadNpmTasks('grunt-bower');

};

これにより、bower jsおよびcssファイルが適切な場所に自動的にコピーされ、Sailのアセットリンカーがプロジェクトのレイアウトテンプレートを見つけて自動的に追加します。他のjsまたはcssファイルは、bowerファイルの後に自動的に追加されます。

ただし、このセットアップには2つの大きな注意事項があるため、これはまだ特効薬ではありません。

1-bower-gruntを介して追加されるファイルは、bower.jsonのmain配列にリストされている必要があります。ファイルがロードされていないことが予想される場合は、そのパッケージbower.jsonファイルを編集する必要がありますOR grunt-bowerのpackageSpecificオプション。

2-アセットリンカーでのバウワーファイルの順序は現在アルファベット順です。これまでのところ、この順序を調整する唯一の手段は、残りのSailのcompileAssetsタスクの前に手動でファイルを並べ替える追加のグラントタスクをいじくり回すことです。しかし、これは、不平を言う人ができることがあると確信しています パッケージコピーの順序付けをサポートすることにより 。

42
user3429154

注：SailsJS 0.10の時点ではリンカーフォルダーがサポートされていないため、次の回答は現在のバージョンのSailsJSに完全に関連しなくなりました。

参照： 帆がリンカーを生成しない

元の答え：

これに対する解決策を見つけることができました。これは実際には非常に簡単です。 bowerがファイルを配置する場所を設定できることに気づきませんでした。

.bowerrcファイルを作成し、bowerコンポーネントがインストールされているディレクトリを変更します。Sailjsの場合は、それらをアセットフォルダーに配置する必要があります。

/*
 * Create a file called .bowerrc and put the following in it.
 * This file should be in the root directory of the sails app.
 */

 {
   "directory": "assets/linker/bower_components"
 }

次に、ファイルが変更されるたびに、Sailsはgruntを使用して.tmp/public/assetsフォルダーにコピーします。セイルを継続的に削除してから再コピーしたくない場合は、それらをgruntファイルで除外できます。

/* 
 * This is not necessary, but if you have a lot of components and don't want
 * them constantly being deleted and copied at every file change you can update
 * your Gruntfile.js with the below.
 */

 clean: {
   dev: ['.tmp/public/**',
         '!.tmp/public',
         '!.tmp/public/bower_components/**'],
   build: ['www']
 },

帆でrequirejsを使用する際の1つのヒント。デフォルトでは、sailsはrequirejsを使用せずにロードするため、socket.ioファイルからエラーが発生します。 socket.ioがAMDスタイルのロードをサポートしているため、これはエラーをスローします。詳細はこちら http://requirejs.org/docs/errors.html#mismatch です。

これを修正する最も簡単な方法は、socket.io.jsの終わり近くの行をコメント化することです。

/*
 * Comment the below out in the file assets/js/socket.io.js, if using requirejs
 * and you don't want to modify the default sails setup or socket.io.
 */

 if (typeof define === "function" && define.AMD) {
   define([], function () { return io; });
 }

もう1つの方法は、「socket.io.js」、「sails.io.js」、およびapp.jsという名前のassets/jsにある帆ファイルをAMDモジュールに再コード化することです。

33
Cole Reed

これを達成するために私が見つけた最も簡単な方法は、個々のBowerコンポーネントをtasks/pipeline.jsファイルに追加することです。たとえば、Modernizrを追加する方法は次のとおりです。

// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [

  // Load sails.io before everything else
  'js/dependencies/sails.io.js',

  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // =========================================================
  // Modernizr:
  'bower_components/modernizr/modernizr.js',
  // =========================================================

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js'
];

次に、bower_components/modernizr/modernizr.jsへのリンクがレイアウトテンプレートの<!--SCRIPTS-->プレースホルダーに挿入され、sails lift --prodを実行すると縮小されます。

11
Nick F

遅くなってすみません。

リンケージにbower_componentsを含めるのは悪い考えだと思います。帆を持ち上げると、その中のすべてが.tmpにコピーされ、タグに含まれるからです。たとえば、インクルードAngular with bowerを使用している場合、angular.js用とangular.min.js用の2つのインクルードがスクリプトに含まれます。両方を使用するのは誤りです。

これが私のプロジェクトに対する私の解決策です：

  • ルートディレクトリにフォルダbower_componentを作成しました。

  • この行をGruntfile.jsのcopy：devの配列ファイルに追加しました

    {'.tmp/public/linker/js/angular.js'： './bower_components/angular/angular.js'}

含めるファイルごとに、この配列に手動で新しい行を追加する必要があります。別の自動解決策が見つかりません。誰かがより良い解決策を見つけたら...;）

3
user1853777

SailsJSとBowerを接続する方法は複数あります。

カスタムジェネレーターを介してBowerを統合するSailsJSのパッケージは、次の場所にあります。 https://www.npmjs.com/package/sails-generate-bower

Gulp用のものもあります。

1
István Döbrentei