So far there's no AMD version of materializecss which makes it impossible to use with RequireJs
I tried using Shim config on RequireJs but I always get an error:
require.config({
baseUrl: '/resources/scripts',
catchError: true,
paths: {
'jquery': '//code.jquery.com/jquery-2.1.1.min',
'materialize': '../../build/bower_components/materialize/dist/js/materialize',
'velocity': '../../build/bower_components/materialize/js/velocity.min',
'hammerjs': '../../build/bower_components/materialize/js/hammer.min'
},
shim: {
'materialize': {
deps: ['jquery', 'hammerjs', 'velocity'],
exports: 'Materialize'
},
'velocity': {
deps: ['jquery']
}
}
});
The error:
require.js:168 Uncaught Error: Mismatched anonymous define() module: function ()
At the moment Materialize has a lot of problem with requiere. Here share the solution that I found. It works for me in Magento 2:
Load this "version" of materialize: https://github.com/ccloli/materialize/tree/AMD-fix/dist/js (note that is not a official release)
var config = {
paths: {
'jquery': '//code.jquery.com/jquery-2.1.1.min',
'materialize': 'Magento_Theme/js/materialize',
'velocity': 'Magento_Theme/js/velocity',
'hammerjs': 'Magento_Theme/js/hammerjs',
},
shim: {
'velocity': {
deps: ['jquery']
},
'hammerjs': {
deps: ['jquery']
},
'materialize': {
deps: ['jquery', 'velocity', 'hammerjs']
}
}
};
Hope it helps.
Related
I have been using requirejs and am having trouble getting the optimization tool to work. All I want to do is optimize my javascript files into one script file with all my dependencies included.
All my file are in the one js/ folder and I have a sub folder vendors/
I have a config file which looks like this(config.js):
requirejs.config({
baseUrl: ".",
out: "main-built.js",
deps: ["main"],
paths: {
jquery: "vendor/jquery", // v.1.10.2
bootstrap: "vendor/bootstrap",
ajaxform: "vendor/ajaxform",
skrollr: "vendor/skrollr",
jqueryform:"vendor/jqueryform"
},
shim: {
bootstrap: {
deps: ["jquery"],
exports: "bootstrap",
},
ajaxform: {
deps: ["jquery"],
exports: "ajaxform",
},
jqueryform: {
deps: ["jquery"],
exports: "jqueryform",
}
}
});
And I have an main javascript file (main.js) which looks like this:
if (typeof jQuery === 'function') {
define('jquery', function () { return jQuery; });
}
define(["jquery","bootstrap", "ajaxform","skrollr"],
function($, bootstrap, ajaxform, skrollr) {
//have other code here
});
I also created a build file:
({
baseUrl: ".",
paths: {
jquery: "vendor/jquery", // v.1.10.2
bootstrap: "vendor/bootstrap",
ajaxform: "vendor/ajaxform",
skrollr: "vendor/skrollr",
jqueryform:"vendor/jqueryform"
},
shim: {
bootstrap: {
deps: ["jquery"],
exports: "bootstrap",
},
ajaxform: {
deps: ["jquery"],
exports: "ajaxform",
},
jqueryform: {
deps: ["jquery"],
exports: "jqueryform",
}
},
name: "main",
out: "main-built.js"
})
All the build file does is compress the main.js file itself and doesn't include all needed files.
I've been trying to get this working on and off for weeks and can't seem to get it right so any help would be REALLY appreciated.
Thanks
Try adding a modules entry to your build file with your main module, as in:
modules: [
{ name: 'main' }
]
You can see all the options for the build file here: https://github.com/requirejs/r.js/blob/master/build/example.build.js
I recently worked on a web app, and i wanted to separate it into modules.
I searched and found out that RequireJs is the best for this. I read the doc, and some tutorials about it and came up with this
requirejs.config({
baseUrl: "js/lib",
shim: {
'jquery-1.12.1.min': ['jquery-1.12.1.min'],
'materialize.min': ['materialize.min'],
'knockout-3.4.0': ['knockout-3.4.0'],
'pouchdb-5.3.0.min': ['pouchdb-5.3.0.min']
},
waitSeconds: 0,
paths: {
'jquery-1.12.1.min': 'jquery-1.12.1.min',
'materialize.min': 'materialize.min',
'knockout-3.4.0': 'knockout-3.4.0',
'pouchdb-5.3.0.min': 'pouchdb-5.3.0.min',
}
});
require(["jquery-1.12.1.min", "knockout-3.4.0", "materialize.min", "pouchdb-5.3.0.min"], function($, ko) { //My main functions and other stuff ... }
My index has the following:
<script data-main="js/main" src="js/lib/require.js"></script>
<script type="text/javascript" src="js/converter.js"></script>
But it seems that my Jquery, KO, materialize.css and pouchdb aren't loading as i see on my chrome dev tools in Network:
I also read about the shim config how to set up the dependences and i want them in that order. I don't really know what am i missing, any help would really be appreciated.
Folder structure is:
js:
lib:
->jquery-1.12.1.min.js
->knockout-3.4.0.js
->pouchdb-5.3.0.min.js
->materialize.min.js
->require.js
main.js
converter.js
Ok it seems require and materialze.css have a problem with hammer.js, what i recommend is you go and download Hammer.min.js and include it in your lib folder.
Then in your main.js add the following:
requirejs.config({
baseUrl: 'js/lib',
waitSeconds: 0,
paths: {
app: '../app',
jquery: 'jquery-1.12.1.min',
materialize: 'materialize.min',
knockout: 'knockout-3.4.0',
pouchdb: 'pouchdb-5.3.0.min',
hammer: 'hammer.min'
},
shim: {
hammer: {
deps: ['jquery']
},
pouchdb: {
deps: ['jquery']
},
knockout: {
deps: ['jquery'],
exports: 'ko'
},
materialize: {
deps: ['jquery', 'hammer'],
},
jquery: {
exports: '$'
}
}
});
You include you hammer and also the dependency for jquery on it. And i see that you didn't put the PouchDb object in the function:
define(["jquery", "knockout", "pouchdb", "materialize" ], function($, ko, PouchDB) {...
Hope this helps
Using path, requirejs replace module id prefixes (name in config) with the corresponding value.
Using shim you can export a global variable and configure the dependencies ( materialize depends jquery so you have to import jQuery before importing materialize.js )
requirejs.config({
baseUrl: "js/lib",
waitSeconds: 0,
paths: {
'jquery': 'jquery-1.12.1.min',
'materialize': 'materialize.min',
'knockout': 'knockout-3.4.0',
'pouchdb': 'pouchdb-5.3.0.min',
'hammer': 'hammer.min',
},
shim: {
pouchdb: {
deps: ['jquery']
},
knockout: {
exports: 'ko'
},
materialize: {
deps: ['jquery', 'hammer']
},
jquery: {
exports: '$'
}
}
});
require(["jquery", "knockout", "materialize", "pouchdb"], function ($, ko) {
console.log($);
console.log(ko);
});
How correctly connect https://github.com/RobinHerbots/jquery.inputmask using requirejs? Method on official site documentation not correct.
I try make it like this
require-config.js
paths: {
...
inputmask: "/assets/vendor/jquery.inputmask/dist/inputmask/inputmask",
dependencyLib: "/assets/vendor/jquery.inputmask/dist/inputmask/dependencyLib",
jQueryInputmask: "/assets/vendor/jquery.inputmask/dist/inputmask/jquery.inputmask",
...
}
script.js
define('script', ['jquery', 'jQueryInputmask'], function ($) {
...
$obj.inputmask(
{
alias: 'currency',
rightAlign: false,
digits: 0
}
);
...
});
but it not work
Try with this code:
require.config({
paths: {
...
"jquery" : "../dist/jquery/jquery",
"jQueryInputmask" : "../dist/inputmask/jquery.inputmask",
"inputmask" : "../dist/inputmask/inputmask",
...
},
shim: {
jquery: {
exports: "$"
},
jQueryInputmask: {
deps: ["jquery", "inputmask"],
exports: "$"
},
)
define('script', ['jquery', 'jQueryInputmask'], function ($) {
...
$obj.inputmask(
{
alias: 'currency',
rightAlign: false,
digits: 0
}
);
...
});
In my project it works setting the shim:
shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.
I do it this way:
require.config({
paths: {
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min',
inputmask: '//cdn.jsdelivr.net/npm/inputmask#3.3.11/dist/min/jquery.inputmask.bundle.min'
},
shim: {
inputmask: {
deps: ['jquery'],
exports: 'Inputmask'
}
}
});
define('script', ['inputmask'], function (Inputmask) {
new Inputmask('email').mask('#obj');
});
I have a demo site running on EC2 and I pushed a version of the AngularJS app and now everything seems broken. I'm using AngularJS 1.2 and RequireJS 2.1. I have a modules/main_prod.js file. It looks like this:
(function (require) {
"use strict";
require.config({
paths: {
'jquery': '../js3p/jquery',
'jquery-ui': '../js3p/jquery-ui',
'jquery.ui.widget': '../js3p/jquery.ui.widget',
'bootstrap': '../js3p/bootstrap',
'angular': '../js3p/angular',
'angular-sanitize': '../js3p/angular-sanitize',
'ngUi': '../js3p/angular-ui',
'ui.bootstrap': '../js3p/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
'ngCalendar': '../js3p/calendar',
'angular-ui-router': '../js3p/angular-ui-router',
'uikeypress': '../js3p/keypress',
'dtPicker': '../js3p/bootstrap-datetimepicker.min',
'fileUpload': '../js3p/jquery.fileupload',
'fullcalendar': '../js3p/fullcalendar',
'iframeTransport': '../js3p/jquery.iframe-transport',
'lodash': '../js3p/lodash',
'moment': '../js3p/moment',
'restangular': '../js3p/restangular',
'typeahead': '../js3p/typeahead'
},
shim: {
'jquery': { deps: [] },
'jquery-ui': { deps: ['jquery'] },
'jquery.ui.widget': { deps: ['jquery'] },
'bootstrap': { deps: ['jquery'] },
'angular': { deps: ['jquery'], exports: 'angular' },
'angular-sanitize': { deps: ['angular'] },
'ngUi': { deps: ['angular'] },
'ui.bootstrap': { deps: ['angular', 'ngUi'] },
'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'] },
'angular-ui-router': { deps: ['angular', 'ngUi'] },
'uikeypress': { deps: ['angular', 'ngUi'] },
'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'] },
'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'] },
'fullcalendar': { deps: ['jquery', 'jquery-ui'] },
'iframeTransport': { deps: ['jquery', 'jquery-ui'] },
'lodash': { deps: [] },
'moment': { deps: ['jquery'] },
'restangular': { deps: ['angular', 'lodash'] },
'typeahead': {deps: ['jquery', 'bootstrap'] }
},
priority: ['angular']
});
require(['angular',
'angular-ui-router'],
function (angular, routes) {
require(['angular', 'app'], function (angular) {
angular.bootstrap(document, ["app"]);
});
});
}(require));
When I load the page, I see all of these libraries loading. I even see the page load and it looks like half of Angular is working (I see directives filled in and whatnot). Anything subject to a ng-show attribute doesn't seem to work (shown when should be hidden), but my redirect that is within AngularJS does work. Every page load puts this in the console:
Error: [$injector:modulerr] Failed to instantiate module angular due to:
[$injector:nomod] Module 'angular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
...
Let me know if more code is needed, I'm happy to provide. I'm at a total loss here.
So I came to find the problem. I'm working from the ngStart seed project and when it does a build for deployment it changes the top of the index.html file:
<!doctype html>
<!--(if target build)>
<html ng-app="angular" manifest="project.manifest">
<!(endif)-->
<!--(if target local)> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<!--<!(endif)-->
<head>
This ng-app="angular" is the actual cause of the error message. I removed it and things are behaving as expected.
You can't use angular and requirejs in this way. You need to use Angular ADM
https://github.com/marcoslin/angularAMD
http://www.startersquad.com/blog/angularjs-requirejs/
I'm working with the ngStart Angular seed project and I'm trying to optimize RequireJS for deployment. When I run the grunt job to build the artifact, I end up with an output file that does not include all of the libraries in my main.js file. I've spent most of today trying different things to get this to work. If I explicity list every module in my gruntfile (something I really don't want to do) they all get in there, but seemingly not in the right order as it doesn't work in the browser. I thought that the optimizer was supposed to read the require.config call in my main.js and load everything in the correct order. Below is what I thought should work, but isn't loading all of my modules.
grunt task:
requirejs: {
compile: {
options: {
baseUrl: "<%= pkg.folders.jsSource %>",
name: "main",
include: [
'almond'
],
mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/modules/main.js",
optimize: "none",
paths: {
'almond': '../../../bower_components/almond/almond',
'config/configuration': 'config/<%=configuration%>'
},
generateSourceMaps: true,
preserveLicenseComments: false,
useSourceUrl: true,
uglify2: {
// TODO - angular.js is already minified, mangling destroys it, so mangling is currently globally disabled
mangle: false
}
}
}
}
main.js:
/*global require */
(function (require) {
"use strict";
require.config({
paths: {
'jquery': '../../../bower_components/jquery/jquery',
'jquery-ui': '../../../bower_components/jquery-ui/ui/jquery-ui',
'jquery.ui.widget': '../../../bower_components/jquery-ui/ui/jquery.ui.widget',
'bootstrap': '../../../bower_components/bootstrap/dist/js/bootstrap',
'angular': '../../../bower_components/angular/angular',
'ngResource': '../../../bower_components/angular-resource/angular-resource',
'angular-route': '../../../bower_components/angular-route/angular-route',
'angular-sanitize': '../../../bower_components/angular-sanitize/angular-sanitize',
'ngUi': '../../../bower_components/angular-ui/build/angular-ui',
'ui.bootstrap': '../external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
'ngCalendar': '../../../bower_components/angular-ui-calendar/src/calendar',
'uikeypress': '../../../bower_components/angular-ui-utils/modules/keypress/keypress',
'dtPicker': '../../../bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min',
'fileUpload': '../../../bower_components/blueimp-file-upload/js/jquery.fileupload',
'fullcalendar': '../../../bower_components/fullcalendar/fullcalendar',
'iframeTransport': '../external-libs/iframetransport/jquery.iframe-transport',
'moment': '../../../bower_components/momentjs/moment'
},
shim: {
'jquery': { deps: [], exports: 'jquery' },
'jquery-ui': { deps: ['jquery'], exports: 'jquery-ui' },
'jquery.ui.widget': { deps: ['jquery'], exports: 'jquery-ui-widget' },
'bootstrap': { deps: ['jquery'], exports: 'bootstrap' },
'angular': { deps: ['jquery'], exports: 'angular' },
'ngResource': { deps: ['angular'], exports: 'ngResource' },
'angular-route': { deps: ['angular'], exports: 'ngRoute' },
'angular-sanitize': { deps: ['angular'], exports: 'ngSanitize' },
'ngUi': { deps: ['angular'], exports: 'ngUi' },
'ui.bootstrap': { deps: ['angular', 'bootstrap', 'ngUi'], exports: 'ui-bootstrap' },
'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'], exports: 'ngCalendar' },
'uikeypress': { deps: ['angular', 'ngUi'], exports: 'uikeypress' },
'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'], exports: 'dtPicker' },
'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'], exports: 'fileUpload' },
'fullcalendar': { deps: ['jquery', 'jquery-ui'], exports: 'fullcalendar' },
'iframeTransport': { deps: ['jquery', 'jquery-ui'], exports: 'iframeTransport' },
'moment': { deps: ['jquery'], exports: 'moment' }
},
priority: ['angular']
});
require(['config/config',
'angular',
'angular-route'],
function (config, angular, routes) {
require(config.standardRequireModules, function (angular) {
angular.bootstrap(document, ["app"]);
});
});
}(require));
When I run the task, I get this:
Running "requirejs:compile" (requirejs) task
Tracing dependencies for: main
/Users/user/dev/project/trunk-angular/target/project-0.1.0/modules/main.js
----------------
/Users/user/dev/project/trunk-angular/bower_components/almond/almond.js
/Users/user/dev/project/trunk-angular/bower_components/jquery/jquery.js
/Users/user/dev/project/trunk-angular/bower_components/angular/angular.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/configuration.js
/Users/user/dev/project/trunk-angular/bower_components/bootstrap/dist/js/bootstrap.js
/Users/user/dev/project/trunk-angular/bower_components/angular-ui/build/angular-ui.js
/Users/user/dev/project/trunk-angular/src/main/external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/config.js
/Users/user/dev/project/trunk-angular/bower_components/angular-route/angular-route.js
/Users/user/dev/project/trunk-angular/src/main/modules/main.js
Root of the project is /Users/user/dev/project/trunk-angular.
All of the path variables should be fine (they are in the other tasks and the outputted paths are right). I just don't know what's going on and would greatly appreciate some help.
First, I see, you are using nested require calls, but your build configuration doesn't include
findNestedDependencies: true.
Second, requirejs optimizer includes only those modules from path, that are explicitly required, or defined as a dependency for other modules, that are required later.