node.js - Ember.js - 如果需要通过 Grunt (Node.js)，则无法识别 Handlebars

Question

是否还有其他人在使用 Grunt作为 Ember 的构建工具Web 应用程序，并且正在经历与我相同的行为？此时，我正在使用 RC3 版本的框架。我可以毫不费力地使用我的构建工具并导入所有必要的库，对它们进行丑化和压缩，一切都非常顺利。

无论如何，至少从Ember RC5开始我无法使用 Grunt用于构建我的应用程序，因为 Ember 不再识别 Handlebars!。它总是提示 Ember Handlebars requires Handlebars version 1.0.0-rc.4. Include a SCRIPT tag in the HTML HEAD linking to the Handlebars file before you link to Ember.紧接着它说 Cannot read property 'COMPILER_REVISION' of undefined这让我假设 Ember 无法识别包含的 Handlebars图书馆。

我的 app.js 中没有任何更改(库/框架的顺序保持不变)除了对 js 文件的引用(使用 Ember RC5/6 而不是 RC3 和 Handlebars RC4 而不是 RC3)。但似乎有些东西破坏了 Ember.Handlebars 的初始化从那以后……

我这里有什么问题吗？有没有解决方案可以让我继续使用 Grunt作为构建工具？

---

编辑

这是我的 Gruntfile.js :

/*jshint camelcase: false */
/*global module:false */
module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    meta: {
      dev: {
        buildPath: '.'
      },
      prod: {
        buildPath: '.'
      }
    },

    /*
     Task for uglifyng the application javascript file in production environment
     */
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },
      prod: {
        files: [
          {
            src: '<%= meta.prod.buildPath %>/js/application.js',
            dest: '<%= meta.prod.buildPath %>/js/application.min.js'
          }
        ]

      }
    },

    /*
     Task for creating css files out of the scss files
     */
    compass: {
      prod: {
        options: {
          environment: 'production',
          noLineComments: true,
          outputStyle: 'expanded',
          cssDir: '<%= meta.prod.buildPath %>/css',
          fontsDir: '<%= meta.prod.buildPath %>/fonts',
          imagesDir: '<%= meta.prod.buildPath %>/images',
          javascriptsDir: '<%= meta.prod.buildPath %>/js'
        }
      },
      dev: {
        options: {
          environment: 'development',
          noLineComments: false,
          outputStyle: 'expanded',
          cssDir: '<%= meta.dev.buildPath %>/css',
          fontsDir: '<%= meta.dev.buildPath %>/fonts',
          imagesDir: '<%= meta.dev.buildPath %>/images',
          javascriptsDir: '<%= meta.dev.buildPath %>/js'
        }
      }
    },

    /*
     Task to minify all css files in production mode.
     All css files will end with '.min.css' instead of
     just '.css'.
     */
    cssmin: {
      minify: {
        expand: true,
        cwd: '<%= meta.prod.buildPath %>/css/',
        src: ['*.css', '!*.min.css'],
        dest: '<%= meta.prod.buildPath %>/css/',
        ext: '.min.css'
      }
    },

    /*
     Clean up the production build path
     */
    clean: {
      cssd: ['<%= meta.prod.buildPath %>/css/**/*']
    },


    /*
     A simple ordered concatenation strategy.
     This will start at app/app.js and begin
     adding dependencies in the correct order
     writing their string contents into 'application.js'

     Additionally it will wrap them in evals
     with @ sourceURL statements so errors, log
     statements and debugging will reference
     the source files by line number.

     This option is set to false for production.
     */
    neuter: {
      prod: {
        options: {
          includeSourceURL: false
        },
        files: [
          {
            src: 'app/app.js',
            dest: '<%= meta.prod.buildPath %>/js/application.js'
          }
        ]
      },
      dev: {
        options: {
          includeSourceURL: true
        },
        files: [
          {
            src: 'app/app.js',
            dest: '<%= meta.dev.buildPath %>/js/application.js'
          }
        ]
      }
    },

    /*
     Watch files for changes.

     Changes in dependencies/ember.js or application javascript
     will trigger the neuter task.

     Changes to any templates will trigger the ember_templates
     task (which writes a new compiled file into dependencies/)
     and then neuter all the files again.
     */
    watch: {
      application_code: {
        files: ['js/dependencies/ember.js', 'app/**/*.js'],
        tasks: ['neuter:dev']
      },
      compass: {
        files: [
          'styles/**/*.scss'
        ],
        tasks: ['compass:dev']
      }
    },

    /*
     Runs all .html files found in the test/ directory through PhantomJS.
     Prints the report in your terminal.
     */
    qunit: {
      all: ['test/**/*.html']
    },

    /*
     Reads the projects .jshintrc file and applies coding
     standards. Doesn't lint the dependencies or test
     support files.
     */
    jshint: {
      all: ['Gruntfile.js', 'app/**/*.js', 'test/**/*.js', '!js/dependencies/*.*', '!test/support/*.*'],
      options: {
        jshintrc: '.jshintrc'
      }
    },

    /*
     Generate the YUI Doc documentation.
     */
    yuidoc: {
      name: '<%= pkg.name %>',
      description: '<%= pkg.description %>',
      version: '<%= pkg.version %>',
      options: {
        paths: '<%= meta.dev.buildPath %>/app/',
        outdir: '<%= meta.dev.buildPath %>/yuidocs/'
      }
    },

    /*
     Find all the <whatever>_test.js files in the test folder.
     These will get loaded via script tags when the task is run.
     This gets run as part of the larger 'test' task registered
     below.
     */
    build_test_runner_file: {
      all: ['test/**/*_test.js']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-neuter');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-yuidoc');

  /*
   A task to build the test runner html file that get place in
   /test so it will be picked up by the qunit task. Will
   place a single <script> tag into the body for every file passed to
   its coniguration above in the grunt.initConfig above.
   */
  grunt.registerMultiTask('build_test_runner_file', 'Creates a test runner file.', function () {
    var tmpl = grunt.file.read('test/support/runner.html.tmpl');
    var renderingContext = {
      data: {
        files: this.filesSrc.map(function (fileSrc) {
          return fileSrc.replace('test/', '');
        })
      }
    };
    grunt.file.write('test/runner.html', grunt.template.process(tmpl, renderingContext));
  });

  /*
   A task to run the application's unit tests via the command line.
   It will
   - convert all the handlebars templates into compile functions
   - combine these files + application files in order
   - lint the result
   - build an html file with a script tag for each test file
   - headlessy load this page and print the test runner results
   */
  grunt.registerTask('test', ['neuter', 'jshint', 'build_test_runner_file', 'qunit']);

  /*
   Configures all tasks which will be executed with production setup
   */
  grunt.registerTask('prod_tasks', ['clean', 'compass:prod', 'cssmin', 'neuter:prod', 'uglify:prod']);

  /*
   Setup for the production build. Sets the production build path.
   */
  grunt.registerTask('prod', 'Production Build', function () {
    grunt.task.run('prod_tasks');
  });

  /*
   Configures all tasks which will be executed with development setup
   */
  grunt.registerTask('dev_tasks', ['compass:dev', 'neuter:dev', 'watch']);

  /*
   Setup for the development build. Sets the development build path.
   */
  grunt.registerTask('dev', 'Development Build', function () {
    grunt.task.run('dev_tasks');
  });

  // Default task
  grunt.registerTask('default', 'dev');

  /*
   Configures all tasks which will be executed with doc setup
   */
  grunt.registerTask('doc_tasks', ['yuidoc']);

  /*
   Setup for the YUI doc generation.
   */
  grunt.registerTask('doc', 'Generate YuiDoc Documentation for the App', function () {
    grunt.task.run('doc_tasks');
  });

};

---

编辑2

我拿了ember-1.0.0-rc.6.js和 handlebars-1.0.0-rc.4.js从 Ember.js 网站的初学者工具包中获取文件，并尝试在其上运行 Grunt 任务。这是 Chrome 告诉我的内容:

---

编辑 3

以防万一，如果有人关心，这里是 Ember.js Github 页面上提出的问题的链接:https://github.com/emberjs/ember.js/issues/2894

---

编辑 4

最后，问题被确定为 Handlebars在处理全局导出时不一致，就像@Tao 在他的回答中报告的那样。如果你想关注，这里是 GitHub 上问题的链接:https://github.com/wycats/handlebars.js/issues/539

Answer 1

看起来这个问题正在下一个版本的 Handlebars 中得到解决:https://github.com/wycats/handlebars.js/issues/539请继续关注。