RequireJS を使用して JavaScript ファイルを結合するために grunt.js を使用する作業プロジェクト構造ですか? 質問する

RequireJS を使用して JavaScript ファイルを結合するために grunt.js を使用する作業プロジェクト構造ですか? 質問する

いくつかのプロジェクトで使用していますJS が必要ブラウザで個々のJavaScriptモジュールを読み込むために、まだ最適化していません。開発と本番の両方で、アプリはJavaScriptファイルごとに個別のリクエストを行います。これを修正するには、うなり声

シンプルなプロジェクト構造を作ろうとしましたが、うまくいきませんでした。そのため、誰かが実用的な例を提供してくれるかどうか疑問に思っています。私の目標は次のとおりです。

  1. 開発モードでは、必要なモジュールごとに個別のリクエストを発行することで、すべてがブラウザ内で機能します。開発モードでは、面倒なタスクや連結は必要ありません。
  2. 準備ができたら、Gruntタスクを実行して、すべてのJavaScriptファイルを最適化(結合)します。r.jsそれをローカルでテストします。最適化されたアプリケーションが正しく実行されることを確認したら、それをデプロイできます。

この会話のためのサンプル構造は次のとおりです。

grunt-requirejs-example/
  grunt.js
  main.js (application entry point)
  index.html (references main.js)
  lib/ (stuff that main.js depends on)
    a.js
    b.js
    requirejs/
      require.js
      text.js
  build/ (optimized app goes here)
  node_modules/ (necessary grunt tasks live here)

具体的には、働くどこから始めればよいか、プロジェクト構造を教えてください。私の主な質問は次のとおりです。

  1. このプロジェクト構造に欠陥がある場合、どのようなことをお勧めしますか?
  2. grunt.js特に r.js オプティマイザーを動作させるには、ファイルに何を含める必要がありますか?
  3. これらすべてが作業に見合うものではなく、watchファイルを保存するたびに grunt タスクを使用して開発モードですべてを自動的にビルドする方法があるのであれば、ぜひ聞いてみたいと思います。変更を加えてからブラウザーで確認するまでのループを遅くするようなことは避けたいのです。

ベストアンサー1

私はgrunt-contrib-requirejsrequire.js に基づいてプロジェクトをビルドするタスク。次のコマンドを使用してプロジェクト ディレクトリ内にインストールします。

npm install grunt-contrib-requirejs --save-dev

ところで、--save-devpackage.json の開発依存関係にパッケージを追加します。プロジェクトで package.json を使用していない場合は無視してください。

次のようにして、grunt ファイルにタスクをロードします。

grunt.loadNpmTasks('grunt-contrib-requirejs');

そしてgrunt.initConfigに設定を追加します

requirejs: {
  production: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      out: "path/to/optimized.js"
    }
  }
}

これで、 require.js の内容を uglifyjs で最小化できる単一のファイルにまとめることができます。grunt requirejs

gruntファイルにこれを追加することで、さまざまなタスクのセットを何らかのメインタスクにまとめることができます。

grunt.registerTask('default', ['lint', 'requirejs']); 

これを使用すると、単に入力するだけgruntで、grunt は lint と requirejs という 2 つの「サブタスク」を含むデフォルトのタスクを自動的に実行します。

特別な制作タスクが必要な場合は、上記のように定義します。

grunt.registerTask('production', ['lint', 'requirejs', 'less', 'copy']);

そしてそれを実行する

grunt production

requirejs タスク内で「production」と「development」に異なる動作が必要な場合は、いわゆるターゲットを使用できます。上記の構成例では、すでに として定義されていますproduction。必要に応じて別のターゲットを追加できます (ちなみに、同じレベルにオプション オブジェクトを追加することで、すべてのターゲットのグローバル構成を定義できます)

requirejs: {
  // global config
  options: {
    baseUrl: "path/to/base",
    mainConfigFile: "path/to/config.js"
  },
  production: {
    // overwrites the default config above
    options: {
      out: "path/to/production.js"
    }
  },
  development: {
    // overwrites the default config above
    options: {
      out: "path/to/development.js",
      optimize: none // no minification
    }
  }
}

これで、 を使用して両方を同時に実行することもgrunt requirejs、 を使用して個別に実行することgrunt requirejs:productionも、次のようにして異なるタスクで定義することもできます。

grunt.registerTask('production', ['lint', 'requirejs:production']);
grunt.registerTask('development', ['lint', 'requirejs:development']);

さて、あなたの質問にお答えします:

  1. プロジェクトでは必ずサブフォルダを使用します。私の場合は、開発用に「src」フォルダを使用し、本番用に「htdocs」フォルダにビルドします。私が好むプロジェクト レイアウトは次のとおりです。

    project/
      src/
        js/
          libs/
            jquery.js
            ...
          appname/
            a.js
            b.js
            ...
          main.js // require.js starter
        index.html
        ...
      build/
        ... //some tmp folder for the build process
      htdocs/
        ... // production build
      node_modules/
        ...
      .gitignore
      grunt.js
      package.json
    
  2. 上記を参照

  3. そうすることは可能ですが、ウォッチ タスクに requirejs を追加することはお勧めしません。これはリソースを大量に消費するタスクであり、マシンの速度が著しく低下します。

最後になりましたが、r.js で遊ぶときは十分注意してください。特に、modules設定にディレクティブを追加して、r.js でプロジェクト全体を最適化したい場合は注意が必要です。r.js は、何も尋ねずに出力ディレクトリを削除します。誤ってシステム ルートに設定されている場合、r.js は HDD を消去します。注意してください。私は以前、grunt タスクを設定しているときに htdocs フォルダ全体を永久に消去しました... keepBuildDir:truer.js 設定で遊ぶときは、常にオプションを追加してください。

おすすめ記事