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