Ember.js - 如果需要通过Grunt（Node.js）无法识别车把

时间：2013-06-24 08:06:40

标签： node.js ember.js handlebars.js gruntjs

是否有其他人使用Grunt作为Ember网络应用程序的构建工具，并且遇到与我相同的行为？在这个时候，我使用版本RC3中的框架，我可以毫不费力地使用我的构建工具并导入所有必需的库，uglify并压缩它们，一切都像魅力一样。

无论如何，至少从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 无法识别所包含的{{1}库。

除了对js文件的引用（使用Ember RC5 / 6而不是RC3和Handlebars RC4而不是使用Ember RC5 / 6）之外，我的Handlebars（库/框架的顺序未被触及）没有改变任何东西。 RC3）。但是从那时起......似乎某些事情打破了app.js的初始化......

我在这里弄错了吗？有没有解决方案，以便我可以继续使用Ember.Handlebars作为构建工具？

修改

这是我的Grunt：

Gruntfile.js

编辑2

我从Ember.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'); }); }; 和ember-1.0.0-rc.6.js个文件，并尝试在其上运行Grunt任务。以下是Chrome告诉我的内容： Ember RC6 Problems with Handlebars on Grunt Buildstep

编辑3

如果有人关心，请点击Ember.js Github 页面上提出问题的链接：https://github.com/emberjs/ember.js/issues/2894

编辑4

最后，在处理全球出口问题时，该问题被确定为handlebars-1.0.0-rc.4.js不一致，如@Tao在其回答中所述。如果您想关注，请点击GitHub上的问题链接：https://github.com/wycats/handlebars.js/issues/539

2 个答案:

答案 0 :(得分：2)

看起来这个问题正在下一版Handlebars中得到解决：https://github.com/wycats/handlebars.js/issues/539敬请期待。

答案 1 :(得分：1)

用于编译Handlebars模板的版本与脚本标记中包含的版本不匹配。

如果您使用的是grunt-contrib-handlebars，它会使用npm模块手柄来编译模板。把手模块/项目独立于Ember，并且有自己的修订，可能与Ember不兼容。

为了保持与Handlebars的兼容性，Ember需要特定版本的把手警告你。

这里棘手的部分是你需要确保grunt-contrib-handlebars被迫使用特定版本的把手。

  

解决方案1：使用shrinkwrap更改grunt-contrib-handlebars的把手依赖关系版本。

     

解决方案2：这就是我目前使用的。我已切换到Emblem。徽标grunt任务明确要求您的把手文件，因此您不必下拉到节点子依赖关系管理。并且您的构建在脚本标记中包含相同的文件，从而避免了将来修订的重复/不匹配。

编辑：Gruntfile编辑后

看着Gruntfile，我没有看到任何错误。看起来像标准构建过程js -> neuter -> (if prod) -> uglify等。

我认为你需要尝试刷新emberjs和handlebars js文件。尝试使用入门套件本身的文件，这些文件肯定可以一起使用。

通过查看Chrome / Inspector中的未经授权的来源，为您的index.html验证这一点。把手的横幅下方的修订号码类似于Handlebars.VERSION和Handlebars.COMPILER_REVISION。将这些与您在ember.js文件中看到的内容相匹配，位于@submodule ember-handlebars-compiler中Ember.assert下方的某个位置。

相关问题
最新问题