Question

我严重缺少关于如何使用r.js优化器的一些重要元素。这对许多人来说可能是一个微不足道的答案，但我可以为我的生活找不到问题。我使用grunt任务设置我的环境来构建优化文件。构建优化文件并且依赖关系似乎正确解析，但我的主文件中的代码永远不会执行。

我已经创建了一个最小的环境来帮助你帮助我，只有Gruntfile，主文件和一些依赖项（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添加任何内容。

我怀疑答案类似于Why is my RequireJS ignoring the code in my optimized main.js?，（某些模块名称不匹配？）但我对此问题的理解不足以解决我自己的问题。

非常感谢帮助！

Answer 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并将其传递给匿名函数，该函数立即执行。看起来您的应用程序实际上并不依赖于作为模块可用的代码（该函数不返回任何内容），因此此更改应该足够了。

不执行Requirejs优化文件

1 个答案: