grunt requirejs 打包问题

发布于 2022-09-01 18:52:38 字数 2770 浏览 12 评论 0

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内部有问题!!!求各位大大帮助!!!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文