grunt requirejs 打包问题


grunt 运行错误
Running "requirejs:js" (requirejs) task
Error: Cannot find module 'less'
In module tree:


 main
    app
        require - less / less

{
    [Error: Error: Cannot find module 'less'
        In module tree:
        main
        app
        require - less / less

        at Function.Module._resolveFilename(module.js: 336: 15)
    ]
    originalError: {
        [Error: Cannot find module 'less']
        code: 'MODULE_NOT_FOUND',
            moduleTree: ['require-less/less', 'app', 'main'],
            fileName: '../bower_components/require-less/less.js'
    }
}

grunt 配置


 grunt.initConfig({
    requirejs: {
        js: {
            options: {
                mainConfigFile: '../src/main.js',
                name: 'main',
                out: '../build/viz.min.js'
            }
        }
    }
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['requirejs']);

main.js


 'use strict';
require.config({
    paths: {
        // app
        'app': 'app/index',
        'appModel': 'app/model',
        'appView': 'app/view.html',
        'appStyle': 'app/style',

        // commons
        'commons/postman': 'commons/postman',
    },
    packages: [{
        name: 'd3',
        location: '../bower_components/d3',
        main: 'd3'
    }, {
        name: 'jquery',
        location: '../bower_components/jquery/dist',
        main: 'jquery'
    }, {
        name: 'jquery-ui',
        location: '../bower_components/jquery-ui',
        main: 'jquery-ui'
    }, {
        name: 'lodash',
        location: '../bower_components/lodash',
        main: 'lodash'
    }, {
        name: 'nprogress',
        location: '../bower_components/nprogress',
        main: 'nprogress'
    }, {
        name: 'postal',
        location: '../bower_components/postal.js/lib',
        main: 'postal'
    }, {
        name: 'require-less',
        location: '../bower_components/require-less',
        main: 'less'
    }, {
        name: 'text',
        location: '../bower_components/text',
        main: 'text'
    }, {
        name: 'vue',
        location: '../bower_components/vue/dist',
        main: 'vue'
    }],
    urlArgs: "r=" + (new Date()).getTime()
});

require(['app']);

app.js


 define([
    'appModel', 'text!appView', 'require-less!appStyle',
    'commons/postman'
], function(
    _model, _view, _style,
    postman
) {
    console.log(123);
});

我是把每个组件(模块)的less都作为一个模块来加载的,然后通过require-less这个插件加载和编译,程序运行无误,只是上线时需要打包,打包时就遇到问题了!!!去掉'require-less!appStyle'就可以成功打包!!!感觉像是require-less这个package内部有问题!!!求各位大大帮助!!!

grunt JavaScript

坐看脑残乱喷 9 years, 3 months ago

Your Answer