I'm trying to require a html template file as part of my KnockoutJS component registration. According to Chrome's network tab, all the other files load fine except login-template.html which appears as
file:///home/leon/Dev/KnockOutJS/Component%20Example/js/lib/text.js
in my local file path. What Am I doing wrong here?
requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app',
jquery: 'jquery-3.3.1',
knockout: 'knockout-3.4.2',
}
});
requirejs(['jquery', 'knockout', 'app/login-component', 'text!app/login-template.html'],
function ($, ko, loginComponent, loginTemplate) {
ko.components.register('login-component', {
viewModel: { require: loginComponent },
template: { require: loginTemplate }
});
ko.applyBindings();
});
You need to install the text plugin from https://github.com/requirejs/text
Related
I can't get my app to see moment, I have tried everything I've seen via googling and on stackoverflow.
require.config({
baseUrl: 'app',
paths: {
'angular': '../lib/angular.min',
'angularMessages': '../lib/angular-messages.min',
'angularResource': '../lib/angular-resource.min',
//moment stuff
"moment": '../lib/moment',
'momentLocale': '../lib/moment-with-locales',
'angular-moment': '../lib/angular-moment.min',
},
shim: {
angular: {
exports : 'angular'
},
"angular-moment": { "deps": ["momentjs"] }
}
});
require([
'app',
'angular'], function (app) {
require([
'moment',
'momentjs',
'momentLocale',
'angular-moment'], function () {
app.init();
});
});
Yet however I can get this to run no problems
// load moment.js as moment
require(['moment'], function(moment) {
// test if moment is loaded
alert(moment().format('dddd, MMMM Do YYYY, h:mm:ss a'));
});
Note I stripped out the other stuff in my require js as there are no problems whatever with those resources.
I'm trying to setup jasmine-jquery for use with Jasmine 2.4. My Gruntfile config looks like this:
jasmine : {
main: {
// src: 'htdocs/test/newjs/**/*.js',
options: {
specs: 'htdocs/test/newjs/*.js',
vendor: 'htdocs/jslib/jasmine-jquery-1.5.0/jasmine-jquery.js',
template: require('grunt-template-jasmine-requirejs'),
templateOptions: {
requireConfigFile: 'htdocs/js/config.js',
requireConfig: {
baseUrl: './htdocs/js/',
callback: function($) {
// Extra initialization here
},
paths: {
jquery: '../jslib/jquery-1.9.1/jquery.min',
facebook: '../jslib/connect.facebook.net-test/en_US/all',
'jquery.mobile': '../jslib/jquery.mobile.touchonly-1.3.2/'+
'jquery.mobile.custom.min',
templates: '../templates',
config: 'empty' // Override config require since this plugin
// already pulls it into the test runner
}
}
}
}
}
},
I keep getting the error "Can't find variable: jasmine," however. Does anyone have any experience with this error? I've heard that jasmine-jquery may not play well with the newer versions of Jasmine. Thoughts?
Here's a screenshot of the error:
The above snippet is invalid, it should be as following
var jasmine = {
main: {
// src: 'htdocs/test/newjs/**/*.js',
options: {
specs: 'htdocs/test/newjs/*.js',
vendor: 'htdocs/jslib/jasmine-jquery-1.5.0/jasmine-jquery.js',
template: require('grunt-template-jasmine-requirejs'),
templateOptions: {
requireConfigFile: 'htdocs/js/config.js',
requireConfig: {
baseUrl: './htdocs/js/',
callback: function($) {
// Extra initialization here
},
paths: {
jquery: '../jslib/jquery-1.9.1/jquery.min',
facebook: '../jslib/connect.facebook.net-test/en_US/all',
'jquery.mobile': '../jslib/jquery.mobile.touchonly-1.3.2/'+
'jquery.mobile.custom.min',
templates: '../templates',
config: 'empty' // Override config require since this plugin
// already pulls it into the test runner
}
}
}
}
}
}
Unless the jasmine object is part of another object
I use Karma and jasmine for my unit tests. I have a main-test.js file to configure karma, and a main.js to configure my application.
main-test.js:
//
...
//
require.config({
baseUrl: '/base',
paths: {
jquery: 'components/jquery/dist/jquery', // this is copypaste
//another dependencies
},
//
...configuration
//
});
main.js
require.config({
paths: {
jquery: 'components/jquery/dist/jquery', // this is copypaste
//another dependencies
},
//
...configuration
//
});
What is the proper way to share paths between those two configurations?
We met the same problem with my team and ended up by requiring the main config into test-main.js:
// requiring global requireJS config
require(['/base/config/require.conf.js'], function() {
'use strict';
// first require.config overload: Karma specific
require.config({
baseUrl: '/base/src',
paths: {
'angularMocks': '../bower_components/angular-mocks/angular-mocks'
},
shim: {
'angularMocks': {
deps: ['angular']
}
}
});
require(['angularMocks'], function() {
var specFiles = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
if (/\/base\/src\/.*_test\.js$/.test(file)) {
specFiles.push(file);
}
}
}
// second overload to include specFiles and start Karma
require.config({
deps: specFiles,
callback: window.__karma__.start
});
});
});
Our starter app structure for projects using AngularJS + RequireJS is available here: angular-requirejs-ready.
I do not claim this is the proper way, only our way ;)
I have the following directory structure (relevant bits only):
app
- build
- script.js
- js
- lib
- require.js
- jquery-1.10.2.js
- app.js
- index.html
Gruntfile.js
Gruntfile.js contains the following:
module.exports = function (grunt) {
var gruntConfig = {
pkg: grunt.file.readJSON('package.json'),
requirejs: {
compile: {
options: {
name: 'app',
baseUrl: 'app/assets/js',
out: 'app/assets/build/script.js',
include: ['lib/require'],
uglify: {
// beautify: true,
defines: {
DEBUG: ['name', 'false']
}
},
paths: {
jquery: "lib/jquery-1.10.2"
}
}
}
},
};
grunt.initConfig(gruntConfig);
grunt.loadNpmTasks('grunt-contrib-requirejs');
};
app.js contains the following:
require(['jquery'], function ($) {
// Do stuff
});
How do I set it up so that it copies all the JavaScript needed into build/script.js, not just app.js and require.js when I tell it to (erroring when I try to use jQuery)? I also want to be able to add modules without adding them to my Gruntfile, just by adding them to script.js.
You can have a mainConfigFile defined and inside config file have paths to you lib code like this
Contents of gruntfile:
requirejs: {
compile: {
options: {
baseUrl: "app/js/",
mainConfigFile: app/config.js",
out: "build/script.js",
name: "config"
}
}
}
Contents of config file:
require.config({
paths: {
lib: "<path to>/js/lib",
jquery: "<path to>/js/lib/jquery-1.10.2.min",
.
and particular file required
.
}
Requirejs will add the contents of all path files to the optimized code.
Try adding this to your options object:
findNestedDependencies: true
This way grunt-contrib-requirejs (actually just requirejs) will find whatever dependencies are listed on your config file.
Hope it works for you.
I want to combine the js used in a simple requireJS solution.
This is my main.js
require.config({
paths: {
'jquery': 'jquery-2.0.3.min',
'dataTable': 'jquery.dataTables'
}
});
define(['jquery','dataTable'], function($) {
'use strict';
$(function () {
$('.tablesorter').dataTable();
});
});
And my gruntFile.js
module.exports = function(grunt) {
grunt.initConfig({
requirejs: {
production: {
options: {
name: "main",
baseUrl: "",
mainConfigFile: "main.js",
out: "optimized.js"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', 'requirejs');
};
WHen I load optimized.js in the html like this
<script src="optimized.js"></script>
I get
ReferenceError: require is not defined
You must include require.js on the page before including optimized.js.
Like so:
<script src="/path/to/require.js"></script>
<script src="/path/to/optimized.js"></script>
I found out that requireJS only accepts 'main' as the data-main src
So instead of
<script data-main="optimized" src="require.js"></script>
I got
<script data-main="prod/main" src="require.js"></script>
And changed the grunt config to
requirejs: {
production: {
options: {
name: "main",
baseUrl: "",
mainConfigFile: "main.js",
out: "prod/main.js"
}
}
}
Looking at the comments in addition to the question, first I see that George Raith hit on one problem with your code: you needed to include require.js.
Then you said that $('.tablesorter').dataTable() is not executed. That's because you use define rather than require. Use this:
require(['jquery','dataTable'], function($) {
'use strict';
$(function () {
$('.tablesorter').dataTable();
});
});
A call to define only registers a module with RequireJS. It does not execute a module. So it is not surprising that $('.tablesorter').dataTable() would not execute. You have to use the form of require that takes a callback to do what you want to do.
As for including RequireJS with your project into a single file, you have to ask for it explicitly. The optimizer's documentation gives this example:
node ../../r.js -o baseUrl=. paths.requireLib=../../require name=main include=requireLib out=main-built.js
Your configuration (updated from the one in the question) would look something like this:
grunt.initConfig({
requirejs: {
production: {
options: {
name: "main",
baseUrl: "",
mainConfigFile: "main.js",
paths: {
requireLib: <path to require js>
},
out: "optimized.js",
include: "requireLib"
}
}
}
});
(I've not run this code, so lookout for typos.) You have to put the path to your require.js file for requireLib. We have to use requireLib as a module name because require is reserved. With this kind of configuration, you should be able to load only your optimized.js file.