1

r.js オプティマイザの使用方法に関する重要な要素がいくつか欠けています。これはおそらく多くの人にとって些細な答えですが、私の人生では問題を理解することはできません. grunt タスクを使用して最適化されたファイルを構築する環境をセットアップしました。最適化されたファイルがビルドされ、依存関係が正しく解決されているように見えますが、メインファイルのコードが実行されません。

Gruntfile、mainfile、およびいくつかの依存関係 (jquery、almond) のみがほとんど存在する場合に役立つ最小限の環境を作成しました。

私のプロジェクト構造は次のとおりです。

require_this/
│
├──Gruntfile.coffee
│
└──src/
    │
    ├──index.html 
    │
    ├──bower_components/(jquery,almond,requirejs)
    │
    └──app/
        │
        └──main.js

グラントファイル:

module.exports = (grunt) ->
  'use strict'

  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'
    settings:
      distDirectory: 'dist'
      srcDirectory: 'src'
      tempDirectory: '.temp'
      allFile: 'main.js'
    clean:
      working: ['<%= settings.tempDirectory %>', '<%= settings.distDirectory %>']
      finished: ['<%= settings.tempDirectory %>']

    copy:
      app:
        files: [
          cwd: '<%= settings.srcDirectory %>'
          src: '**'
          dest: '<%= settings.tempDirectory %>'
          expand: true
        ]

    requirejs:
      scripts:
        options:
          baseUrl: '<%= settings.tempDirectory %>'
          mainConfigFile: '<%= settings.tempDirectory %>/app/main.js'
          optimize: 'none'
          logLevel: 0

          findNestedDependencies: true
          name: 'main'
          include: ['requireLib']

          paths:
            'main':       'app/main'
            'requireLib': 'bower_components/almond/almond'
          out: '<%= settings.distDirectory %>/<%= settings.allFile %>'

    processhtml:
      your_target:
        files:
          'dist/index.html': '.temp/index.html'

  grunt.loadNpmTasks 'grunt-processhtml'
  grunt.loadNpmTasks 'grunt-contrib-clean'
  grunt.loadNpmTasks 'grunt-contrib-copy'
  grunt.loadNpmTasks 'grunt-contrib-requirejs'

  grunt.registerTask 'build', [
    'clean:working'
    'copy:app'
    'requirejs'
    'processhtml'
  ]

index.html:

<!DOCTYPE html>
<head>
  <!-- build:js main.js --> 
  <!-- The line below will be changed to <script src="main.js"></script> after processhtml -->
  <script src="bower_components/requirejs/require.js" data-main="app/main.js"></script>
  <!-- /build -->
</head>
<body>
</body>

main.js

require.config({
  baseUrl: './',
  paths: {
    'jquery': 'bower_components/jquery/dist/jquery.min'
  }
});
define([
  'jquery',
], function ($) {
  console.log('changing html');
  $('body').append('<div>Hello World</div>');
});

ビルド タスクが完了すると、dist ディレクトリには index.html と main.js ファイルが含まれます。dist/main.js ファイルは次のようになります。

/*almond stuff*/
/*jquery stuff*/
require.config({
  baseUrl: './',
  paths: {
    'jquery': 'bower_components/jquery/dist/jquery.min'
  }
});
define('main',[
  'jquery',
], function ($) {
  console.log('changing html');
  $('body').append('<div>Hello World</div>');
});

非圧縮ファイルに対して静的ファイルサーバーを使用すると、期待どおりに機能します。ビルド ファイルを使用すると、最適化されたファイルが読み込まれても何もログに記録されず、html に何も追加されません。

答えは、最適化された main.js のコードを RequireJS が無視するのはなぜですか? に似ていると思います。、(モジュール名の不一致?)しかし、私はこれを十分に理解していなかったため、自分の問題を解決できませんでした。

助けていただければ幸いです。

4

1 に答える 1