Comments (25)
@tybenz Are you going to be in San Diego today? We could meet up and figure this out.
from amdclean.
Heck yeah. I'll be getting in around 5. Maybe the speaker dinner?
from amdclean.
Can we bring laptops to the dinner lol.
from amdclean.
Haha. Not sure. Maybe before or after depending on how quickly I can get checked in.
from amdclean.
This ended up being a situation where the globalObject
option needed to be set to true
. Glad we got it sorted.
Update: The globalObject
option has been removed and this issue should no longer happen with the latest versions of AMDclean.
from amdclean.
I'm having the same issue, and I'm not sure how to resolve it. I tried putting "globalObject":true
in my config, and "globalModules": ["jquery"]
but neither one fixed the issue.
Any suggestions? I can send more specific files offline if that's helpful.
from amdclean.
This config.js ended up making it work: https://gist.github.com/tybenz/a64377cc3a03f50290e0
Let me know if that helps
from amdclean.
@probertson What version of AMDclean are you using?
In the latest version of AMDclean, the globalObject
option has been removed and the onBuildWrite
hook is no longer being used. Instead, the onModuleBundleComplete
Require.js hook is used and you shouldn't be running into the above issue at all.
from amdclean.
Unfortunately, part of my difficulty is that I'm working with a couple of layers of abstraction.
I'm trying to add AMDClean to an existing gulp build, so I'm using the gulp-amdclean package, which wraps AMDClean. I just installed it yesterday, and it's AMDClean v2.0.0 and gulp-amdclean v0.2.1.
Looking at the source for gulp-amdclean, I don't see it using onModuleBundleComplete (which isn't too surprising, since it's not hooking into r.js at all).
If I understand things completely, the output of r.js is passed into amdclean.clean() in node:
https://github.com/rstone770/gulp-amdclean/blob/master/src/gulp-amdclean.js#L29
The r.js output is the same as what I've been using -- I'm just trying to add amdclean to it so we can avoid the need for RequireJS in production.
I've created a simplified version of the code that still shows the problem:
https://gist.github.com/probertson/2fc1db46e6fcc5980194
The files are:
- amdclean-options.js -- the options object I'm passing to amdclean
- r.js-output.js -- the raw r.js output (presumably what's being fed into amdclean, in case you want to try it directly
- index_main.js -- the source JS file that r.js is compiling (it lives in the /js/ subfolder normally, but I couldn't put that into the gist)
- index.html -- a corresponding html page, for testing
from amdclean.
@probertson Could you try updating to the latest version of AMDclean (2.2.0
)? You are right about how the gulp-amdclean plugin works though (it expects to receive post Require.js optimizer output).
Note: You no longer need to set the wrap
option, since AMDclean uses what you provided as the default now.
from amdclean.
Also, I would recommend just using the Require.js node module. AMDclean itself is doing this (since it is building itself with AMDclean). https://github.com/gfranko/amdclean/blob/master/gulpfile.js#L43
from amdclean.
@gfranko I'm having a similar issue (jquery is undefined) that wasn't solved by adding the "globalObject": true
setting to my config (or by adding "jquery" to the globalModules array). I'm using version 2.1.1, though I see you've just released 2.2.0.
Happy to give more details about the setup or shoot you the files to look at.
from amdclean.
@danvoss2 Yea, could you update to 2.2.0
and let me know if you are still running into the same issue? If you are, I'd be happy to see your setup/files and figure it out.
Also, make sure you are using the onModuleBundleComplete
Require.js hook and NOT the onBuildWrite
hook. Like this:
onModuleBundleComplete: function (data) {
var fs = module.require('fs'),
amdclean = module.require('amdclean'),
outputFile = data.path,
cleanedCode = amdclean.clean({
'filePath': outputFile
});
fs.writeFileSync(outputFile, cleanedCode);
}
from amdclean.
No luck with 2.2.0
.
Here're the pertinent snippets from Gruntfile.js
(note that I have tried this with both 'globalObject': true
and 'globalModules': ['jquery']
, and different combinations thereof):
requirejs: {
compile: {
options: {
baseUrl: 'js/',
mainConfigFile: 'js/config.js',
name: 'main',
out: '../webapp/assets/js/main.js',
//generateSourceMaps: true,
preserveLicenseComments: false,
optimize: "none",
onModuleBundleComplete: function (data) {
var fs = require('fs'),
amdclean = require('amdclean'),
outputFile = data.path;
fs.writeFileSync(outputFile, amdclean.clean({
'filePath': outputFile
}));
}
}
}
}
And here's the config.js
:
require.config({
paths: {
'jquery': '../bower_components/jquery/jquery.min'
}
});
And main.js
:
require([
'mods/loginApp'
], function (loginApp) {
"use strict";
//Call loginApp module to initialize events and such
loginApp.initialize();
});
And loginApp.js
:
define(["jquery", "mods/placeholders", "mods/adloader", "mods/cookies"], function ($, placeholders, adloader, cookies) {
"use strict";
var initialize = function(){
var $landingPage = $("#landing-page");
cookies.areCookiesEnabled();
placeholders.setupPlaceholders();
};
return {
initialize: initialize
};
});
And here's placeholders.js
as a representative example of those dependencies (they declare jquery as their only dependency):
define(["jquery"], function ($) {
"use strict";
return {
//Do something sexy with placeholder text
};
});
Appreciate your help and let me know if you need anything else.
from amdclean.
@danvoss2 Would it be possible for you to send me your project's source code without AMDclean and then with AMDclean? Also, let me know if you want to just email me and take this discussion off Github: [email protected]
from amdclean.
I believe I have found the issues:
- Make sure to set the Require.js
skipModuleInsertion
option totrue
. By default, Require.js creates adefine()
wrapper for files that are not wrapped in adefine()
(e.g.main.js
andjquery
). This can cause issues with AMDclean. - Make sure you are not pointing to minified files when building with AMDclean (you were pointing at the minified version of jQuery).
I also updated the AMDclean README to point out these potential issues.
from amdclean.
@gfranko Yep, that fixed it for me. Thanks!
from amdclean.
Ok new jQuery problem. skipModuleInsertion
worked like a charm for me when I was including jQuery in my build.
But now I'm thinking I don't want to include jQuery as a part of my build. I'm working on this component library that I'm using in a few different places.
Some pages that need the library already have jQuery included, and if we decide to give this away as a 2rd-party component library we want people to be able to choose their own jQuery.
I tried building while excluding jQuery, but I'm winding up with the same problem. AMD Clean is trying to pass jquery
(notice lowercase "q") to the IIFEs that defines my modules, but jquery
is undefined.
from amdclean.
So here are my current thoughts on building libraries that contain third-party dependencies:
- Don't list any third-party dependencies as dependencies in your source files
- Hoist all third-party dependencies as local variables in your source files, at build time, so that the dependencies are available to all of your library's modules.
- Set the third-party dependency local variable values within your library source code
Check out how AMDclean does it for an example (AMDclean depends on Esprima, Estraverse, Escodegen, and Lodash)
Hoisting local variables at build time: https://github.com/gfranko/amdclean/blob/master/gulpfile.js#L65
Setting the conditional third-party values based on environment: https://github.com/gfranko/amdclean/blob/master/src/modules/index.js#L38
I know this is a bit hacky, but I can't think of a better way to do it at the moment. Let me know what you think.
from amdclean.
This makes sense. At the time I thought it would be helpful to have jQuery as a dependency in "dev mode" - working with requires without compiling. I was trying to have the best of both worlds.
But I think you're right. It's probably best just to leave jQuery out of it entirely and have the library assume it's already globally available. Makes thing much easier. Thanks!
from amdclean.
I've been buried with other things for a while, but I finally got a chance to circle back to this so I wanted to add my "conclusion."
I was using a minified jQuery in my build source. When I switch to using the developer version, it works just fine. So the solution (for me) was to make sure to use un-minified jQuery.
Thanks again for all your help.
from amdclean.
@probertson Thanks for letting us know your solution!
from amdclean.
I'm having a similar issue with jquery. I am using the unminifed version of jQuery 1.9.x and have skipModuleInsertion
set to true
require.config.js
require.config({
baseUrl: "./",
paths: {
"jquery": "../components/jquery/jquery",
"requirelib": "../components/requirejs/require"
},
waitSeconds: 15
});
Gruntfile.js (partial)
requirejs: {
compile: {
options: {
mainConfigFile: "./src/js/require.config.js",
name: "fep",
out: "dist/feperf.js",
optimize: "none",
skipModuleInsertion: true,
onModuleBundleComplete: function (data) {
var fs = require('fs'),
amdclean = require('amdclean'),
outputFile = data.path;
fs.writeFileSync(outputFile, amdclean.clean({
'filePath': outputFile,
'prefixMode': 'camelCase',
'globalModules': ['fep']
}));
}
}
}
}
For some reason, jquery never gets written to the jQuery object. The global jQuery object exists (window.jQuery, || window.$) but the alias "jquery" from my require.config.js never gets created/mapped/written properly.
from amdclean.
@b1lly Do you happen to have a git repo that I could look at?
from amdclean.
@gfranko Yeah, look at the requirejs
branch though. https://github.com/b1lly/feperf/
from amdclean.
Related Issues (20)
- Module config HOT 1
- source-map: sourcesContent lost HOT 1
- does amdclean support amd-feature loader plugin
- AMD checks transformations HOT 1
- Problems with "module" special dependency HOT 3
- require with named callback -- the callback is never called HOT 1
- bin/amdclean HOT 1
- AMD destroys multiline return statements HOT 3
- The variable conflict logic in v2.4.0 and onwards HOT 2
- var a = require('a') => var a = a;
- Bad output
- Deal with conditional loader HOT 1
- A comment in return statement leads to incorrect javascript
- function of the calling module goes before the called module: Cannot read property of undefined HOT 1
- Failed to require relative path
- UMD generated by rollup not recognized HOT 1
- define(modulename, dependencies...
- Bug: aggressiveOptimizations may shadow globals
- Comma-separated calls to define don't get translated HOT 1
- npmjs release update
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amdclean.