I am trying to remove require and define calls using amdclean so that I can call my js file, without calling requirejs. Also, I would be able to run closure compiler on the js project.
My js file compiles fine with the requirejs grunt configuration:
requirejs:
build:
options:
mainConfigFile : "client/main.js"
baseUrl : "client"
name: "main"
out: "build/main.js"
removeCombined: true
findNestedDependencies: true
However, when I add the amdclean to it, it does not actually take out the require and define calls from the code. Here's the config:
requirejs:
build:
options:
mainConfigFile : "client/main.js"
baseUrl : "client"
name: "main"
out: "build/main.js"
removeCombined: true
findNestedDependencies: true
onModuleBundleComplete: (data) ->
fs = module.require('fs')
amdclean = module.require('amdclean')
#console.log('data.path = ' + data.path)
inputFile = data.path
outputFile = './build/clean.js'
cleanedCode = amdclean.clean(
'filePath': inputFile
)
fs.writeFileSync(outputFile, cleanedCode)
Here's the amdclean url:
http://gregfranko.com/amdclean/
I can still use the amdclean output if I use it with requirejs, but not as an independant script. Please help me fix this.
You cannot use AMDclean without some sort of dependency ordering logic (which the Require.js optimizer provides). You don't necessarily have to use the Require.js optimizer, but you need to replace it with some library that provides similar functionality.
Related
I have created a multiple pages web applications, including:
- a single requirejs configuration file, requestjsConfig.js
- some libraries, like jquery.js, etc...
- pages js, like homePage.js
- the form event binding js, like pageHeader.js
- common logical handling, like shoppingCart.js
I tried to use r.js to uglify my scripts, and merged into 1 js files. In general, it works, but with a small issues. After compiled, the browser still loads the form binding js files, event they are still merged into the page JS file.
requireJSConfig.js
requirejs.config({
baseUrl: 'frontjs/lib',
paths: {
eventHandler: '../page/eventHandler',
feature: '../feature'
}
});
homePage.js
requirejs(['../page/requestjsConfig'], function (requestjsConfig) {
//requirejs(['feature/page-header', 'feature/common', 'feature/index', 'feature/transport', 'feature/utils']);
requirejs(['eventHandler/pageHeader']);
});
pageHeader.js
define(function (require) {
var $ = require('jquery');
require('jquery-cookie');
require('jquery-storageapi');
var commonString = require('feature/commonString');
var shoppingCart = require('feature/shoppingCart');
...
}
the build.js for r.js to optimize
appDir: '../ecomm',
mainConfigFile: '../ecomm/frontjs/page/requestjsConfig.js',
dir: '../ecomm-built',
modules: [
//First set up the common build layer.
{
//module names are relative to baseUrl
name: '../page/requestjsConfig',
//List common dependencies here. Only need to list
//top level dependencies, "include" will find
//nested dependencies.
include: ['jquery',
'jquery.md5'
]
},
{
//module names are relative to baseUrl/paths config
name: '../page/homePage',
include: ['../page/eventHandler/pageHeader'],
exclude: ['../page/requestjsConfig']
},
{
//module names are relative to baseUrl/paths config
name: '../page/subCategory',
include: ['../page/eventHandler/pageHeader'],
exclude: ['../page/requestjsConfig']
}
]
}
After run node tools/r.js -o tools/build.js,
and when access home page, the pageHeader.js is still required.
I made it work, thanks everyone, the root cause is path.
In homePage.js, the module is defined as
requirejs(['eventHandler/pageHeader']);
In build.js,the module is defined as
include: ['../page/eventHandler/pageHeader'],
Project Structure
root
wwwroot <-- files under this location are static files public to the site
css
lib
bootstrap/js/bootstrap.js
jquery/js/jquery.js
knockout/knockout.js
requires/require.js
scripts
modules ┌───────────────┐
global.js <--│ Built modules │
dropdown.js └───────────────┘
modules
global.js ┌────────────────┐
dropdown <--│ Source modules │
dropdown.js └────────────────┘
gruntfile.js
global.cs Contents (pre-built version at ~/modules/global.js)
require.config({
baseUrl: "scripts/modules",
paths: {
jquery: "../../lib/jquery/js/jquery",
bootstrap: "../../lib/bootstrap/js/bootstrap",
knockout: "../../lib/knockout/knockout"
},
shims: {
bootstrap: {
deps: ['jquery']
}
},
});
define(function (require) {
var $ = require('jquery');
var ko = require('knockout');
var bootstrap = require('bootstrap');
});
dropdown.js Contents (pre-built version at ~/modules/dropdown.js)
define(function () {
console.log('dropdown initialized');
return 'foo';
});
HTML Page
Contains this script tag in the <head> of the page for loading requires config:
<script src="~/lib/requirejs/require.js" data-main="scripts/modules/global"></script>
In the body of the HTML page, I have the following:
<script>
require(['global'], function () {
require(['dropdown'], function (dropdown) {
console.log(dropdown);
});
});
</script>
Issue
The dropdown callback is undefined instead of the expected "foo" string that I'm returning from the defined module.
In fact, the console does not contain a log item for "dropdown initialized" either. This makes me believe the module is not being invoked somehow? However, it's strange the dropdown.js is present in F12 debugger as a script loaded into the page. Therefore, requires did make a call to load it, but did not run the contents of the define?
Noteworthy mentions
I'm using r.js to optimize and build. Both global.js and dropdown.js are processed over.
The name assigned to the dropdown module by r.js processing is "modules/dropdown/dropdown.js". I'm unsure if I should be using this somehow, or if I'm referring to the module correctly as just dropdown and relying on my baseUrl config having the correct path.
Edit #1
I have added the r.js build configuration used with grunt per commenter request. In conjunction, I updated the file structure to include the overall project structure, instead of just the runtime public wwwroot structure.
The r.js process will compile built forms of global.js + other modules in ~/wwwroot/scripts/modules from the source location ~/modules in summary.
function getRequireJsConfiguration() {
var baseUrl = './';
var paths = {
jquery: "wwwroot/lib/jquery/js/jquery",
bootstrap: "wwwroot/lib/bootstrap/js/bootstrap",
knockout: "wwwroot/lib/knockout/knockout"
};
var shims = {
bootstrap: {
deps: ['jquery']
}
};
var optimize = 'none';
var configuration = {};
var jsFilePaths = grunt.file.expand('modules/**/*.js');
jsFilePaths.forEach(function (jsFilePath) {
var fileName = jsFilePath.split('/').pop();
if (configuration[fileName]) {
throw 'Duplicate module name conflict: ' + fileName;
}
configuration[fileName] = {
options: {
baseUrl: './',
name: jsFilePath,
out: 'wwwroot/scripts/modules/' + fileName,
paths: paths,
shims: shims,
optimize: optimize,
exclude: ['jquery', 'knockout', 'bootstrap']
}
};
});
configuration['global'] = {
options: {
baseUrl: './',
name: 'modules/global.js',
out: 'wwwroot/scripts/modules/global.js',
paths: paths,
shims: shims,
optimize: optimize,
}
};
return configuration;
}
Edit #2
Thought it'd be a good idea to include the versions of requirejs packages I'm using:
requirejs: 2.1.15
grunt-contrib-requirejs: 0.4.4
Thanks.
The name assigned to the dropdown module by r.js processing is "modules/dropdown/dropdown.js". I'm unsure if I should be using this somehow, or if I'm referring to the module correctly as just dropdown and relying on my baseUrl config having the correct path.
In a sense, yes, you should be using that full path. That's what Require refers to as the module id - "modules/dropdown/dropdown" (if the .js in the above output was real, I suggest stripping that extension in the "name" config. .js is assumed by RequireJS, you don't want that string in your module ids). The basePath is used, when given IDs, to transform some unknown ID to a file path (e.g. 'bootstrap' id -> (applying path config) -> '../../lib/bootstrap/js/bootstrap' -> (applying base URL) -> 'scripts/modules/../../lib/bootstrap/js/bootstrap').
Really, though, just allowing r.js to concatenate everything into one file
is the preferred way to go. You could use the include option to include modules un-referenced by global.js in with the optimized bundle, too ( https://github.com/jrburke/r.js/blob/master/build/example.build.js#L438 )
As to your specific problem: your lazy require(['dropdown']) call is misleading you. By combining the requested module id with the basePath, RequireJS comes up with the URL you want - scripts/modules/dropdown - which defines a module with the module id scripts/module/dropdown - but since you requested the module id dropdown, you get nothing. (I would've guessed you'd get a RuntimeError instead of undefined, but I suppose that's how things go). One way or another you need to address the id/path mismatches.
Although I have resolved my issue with the hints wyantb's answer provided, I've since changed my approach to a single file concat due to the simplicity it brings. I still wanted to post the specifics of how I solved this question's issue for anyone else to happens along it.
In the grunt build configuration options, I added the onBuildWrite field to transform the content, so my assigned module IDs lined up with how I was lazily loading them.
onBuildWrite: function (moduleName, path, contents) {
return contents.replace(/modules\/global.js/, 'global');
}
This code is specifically for the global.js file. I implemented a similar onBuildWrite for the other module files (in the foreach loop). The transformation will essentially strip the path and extension from the module name that r.js assigns.
Here are some examples of before and after:
Before After
/modules/global.js global
/modules/dropdown/dropdown.js dropdown
/modules/loginButton/loginButton.js loginButton
Therefore, when I load the modules using the HTML script from my original question, requirejs resolves and finds a match.
Either require by path or define global and dropdown in global.cs
require(['./global'], function () {
require(['./dropdown'], function (dropdown) {
console.log(dropdown);
});
});
I am doing my first try using requireJS and it works great !
I now would like to use the optimizer and i meet some issues when running my code in the browser.
I have these JS files:
/public/javascripts/build.js
/public/javascripts/main.js
/public/javascripts/lib/jquery.min.js
/public/javascripts/lib/require.min.js
/public/javascripts/a.js
/public/javascripts/b.js
/public/javascripts/c.js
a.js, b.js and c.js are modules i define for my application using requireJS.
main.js:
require.config({
paths: {
'jQuery': 'lib/jquery.min.js'
},
shim: {
'jQuery': {
exports: '$'
}
}
});
require(['a.js'], function(A){
var Entity = new A();
});
build.js
({
baseUrl: ".",
paths: {
requireLib: "lib/require.min",
jquery: "lib/jquery.min"
},
name: "main",
out: "main-built.js",
include: ["requireLib"]
})
Also i am wondering why do we have to specify the paths of the libraries into the build.js and not the other javascript files.
When i do not use the optimizer and only load the file
<script src="/javascripts/lib/require.min.js" data-main="/javascripts/main"></script>
it works great, but when i run r.js -o ./public/javascripts/build.js and only load
<script src="/javascripts/main-built.js"></script> i get the error Uncaught TypeError: undefined is not a function in the minified code.
How to explain that ?
Here are the logs i get when running r.js
Tracing dependencies for: main
Uglifying file: /public/javascripts/main-built.js
/public/javascripts/main-built.js
----------------
/public/javascripts/lib/require.min.js
/public/javascripts/a.js
/public/javascripts/b.js
/public/javascripts/lib/jquery.min.js
/public/javascripts/c.js
/public/javascripts/main.js
This is definitely wrong:
require(['a.js'], function(A){
var Entity = new A();
});
You should not use extensions in the list of dependencies you give to require or define. Modules should be named without extension. So here 'a', not 'a.js'. Using 'a.js' will cause RequireJS to fail loading what you really want once the optimizer has run. Let's say you have a file named a.js which has:
define(function () {
return function () {};
});
The optimizer will include it into your main-built.js file like this:
define("a", function () {
return function () {};
});
Note how the first parameter to define is now "a". This has been added by r.js. This is the name of the module. When you load main-built.js, a module named "a" is defined. When you use require with "a.js", you are telling RequireJS you want something in a file named a.js so RequireJS will go looking for that and ignore what is in main-built.js.
Also, jQuery 1.8 or over does not need a shim.
I just have added
shim: {
'jQuery': {
exports: '$'
}
}
into the build.js file, and it works perfectly !
Thanks !
I'm currently calling my test files something like test.coffee.unit for unit tests... (which produces the output test.spec.unit)
However, when calling require "test.coffee.unit" node interprets the file as javascript and it fails to evaluate. I've been looking through the docs and https://github.com/jashkenas/coffee-script/blob/master/lib/coffee-script/coffee-script.js#L192 to see if I could find a way, but I'm not seeing anything that looks promising.
I also had a look at https://github.com/joyent/node/blob/master/lib/module.js#L347 and http://nodejs.org/api/modules.html#modules_all_together to see what I could glean from that...
Summary:
Is there a way to register the .coffee.unit or just .unit extension so that require will evaluate it as CoffeeScript?
You have two options.
Modify the coffee-script source.
Extract the parts of the source you need, and modify them to work in a different scope.
For either, you'll want to refer to section-19 of the coffee-script node module.
The relevant code shows how to configure a require extension:
if require.extensions
for ext in ['.coffee', '.litcoffee', '.coffee.md']
require.extensions[ext] = loadFile
And the code coffee-script uses to load a file:
loadFile = (module, filename) ->
raw = fs.readFileSync filename, 'utf8'
stripped = if raw.charCodeAt(0) is 0xFEFF then raw.substring 1 else raw
answer = compile(stripped, {filename, sourceMap: true, literate: helpers.isLiterate filename})
sourceMaps[filename] = answer.sourceMap
module._compile answer.js, filename
You'll need to track down the dependencies. Most are on the coffee-script module's exports. For example,
compile(stripped, {filename, sourceMap: true, literate: helpers.isLiterate filename})
To
cs = require 'coffee-script'
cs.compile(stripped, {filename, sourceMap: true, literate: cs.helpers.isLiterate filename})
Feel more than welcome to edit this answer with a complete solution.
I try requireJS optimizer to pack all my scripts into one file and I cannot overcome one issue.
My requireJs configuration is
var require = {
// 'baseUrl': 'static/scripts',
'paths': {
'external': 'global/external'
},
'waitSeconds': 2,
// 'enforceDefine': true,
'deps': ['external/jquery-1.7.2'],
'config': {
}
};
requireJs will load everything that is in deps before it starts loading any other scripts. since jquery wraps itself with define function and with name jquery I can load it to my scripts simply by calling
var var $ = require('jquery');
This works great when code is not optimized.
PROBLEM:
when I run r.js (with node - but this I think is irrelevant) optimizer prints error that it cannot resolve jquery dependency.
There is nothing in requireJs optimizer faq on that. I tried play with configuring 'path' property but it didnt fix anything.
I removed deps property and added new element to paths
var require = {
// 'baseUrl': 'static/scripts',
'paths': {
'external': 'global/external'
'jquery': 'global/external/jquery-1.7.2'
},
'waitSeconds': 2,
...
};
it didnt play before because I tried to setup path to jquery like
'jquery': 'external/jquery-1.7.2'
thinking that external should evaluate to
'global/external/jquery-1.7.2'
then I just set path.jquery in build script (or as argument to r.js) once again and it worked