Оптимизированный файл Requirejs не выполняется

Я серьезно упускаю какой-то жизненно важный элемент о том, как использовать оптимизатор r.js. Это, наверное, тривиальный ответ для многих, но я могу за всю жизнь не разобраться в проблеме. Я настроил свою среду, используя задачу grunt для создания оптимизированного файла. Оптимизированный файл создан, и зависимости, кажется, разрешаются правильно, но код в моем основном файле никогда не выполняется.

Я создал минимальную среду, чтобы помочь вам помочь мне, где есть только Gruntfile, mainfile и некоторые зависимости (jquery, almond).

Моя структура проекта:

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

Gruntfile:

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, даже если оптимизированный файл загружен.

Я подозреваю, что ответ похож на Почему мой RequireJS игнорирует код в моем оптимизированном main.js?(какое-то несоответствие имени модуля?), но я не достаточно хорошо это понял, чтобы решить мою собственную проблему.

Помощь очень ценится!

Источник

1 ответ

Решение

Оптимизированная версия просто определяет модуль main но это никогда не выполняется, потому что это никогда не требуется. Я не уверен, почему main выполнено в неоптимизированной версии.

main.js мог бы выглядеть так:

require.config({
  baseUrl: './',
  paths: {
    'jquery': 'bower_components/jquery/dist/jquery.min'
  }
});

// use require instead of define here
require([
  'jquery',
], function ($) {
  console.log('changing html');
  $('body').append('<div>Hello World</div>');
});

разница в том, что вместо определения модуля этот код требует jquery и передает его анонимной функции, которая выполняется сразу же. Не похоже, что ваше приложение действительно полагалось на то, что код доступен в виде модуля (функция ничего не возвращает), поэтому этого изменения должно быть достаточно.

Источник
Другие вопросы по тегам