15

Gruntを使用するのはこれが初めてであり、すべてのjsモジュールを組み合わせてもらいたいと思います。各モジュールは、「use strict」宣言を含む、すぐに実行される関数にラップされ、1つのファイルにまとめられます。 'use strict'宣言が1つだけで、すぐに実行される関数が1つあります。

これは通常どのように行われますか？

これが一般的なユースケースになると思いましたか？おそらく私は物事を間違った方法で行っているのでしょうか？モジュールの読み込み形式（commonjs、amdなど）のいずれかを使用する必要がある場合、これらのファイルはすべてブラウザーに常に一緒に読み込まれるため、実際には、すぐに実行されるすべての関数を削除してもかまいません。重要な部分は、最終結果が何らかの形でラップされ、lintおよびユニットテストに合格し、「usestrict」宣言が含まれていることです。

（明確にする必要があります。動作、リンティング、単体テスト、連結、および縮小を行っています。最終的な連結ファイルに不要な即時実行関数がたくさんあるのを見ると、何か間違ったことをしているように感じます。）

4

4 に答える 4

23

私は通常、jQuery チームが行うように行います。intro.jsandを作成し、outro.jsその間に他のすべてを配置します。

intro.js

;(function( window, undefined ){
  'use strict';

outro.js

}( window ));

grunt.js :

concat: {
  dist: {
    src: [
      'js/src/intro.js',
      ...
      'js/src/outro.js'
    ],
    dest: 'js/out/app.js'
  }
}
于 2012-10-16T04:58:02.153 に答える
2

開発中のデバッグを容易にするためにモジュールを個別のファイルに保持できるようにしたい場合は、明らかにそれらをintro.jsand でラップする必要があるという@elclanrsの回答に追加したいoutro.jsだけです。組み込みconcatタスクを使用すると、次のように記述する必要があります。

concat: {
  events_debug: { // wrap the 'events' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/events.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/events.js'
  },
  callbacks_debug: { // wrap the 'callbacks' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/callbacks.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/callbacks.js'
  }

  // zzZZZ...
}

これは非常に退屈で、自己反復的です。おそらく、ファイルを一括ラッピングするためのカスタム タスクを作成したいかもしれません。

wrap: {
    html: {
        intro: 'partials/intro.js',
        outro: 'partials/outro.js',
        src: 'js/*.js',
        dest: 'out' // output directory
    }
}

最近これについて質問がありました。次のスレッドを参照してください。

grunt concat を使用して、同じファイルを他の多くのファイルに連結することをどのように自動化しますか?

于 2012-10-16T16:02:11.370 に答える
1

私の grunt プラグインgrunt-concat-depsを使用することをお勧めします。これは、アーキテクチャに依存せずにモジュールを自動的に解決するためです。

さらに、プラグインは YUIDoc スタイルの宣言型および分散型モジュール定義に依存しているため、明示的なモジュール構成は必要ありません。

詳細については、こちらを参照してください: https://github.com/leoselig/grunt-concat-deps

于 2013-10-28T19:10:16.737 に答える