使用RequireJS预编译视图(可编译)

时间:2015-02-20 17:35:39

标签: javascript node.js requirejs ejs canjs

我使用can-compile NodeJS模块将CanJS EJS视图编译成单个JavaScript文件,用于我项目中的快速生产应用程序。 (我使用canjs,requirejs,ejs.js作为模板):

我按照这些说明设置了我的grunt任务https://github.com/daffl/can-compile

我的Gruntfile.js:

module.exports = function (grunt) {

// Project configuration.
grunt.initConfig({
    cancompile: {
        options: {
            version: '1.1.8',
            wrapper: 'define(["can/view/ejs"], function(can) { {{{content}}} });'
        },
        dist: {
            src: ['**/*.ejs', '!node_modules/**/*.ejs', '!www-built/**/*.ejs'],
            dest: 'www-built/js/views.production.js'
        }
    },
    uglify: {
        //configuracion uglify
        options: {
            mangle: false,
            compress: {
                drop_console: true
            },
            preserveComments : false
        },
        js: {
            files: [{
                cwd: 'www-built/js/',  // ruta de nuestro javascript fuente
                expand: false,    // ingresar a las subcarpetas
                src: 'views.production.js',     // patrón relativo a cwd
                dest: 'www-built/js/'  // destino de los archivos compresos
            }]
        }
    }

});
/*carichiamo i moduli*/
grunt.loadNpmTasks('can-compile');
grunt.loadNpmTasks('grunt-contrib-uglify');

/*registriamo il task*/
grunt.registerTask('default', ['cancompile']);


};

grunt任务工作,它创建了编译的单个js文件,但是当我运行require构建时,它不包含生成的文件和生产中的视图。

我收到了这个错误:

can.view: No template or empty emplate:js/app/common/calendar/views/init.ejs

我创建了一个文件views.production.js到我的项目目录中,内容为:

define('views', function() {});

然后在我的build.js文件应用程序中我把它:

 "paths" : {
    "app" : "../app",
    "tools" : "../../../tools",
    "jquery" : "jquery-2.0.3.min",
    "jquery-ui" : "plugins/jquery-ui-1.10.4.custom.min",
    "jquery-ui-touch-punch" : "plugins/jquery.ui.touch-punch.min",
    "bootstrap" : "bootstrap.min",
    "underscore" : "underscore.min",
    "can" : "can",
    "aria" : "aria",
    "models" : "../app/common/models",
    //folder directory for documentation
    "doc" : "../doc",
    "async" : "require/async",
    "goog" : "require/goog",
    "propertyParser" : "require/propertyParser",
    "google-api" : "aria/google_api/google-api-engine",
    "google-maps" : "aria/google_api/google-maps-engine",
    "collaboration" : "../app/collaboration",
    "swipe" : "plugins/swipe2",
    "animend-transend" : "plugins/jquery.animend.transend",
    "jquery-validate" : "plugins/jquery.validate.min",
    "jcrop" : "plugins/jcrop/js/jquery.Jcrop.min",
    "spin" : "plugins/spin",
    "ftscroller" : "plugins/ftscroller",
    "owl-carousel" : "plugins/owl.carousel.min",
    'shared_resource' : '../shared_resource',
    'views' : '../views.production'
}

然后在应用程序的commons.js文件中我提出了一个要求:

require([
    'jquery',
    'aria',
    'app/common/error_handler',
    'app/common/vocal',
    'views'
], function (jQuery, AriaTouch) {

我的应用程序尝试调用ejs文件:

GET http://local.bst.prod/js/app/timeline/sidebar/bookmark/views/submenuBookmark.ejs 404 (Not Found)
common.js:4 Uncaught can.view: No template or empty 
template:js/app/timeline/sidebar/bookmark/views/submenuBookmark.ejs

0 个答案:

没有答案