When trying to run my main.js through r.js I'm getting file not found errors for the ember-simple-auth shim.
Error: ENOENT, no such file or directory '[path_to_webapp]/components/ember-simple-auth/ember-simple-auth/core.js']
errno: 34,
code: 'ENOENT',
path: '[path_to_webapp]/components/ember-simple-auth/ember-simple-auth/core.js',
syscall: 'open',
fileName: '[path_to_webapp]/components/ember-simple-auth/ember-simple-auth/core.js',
moduleTree: [ 'ember-simple-auth', 'js/main' ]
There is a ember-simple-auth.js in the ember-simple-auth directory in which the core module is bundled. This works for development but not when I run it through the optimizer
The relevant parts (I think) of my main.js looks like this
require.config({
baseUrl: '/',
paths:
{
'ember': 'components/ember/ember',
'ember-simple-auth': 'components/ember-simple-auth/ember-simple-auth',
},
shim:
{
'ember':
{
deps: ['handlebars','jquery'],
exports: 'Ember'
},
'ember-simple-auth' : ['ember']
}
});
require(['ember-simple-auth']);
The build file
compile:
options:
baseUrl: "."
paths:
requireLib: 'components/requirejs/require'
mainConfigFile: "js/main.js"
name: "js/main"
include: ['requireLib']
out: "js/main.min.js"
'compile-css':
options:
cssIn: "css/style.css"
out: "css/style.min.css"
I ended up using the bundles option which in my case looks like this
bundles:
{
'ember-simple-auth': ['ember-simple-auth/core','ember-simple-auth/session','ember-simple-auth/authenticators','ember-simple-auth/authorizers','ember-simple-auth/stores','ember-simple-auth/utils','ember-simple-auth/mixins/application_route_mixin','ember-simple-auth/mixins/authenticated_route_mixin','ember-simple-auth/mixins/authentication_route_mixin','ember-simple-auth/mixins/authentication_controller_mixin','ember-simple-auth/mixins/login_controller_mixin','ember-simple-auth/authenticators/base','ember-simple-auth/authorizers/base','ember-simple-auth/stores/base','ember-simple-auth/stores/local_storage','ember-simple-auth/stores/ephemeral','ember-simple-auth/utils/flat_objects_are_equal','ember-simple-auth/utils/is_secure_url']
},
Related
I have a quite large app built with RequireJS and I'm trying optimise the modules with r.js.
But no matter what I do, I always get the same annoying error.
me: ~/WORK/LAB/require_r_js/js
→ r.js -o build.js
Optimizing (standard.keepLines.keepWhitespace) CSS file: /<path_to_my_js_folder>/js/dist/vendor/tinyscrollbar/tinyscrollbar.css
Tracing dependencies for: utils/Vendor
Error: ENOENT, no such file or directory
'/<path_to_my_js_folder>/js/dist/TweenLite.js'
In module tree:
utils/Vendor
cssplugin
It looks like my path cssplugin is been ignored, here is my build.js file:
{
mainConfigFile : "core/commom.js",
appDir: '.',
baseUrl: ".",
removeCombined: true,
findNestedDependencies: true,
dir: "./dist",
paths: {
tweenlite: "vendor/greensock/TweenLite.min",
cssplugin: "vendor/greensock/plugins/CSSPlugin.min",
easepack: "vendor/greensock/easing/EasePack.min",
jquery: "vendor/jquery/jquery-1.11.2.min",
signals: "vendor/signals/signals",
underscore: "vendor/underscore/underscore-min",
retina: "vendor/retinajs/retina-1.1.0",
tinyscrollbar: "vendor/tinyscrollbar/jquery.tinyscrollbar.min",
async: 'vendor/millermedeiros/requirejs-plugins/async',
simpleWeather: 'vendor/simpleWeather/jquery.simpleWeather.min'
},
shim: {
underscore: {
exports: "_"
},
jquery: {
exports: "jQuery"
},
simpleWeather: {
exports: "simpleWeather",
deps: ["jquery"]
}
},
modules: [
{ name: "utils/Vendor" },
{
name: "core/Main",
exclude: ['utils/Vendor']
},
{
name: "controllers/MapsHome"
},
{
name: "controllers/SuperHome"
},
{
name: "controllers/Register"
},
{
name: "controllers/hotel/HotelHome"
}
]
}
Well.. I know it looks a lot of information, but this is my commom.js file (the RequireJS config):
(function() {
requirejs.config({
baseUrl: "../",
waitSeconds: 120,
paths: {
tweenlite: "vendor/greensock/TweenLite.min",
cssplugin: "vendor/greensock/plugins/CSSPlugin.min",
easepack: "vendor/greensock/easing/EasePack.min",
jquery: "vendor/jquery/jquery-1.11.2.min",
jmask: "vendor/igorescobar/jquery-mask-plugin.min",
signals: "vendor/signals/signals",
underscore: "vendor/underscore/underscore-min",
retina: "vendor/retinajs/retina-1.1.0",
tinyscrollbar: "vendor/tinyscrollbar/jquery.tinyscrollbar.min",
async: 'vendor/millermedeiros/requirejs-plugins/async',
simpleWeather: 'vendor/simpleWeather/jquery.simpleWeather.min'
},
shim: {
underscore: {
exports: "_"
},
jquery: {
exports: "jQuery"
},
simpleWeather: {
exports: "simpleWeather",
deps: ["jquery"]
},
facebook: {
exports: 'FB'
}
}
});
}).call(this);
The files are organized in this structure:
Well, in my website the scripts are loaded as this:
<script type="text/javascript">
require([globalServerConf.requireJSConfURL], function() {
require(['core/Main'], function(Main) {
var m = new Main();
// The name of the Page Controller is set by a PHP Variable:
m.init("{{$jsController}}");
});
});
</script>
So, a global JS object (built by a PHP script) has the URL to the requirejs.config object. When commom.js is loaded, RequireJS asks for core/Main.js file. When core/Main is loaded, it will ask first for the utils/Vendor module. This module loads all third part scripts (like jQuery, TweenLite, CSSPlugin, etc etc). Only when these files are loaded, Main.js asks for the page controller file (which makes use of many other files as well).
So, I am trying to build with r.js all these modules:
All third part scripts: utils/Vendor
Main script: core/Main
All other main pages controllers:
controllers/MapsHome, controllers/SuperHome, controllers/Register, controllers/hotel/HotelHome
Every time I run r.js, tweelite or cssplugin makes that error and the optimization is killed.
I'm using requireJs with uderscore and tpl , I've changed the default file ending from .html to .tpl .
Now if I try to optimize my app i got the following error
Tracing dependencies for: app
Error: Error: Loader plugin did not call the load callback in the build:
tpl:
tpl!module/home/template/home_unnormalized2
tpl!module/home/template/home
/*
more templates
*/
Module loading did not complete for: app, /* failed for all modules */
at Function.build.checkForErrors (/usr/local/lib/node_modules/requirejs/bin/r.js:28424:19)
it seems like that r.js can't handle the .tpl or !tpl ending/beginning.
my build js
({
baseUrl: "js/lib",
appDir: "..",
dir: "dist",
tpl: {
extension: '.tpl' // default = '.html'
},
modules: [
{ name: "app" }
],
paths: {
app: '../app',
underscore: 'underscore',
text: 'text',
tpl: 'tpl',
//Module
home : '../module/home/home',
},
shim : {
}
})
I'm trying to concatenate my js files using the requirejs optimizer.
I'm basically following this tut:
https://www.youtube.com/watch?v=m6VNhqKDM4E
This is in my build.js:
({
baseUrl: "../",
mainConfigFile: '../main.js',
name: '../main',
out: '../test.js',
paths: {
'jquery': [
'//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
// Fallback
'libraries/jquery-1.11.1.min'
],
'jquery-ui': [
'//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min',
// Fallback
'libraries/jquery.ui.min'
],
'jquery.browser': 'libraries/jquery.browser.min',
'jquery.mousewheel': 'libraries/jquery.mousewheel.min',
'modernizr': 'libraries/modernizr.min',
'bootstrap-tooltip': 'libraries/bootstrap-tooltip',
'parsley': 'libraries/parsley.min'
},
shim: {
'jquery-ui': [ 'jquery' ],
'jquery.browser': {
deps: [ 'jquery' ],
exports: 'jQuery.fn.browser'
},
'jquery.mousewheel': [ 'jquery' ],
'parsley': [ 'jquery' ]
}
})
This is what I run in the terminal:
java -classpath js.jar org.mozilla.javascript.tools.shell.Main r.js -o build.js
But I get this error
js: uncaught JavaScript runtime exception: TypeError: Cannot find function defineProperty in object function Object() { [native code for Object.Object, arity=1] }
I have no clue and googling this doesn't give me anything I can work with. Hopefully u guys can help me.
I'm trying to use grunt-requirejs to optimize my requirejs project into a single production js file. However, I'm not sure if my Gruntfile.js is correct because I have to specify which model to include during the optimization again, which seems wrong to me as I specify mainConfigFile already. I thought it's going to read everything from my requirejs file. I asked this because I have a lot of modules and I don't want to DRY.
Here's my Gruntfile.js
requirejs : {
compile : {
options: {
almond: true,
baseUrl : 'src/Web/Scripts',
mainConfigFile : 'src/Web/Scripts/main-new.js',
out: 'src/Web/Scripts/out.js',
optimize: 'uglify2',
include: ['main-new',
'app/app.js',
'app/viewmodels/home/home.mobile.js',
'zepto',
'hammer',
'zepto-hammer',
'zepto-dragswipe',
'knockout',
'knockout-validation',
'knockout-postbox',
'knockout-mapping',
'knockout-notification',
'q',
'underscore'
]
}
}
},
And this is my main-new.js file
requirejs.config({
baseUrl: '/m/Scripts',
paths: {
'jquery': 'vendors/jquery/jquery-1.10.2',
'jquery-cookie': 'vendors/jquery/jquery.cookie-1.4.1',
'zepto': 'vendors/zepto/zepto',
'hammer': 'vendors/hammer/hammer',
'zepto-hammer': 'vendors/zepto/zepto.hammer',
'zepto-dragswipe': 'vendors/zepto/zepto.dragswipe',
'knockout': 'vendors/knockout/knockout-3.1.0',
'knockout-validation': 'vendors/knockout/knockout.validation',
'knockout-postbox': 'vendors/knockout/knockout-postbox',
'knockout-mapping': 'vendors/knockout/knockout.mapping',
'knockout-notification': 'vendors/knockout/knockout-notification-1.1.0',
'viewmodels': 'app/viewmodels',
'service': 'app/services',
'config': 'app/config',
'helpers': 'app/helpers',
'q': 'vendors/q/q-0.9.6',
'underscore': 'vendors/underscore/underscore-min'
},
shim: {
'knockout-validation': ['knockout'],
'knockout-mapping': ['knockout'],
'knockout-postbox': ['knockout'],
'knockout-notification': ['knockout'],
'jquery-cookie': ['jquery'],
'hammer': ['zepto'],
'zepto-hammer': ['zepto', 'hammer'],
'zepto-dragswipe': ['zepto', 'hammer'],
'zepto': {
exports: 'Zepto'
},
'underscore': {
exports: '_'
}
}
});
In include section you should put modules that is required dynamically like:
require(['path/' + moduleName], function() { ... })
Because r.js can't predict at build time what you will be requiring in runtime.
Everything else should be resolved by dependency arrays in your modules.
My app has been working fine but today I decided to give r.js a swirl.
Right now my tree(part of it) looks like
index.html
assets
js
require.js
r.js
main.js
components
underscore.js
jquery.js
backbone.js
jqueryuijs
models
election.js
collections
elections.js
views
app.js
election.js
in my index.html file I have
<script data-main="assets/js/main" src="assets/js/require.js"></script>
and this is main.js
require.config({
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: 'components/backbone/backbone-min',
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jqueryui': ['jquery']
}
});
require(['views/app'], function(App) {
var router = Backbone.Router.extend({
routes: {
'': 'root',
'year(/:year)': 'year'
},
root: function() {
new App();
},
year: function(year) {
new App({
year: year
});
}
});
r = new router();
Backbone.history.start({
// pushState: true
});
});
and in my modules I refer to my files like assets/js/views/election.js or assets/js/models/election.js
but when I run r.js with this build.js
({
// baseUrl: "assets/",
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: "components/backbone/backbone-min",
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min'
},
name: "main",
out: "main-built.js"
})
I get Error: ENOENT, no such file or directory '/Users/alex/Dropbox/www/animated-elections/assets/js/assets/js/collections/elections.js'. I get what it means by I don't understand why it is adding another assets/js to my paths.
I believe require.js is supposed to go in the same folder as the main file, ie. next to the assets folder instead of inside it.
r.js is inside your app directory, instead of being a sibling to it, as specified in the example setup.
I haven't tested this but r.js is probably assuming that any module calls should be relative to where it's located.
Add in the build.js file this codes.
baseUrl: ".",
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: "components/backbone/backbone-min",
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min',
'views/app': 'empty:',
'views/election': 'empty:',
//and so with others
},
name: "main",
out: "main-built.js"
Regards.-