scalableminds / amd-optimize Goto Github PK
View Code? Open in Web Editor NEWAn AMD (RequireJS) optimizer that's stream-friendly. Made for gulp.
License: MIT License
An AMD (RequireJS) optimizer that's stream-friendly. Made for gulp.
License: MIT License
When I have this on the root file:
define(function(require) {
require('path/to/dep');
});
Then dependency chaining does not work. If I rewrite it in array syntax it does kick in... Bug?
You can simplify the documentation by adding the following:
var addSrc = require('gulp-add-src');
//...
.pipe(amdOptimize('app', {...}))
.pipe(addSrc.prepend(require.resolve('almond')))
.pipe(addSrc.append('_start.js'))
where _start.js
content is one-liner:
require('app'); // should match amdOptimize's first parameter
In such case, task continues to run as if there was no config file given. We've been debugging this for over an hour to see a mistype in our configFile value.
Using Bower & RequireJS, I have the following directory structure:
vendor/
flight/
component.js
....
scripts/
common.js (RequireJS config)
app/
core/
component_ui/
nav_drawer.js
In scripts/app/core/component_ui/nav_drawer.js
, I have define(['flight/component'...
.
Just using RequireJS, this works because in my RequireJS config I have:
baseUrl: '/scripts/',
paths: {
'flight': '../vendor/flight',
....
}
When I use amd-optimize
like so:
amdOptimize.src('app/core/boot/main', {
baseUrl: 'scripts',
configFile: 'scripts/common.js'
})
I get the error:
Error: No file for module 'app/core/vendor/flight/component' found.
Not exactly sure what the correct way to handle cyclic dependencies.
Maybe, just detect them and throw an error. Or work with them when exports
is used.
http://requirejs.org/docs/api.html#circular
Currently code like
define(function(require, exports, module) {
require('angular-ui-router');
module.exports = require('angular').module('ui.router');
});
will be transformed into
define('contrib/angular-ui-router', [
'angular-ui-router',
'angular'
], function (require, exports, module) {
require('angular-ui-router');
module.exports = require('angular').module('ui.router');
});
Which obviously will cause errors.
I might be wrong, but it is supposed to be something like:
define('contrib/angular-ui-router', [
'require', 'exports', 'module',
'angular-ui-router',
'angular'
], function (require, exports, module) {
require('angular-ui-router');
module.exports = require('angular').module('ui.router');
});
Getting a define is not defined error.
Gulp:
return gulp.src('src/assets/js/*/')
// Traces all modules and outputs them in the correct order.
.pipe(amdOptimize("app", {
paths : {
"jquery" : "./bower_components/jquery/dist/jquery"
}
}))
.pipe(concat("app.min.js"))
.pipe(gulp.dest('build/assets/js/build'));
app.js
require([
'globals'
],function(){});
globals.js
define(['jquery'], function($) {
'use strict';
console.log('hello');
});
On Windows slashes get turned into backslashes. Module names in AMD require forward slashes though.
I am using the module to work out which files are needed and to copy them into another build directory. The problem whilst debugging is that the output file does not exactly match the source file, because the escodegen generate method strips out new lines, and a bunch of other things.
For development it would make sense to have an option like preserveFiles
that will not modify the file, so that the output contents ends up being the same as the source file.
I believe I see the fix but want to run it by you, perhaps there is another option that can be passed to the escodegen generate that I've not seen.
I'll send a pull request soon.
thanks
Add module name (which you put into define('module/path/or/name', ...)
) into file data:
cwd: ... base: ... path: ... contents: ... data: { amdName: 'module/path/or/name' amdDependencies: [...] //also useful }
Hi. When actually does this error happen ? I am sure I am missing something, But any suggestion on this will be highly appreciated.
/Users/nododo/https/files/public/UI/node_modules/amd-optimize/lib/trace.js:49
isText = moduleName.indexOf('text!') !== -1;
^
TypeError: Cannot read property 'indexOf' of undefined
Thanks
Great tool, but it would be very helpful if I could generate sourcemaps when using this tool. Do you plan to add support for sourcemaps?
I haven't been able to figure out how to use bower in a requirejs project using gulp as the builder. I have the following structure:
Here's my gulpfile.js
:
var gulp = require('gulp'),
concat = require('gulp-concat'),
amdOptimize = require('amd-optimize'),
bowerRequireJS = require('bower-requirejs');
gulp.task('default', function () {
gulp.src(['src/main.js', 'bower_components/**/*.js'])
.pipe(amdOptimize('main', {baseURL: 'src', configFile: 'src/require.config.js'}))
.pipe(concat('main.js'))
.pipe(gulp.dest('public'));
});
gulp.task('bower', function () {
var options = {
baseUrl: 'src',
config: 'src/require.config.js',
transitive: true,
};
bowerRequireJS(options, function (rjsConfigFromBower) {
console.log('whatever');
});
});
And here's my require.config.js
generated from the 'bower' task:
require.config({
shim: {
},
paths: {
coordinator: "../bower_components/coordinator/coordinator",
reqwest: "../bower_components/reqwest/reqwest"
},
packages: [
]
});
I've tried several different things and I've gotten the same error each time:
No file for module 'request' found
I feel that this is a pretty common problem and it would be fantastic to get an example that works. I have the same behavior working with Grunt
, but I'd like to switch to gulp
.
Is this something that should work with amd-optimize
, or am I barking up the wrong tree?
There is no problem if you use amdOptimize
to build project. But I use this for styles compiling and livereload with gulp-watch
and I watch a nasty delay.
I find style.less
/style.sass
/style.styl
near every .js file (this allows not to download excess styles which are not relevant to the current project)
gulpWatch('project/**/*.styl', function() {
return amdOptimize.src('/bootstrap', {configFile: configPath})
.pipe(compileProjectStyles())
.pipe(gulp.dest('build/project')));
amdOptimize scans scripts every time. Add, please, option cache: true
which allows to use old scripts from cache
If you have multiple bundles you don't want module duplication
e.g. text
We have a need to sometimes exclude dependencies from the optimised js file we produce, as they're already available in the page the file will go into.
I know the docs say that options.exclude isn't implemented, but I also noticed that there's a commit adding added deep and shallow exclusion.
Is it possible to have a dependency that isn't processed by amd-optimize, and so can be pulled in from the page the optimized js file is loaded into?
In 0.2.5, config like below worked:
paths: {
'module_name': './bower_components/path_to/my_module'
},
map: {
'module_name': { 'jquery': 'jquery-1.9' }
}
However as of 0.2.8 (not sure about inbetween), the map seems to want the relative path rather than the module name, giving something like.
paths: {
'module_name': './bower_components/path_to/my_module'
},
map: {
'./bower_components/path_to/my_module': { 'jquery': 'jquery-1.9' }
}
Is this intended?
wrap modules that are not native amd modules
I'm not sure what I'm doing wrong as the documentation doesn't actually show a good example of using a config file. When running the following
gulp.task('amdoptimize', function() {
amdOptimize.src("main.default", {
configFile : "./configs/amd.json",
baseUrl : "./js",
dir:"./js/build"
})
.pipe(concat("main.default.js"))
.pipe(gulp.dest("js/build"));
});
I get the following error. :'(
[16:58:23] Finished 'amdoptimize' after 11 ms
Error: No file for module 'jquery' found.
...
Here is my amd.json file.
({
"paths": {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
},
"map": {
"*": {
"facebook": "//connect.facebook.net/en_US/all.js",
"facebook-debug": "//connect.facebook.net/en_US/all/debug.js"
}
},
"config": {
"version": {
"libs/jquery/lazyload": "1.9.3",
"libs/jquery/mobile": "1.4.0a1",
"libs/jquery/numberformatter": "1.2.3",
"libs/jquery/placeholder": "0.2.4",
"libs/jquery/scrollbar": "0.2.4.custom",
"libs/jquery/tablesorter": "2.0.5",
"libs/jquery/wysibb": "1.5.1",
"libs/jquery/ui/jquery.ui.core": "1.9.2",
"libs/jquery/ui/jquery.ui.draggable": "1.9.2",
"libs/jquery/ui/jquery.ui.mouse": "1.9.2",
"libs/jquery/ui/jquery.ui.position": "1.9.2",
"libs/jquery/ui/jquery.ui.slider": "1.9.2",
"libs/jquery/ui/jquery.ui.touch-punch": "0.2.2"
}
}
})
Any idea what I'm doing wrong?
requirejs.config can be like this:
baseUrl:"js/lib",
paths: {
page: '../page'
}
use module js/page/frame.js :
require(['page/frame']);
but in the amd-optiomize options.paths like that it can't run
Error: No file for module 'page/frame' found.
so , them can't user same config ? or I use it error way?
define(['module1', 'module2', 'module3'], function() {
...
});
Now modules and our dependensies load in correct order (as if the files are loaded synchronously):
module1.dep1.js module1.dep2.js module1.dep3.js module1.js module2.dep1.js module2.dep2.js module2.dep3.js module2.js module3.dep1.js module3.dep2.js module3.dep3.js module3.js
This is useful in some cases.
You can guarantee the preservation of order in future versions? For example, to add syncLoading
flag
It would be nice to allow modules to be configued in the options so one task could just iterate over all modules instead of creating an individual task for each module.
"modules":[
{"name":"main.tests"},
{"name":"main.common"},
{"name":"main.video"},
]
It's clear on the readme that CommonJS module definitions are not supported, but this is actually a pretty important use case and is a barrier for adoption.
Is support for this on the roadmap?
In one of projects, we are required to use some third-party trackers, like google analytics.
With requirejs it is just possible to provide a config file aliasing them to some dependency in paths. That forces us to use full requirejs instead of almond because frequent changes in remote trackers could fail anything.
WIth amd-optimize, however, it fails when the remote script is in config.
I propose to replace aliases with full uri's from config and leave them to requirejs to handle.
I find it too verbose if there is deps: ["index"]
in configFile
.
amdOptimize.src("index", {
configFile : "src/scripts/require_config.js"
});
Better
amdOptimize.src({
configFile : "src/scripts/require_config.js"
});
I also do not understand why do set files in gulp.src
. In the gulp.src
must specify only config file.
Much better
gulp.src("src/scripts/require_config.js")
.pipe(amdOptimize())
Maybe: 'none', 'root', 'all'
It'd be nice if it were possible for the tool to output files in the source directory structure.
For example I have
app
| Controllers
| + Controller1.js
| Directives
| + CustomDirective.js
| app.js
whenever I run them through the tool I get
Controller1.js
CustomDirective.js
app.js
I have a fairly large project and when navigating through the files outputted by the source map it'd be nice if that directory structure was preserved. I'm new to gulp so I'm afraid I don't know if this is possible or not.
I have a module like below:
define(['jquery',
'knockout',
'text!template1.html',
'text!template2.html',
'text!template3.html',
'text!template4.html',
'text!template5.html',
'text!template6.html'],function($, ko){
var t1 = require('text!template1.html')
})
after amd-optimize:
define(['jquery',
'knockout',
'template1.html',
'template2.html',
'template3.html',
'template4.html',
'template5.html',
'template6.html'],function($, ko){
var t1 = require('text!template1.html') // error throwing
})
please add sugar syntax support for text plugin. Thanks!
I have files:
app/file1.js define([ 'dep1', 'dep2'], function() {...}
How I can get
app/file1.js define('app/file1', [ 'dep1', 'dep2'], function() {...}
after amd-optimize processing?
I can't get amd-optimize to work properly, it loads my optimized file but won't run it. I've made a test project, see here.
r.js
setupConfig file:
({
mainConfigFile: 'src/js/config.js',
baseUrl: 'src/js',
name: 'config',
out: 'dist/js/global.js',
removeCombined: true,
findNestedDependencies: true,
optimize: 'none'
})
It yields me the following diat/js/global-r.js
:
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(){});
If I load in the index.html
:
<script data-main="../dist/js/global" src="lib/require.js"></script>
It works, the only module, pinkifyer
, makes sets the body bg to pink ๐ผ
amd-optimize
setupHere's my Gulp taks:
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'))
});
And it yields dist/js/global.js
:
define('modules/pinkifyer', [], function () {
document.body.style.backgroundColor = 'pink';
});
define('modules/app', [
'require',
'exports',
'module',
'modules/pinkifyer'
], function (require) {
require('./pinkifyer');
});
Contents of the config.js
are missing from the optimized build results, and hence it wont work. Maybe I'm just doing something profoundly wrong here, quite new to RequireJS.
Thanks for your interest in this project. However, I am no longer actively maintaining this project. Mostly because we are now using Webpack for our builds.
I am happy to review incoming pull requests, but I won't implement new features.
If there is somebody who would like to become maintainer for this project, please contact me. Thanks!
The interaction with gulp-sourcemaps seems to fail silently. No source maps are generated. I'm using amd-optimize 0.2.5 and gulp-sourcemaps 1.2.4.
Hi, Thanks for the cool plugin first.
I met a problem when I use amd-optimize.
My code is as follows:
define(function (require) {
var userInfoTemplate = require('text!./templates/userinfo.tpl');
}
After building code is as follows:
define('admin/dashboard/templates/userinfo.tpl', [], function () {
return 'Hello <%=name %>';
});
define('admin/dashboard/index', [
'require',
'exports',
'module',
'admin/dashboard/templates/userinfo.tpl'
], function (require) {
var userInfoTpl = require('text!./templates/userinfo.tpl');
}
But the code after building can not be executed correctly.
require.js:166 Uncaught Error: Module name "text!admin/dashboard/templates/userinfo.tpl_unnormalized2" has not been loaded yet for context: _
If this line:
var userInfoTpl = require('text!./templates/userinfo.tpl');
can be converted to:
var userInfoTpl = require('admin/dashboard/templates/userinfo.tpl');
Then code will be executed correctly!
This is a bug? Or did I do something wrong?
Hi,
Great plugin! Please keep it going.
In case anybody is trying to get gulp.watch working with this plugin, I suggest that you resort to the following snippet:
process.on('uncaughtException', function (err) {
console.log(err);
});
There are many solutions which use gulp-plumber, gulp-watch, on('error') but I was not able to get any of these working. Please be aware that the following snippet will catch ANY exception, which may hide other problems.
You add define
to the end of simed file. F.e.
vendor.js
(function (global, factory) {
...
return jQuery;
}));
//Add by amd-optimize
define('jQuery', [], function () {
return;
});
I use compiled file with require.config (not the one that was used angular-amd)
require.config({
baseUrl: '/app/',
paths: {
jquery: 'vendor',
angular: 'vendor'
}
shim: {
angular: ['jquery']
}
}
It causes an error Uncaught TypeError: undefined is not a function
. But it work if I move define section to top of vendor.js.
Move define sections to top of shimmed files.
Currently, if i hook this up with a watcher (say gulp.watch), the whole build process repeats for all the files. Is it possible to cache the read files and not process the files which are not changed (default behavior is webpack).
Something similar to what is suggested here - https://github.com/gulpjs/gulp/blob/master/docs/recipes/incremental-builds-with-concatenate.md
I am trying to use amd-optimize and find that it struggles with
https://github.com/imsky/holder
when findNestedDependencies is turned on. Even when this option is turned off I cannot get this AMD module to load using amd-optimize.
RequireJs defined for CND Resources an "empty:" placeholder.
These plugin replaces the strings and the output file is not valid.
Hi,
It appears that it is not currently possible to preserve comments whilst using amd-optimize.
Just looking briefly at the code, it appears as though they're not being captured and processed into the AST, or when processing the AST (via escodegen).
Is there an easy fix to this problem?
Append/prepend other files or modules to bundle
I have a project that is currently using Grunt and require.js and I am trying to move it over to gulp and amd-optimize.
The problem is that amd-optimize is breaking with a ' Circular dependency detected.' error.
Is there any reason why amd-optimize might return such an error when require.js doesn't when processing the same codebase.
Is it planned/feasible to add support for require.js-style bundles as described in http://requirejs.org/docs/api.html#config-bundles ?
I'm migrating a project that was using the require optimizer to amd-optimize. I've been struggling with a build that wasn't getting sourcemaps output and have tracked the problem down to files which get resolved via paths
configuration.
My config looks something like this:
var amdConfig = {
"baseUrl": "./target/js",
"preserveFiles": true,
"paths": {
"class": "/lib/class-amd",
"passwordstrength": "/lib/passwordstrength-amd",
"jquery": "empty:",
}
};
And my task looks more or less like this:
return gulp.src('target/js/**/*.js', { base: amdConfig.baseUrl })
.pipe(sourcemaps.init())
.pipe(amdOptimize("project-name/bootstrap", amdConfig))
.pipe(concat('bootstrap.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./target/js/built'));
I found the problem by removing the concat line and noting that all files appeared to have sourcemaps. This lead me to thinking that perhaps a few files didn't so I inserted a debug log into gulp-sourcemaps to let me know if this was the case. It turns out that both class and password strength don't have sourcemaps associated. This leads to no files having sourcemaps after concat.
If I write a fix I'll PR it here. Just raising the bug here now in case you're more prepared to fix since you are more familiar with the code.
Thanks for the great project :).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.