优化的RequireJS模块文件加载,但什么都不做

时间:2015-03-11 20:39:50

标签: requirejs gulp amd

我正在学习将amd-optimize与Gulp一起使用,我遇到了优化的AMD文件加载但未执行的问题。我可以在开发工具网络选项卡中看到它,但它什么都不做,也没有错误。

enter image description here

我使用名为pinkyfyer的单个模块创建了一个测试用例,它将body bg更改为pink。如果我正常加载它,它可以工作,但在优化后它什么都不做。

我的目录结构:

dist
└── js
    └── global.js          // The optimized file
src
├── css
│   └── style.css
├── index.html             // Main index file
└── js
    ├── config.js          // RequireJS netry point
    └── modules
        └── pinkifyer.js   // Test module

index.html中的Init RequireJS:

<script data-main="js/config" src="lib/require.js"></script>

切入点config.js

require.config({
    urlArgs: 'bust=' + (new Date()).getTime(),
    baseUrl: 'js',
    // If I load the app straight without optimisation,
    // the pinkyfyer works
    // deps: ['modules/app'],
    // But the optimised file does nada
    deps: ['../dist/js/global.js']
});

简单的app.js

define(function(require) {
    require('./pinkifyer');
});

脚本Gulp任务amd-optimize

var gulp = require('gulp'),
    amdOptimize = require('amd-optimize'),
    concat = require('gulp-concat');

gulp.task('scripts', function() {
    gulp.src(['src/js/**/*.js'], { base: 'src/js' })
        // Traces all modules and outputs them in the correct order
        .pipe(amdOptimize('modules/app', {
            baseURL: 'src/js',
            configFile: 'src/js/config.js',
            findNestedDependencies: true
        }))
        .pipe(concat('global.js'))
        .pipe(gulp.dest('dist/js'))
});

最后这里是amd-optimize输出的global.js

define('modules/pinkifyer', [], function () {
    document.body.style.backgroundColor = 'pink';
});
define('modules/app', [
    'require',
    'exports',
    'module',
    'modules/pinkifyer'
], function (require) {
    require('./pinkifyer');
});

我尝试更改global.js中的模块名称,但没有帮助。

我在这里缺少一些非常基本的东西。谢谢你!

修改

我尝试了r.js,如果我将其直接加载到index.html文件<script data-main="dist/js/global" src="lib/require.js"></script>中,则会产生以下结果:

define('modules/pinkifyer',[],function() {
    document.body.style.backgroundColor = 'pink';
});

define('modules/app',['require','./pinkifyer'],function(require) {

    require('./pinkifyer');

});

require.config({
    urlArgs: 'bust=' + (new Date()).getTime(),
    baseUrl: 'js',
    deps: ['modules/app']
    // deps: ['../dist/js/global.js']
});

define("config", function(){});

这是我在amd-optimize插件中没有得到的东西。

0 个答案:

没有答案