I am working on minification of 3(one.js,two.js,three.js) JS files using require.js. The 3 js files have 3 alert messages. These 3 js files is being called using main.js file.
One.js:
define([], function one() {
alert("one");
});
Two.js:
define([], function two() {
alert("two");
});
Three.js:
define([], function three() {
alert("three");
});
Main.js:
require(["./scripts/one", "./scripts/two", "./scripts/three"], function (one, two, three) {
});
Main_built.js:
define("app/scripts/one",[],function(){alert("one")}),define("app/scripts/two",[],function(){alert("two")}),define("app/scripts/three",[],function(){alert("three")}),require([],function(e,t,n){}),define("app/main",function(){});
Later I created Main_built.js and trying to use it and expecting that no http calls should be made to one,two and three js files, but still I am seeing calls to them in the Fiddler tool.
On running my application, although the Main_built.js is loaded with minified contents of all other js file.
The thing that I am expecting is on executing the application, it should only load the Main_built.js, and should not call any other js files. But i can see it is calling one.js, two.js etc along with Main_built.js
Below is the link I have taken reference from-
http://requirejs.org/docs/optimization.html
Related
It is the first time I use RequireJS and I don't know why it doesn't work...
I have a file example.js inside Folder A.
In the same folder I have 2 other folders that are libraries.
geokdbush
kdbush
In my file I add this code (hoping to add libraries):
require.config({
paths: {
kdbush: 'kdbush',
geokdbush: 'geokdbush'
}
});
And inside function where I should to use libraries I add this:
require(['kdbush', 'geokdbush'], function(kdbush,geokdbush) {
//code
});
But there are two errors: Error: Script error for "kdbush" and Error: Script error for "geokdbush".
I don't know where the problem is in my code. These libraries are used to create K-D tree:
Reverse geocoding with big array is fastest way? - javascript and performance
I created a custom JavaScript file with a simple function:
function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
Then I added this file to the webpack.mix.js config:
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
and run: npm run dev. npm compiled my script and the picture function was included in the app.js file. Now I'd like to use the "picture" function in a blade.php but whenever I call it I get "Uncaught ReferenceError: picture is not defined". I checked the page source and found that the picture function is wrapped with a different function
(function(module, exports) {
function picture(soemthing) {
document.getElementById('idXYZ').src = "example.com";
}
})
Should I add some additional namespace before calling the picture function from blade.php or I have something wrong with mix configuration?
The functions and classes are not exposed to the public, so all JavaScript logic should be written in the JS files.
If you insist on writing JavaScript logic in the blade file, you could attach the function to the window object.
window.picture = function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
...
window.picture()
Well I am trying to fire up my first Jasmine test with Karma. I want to test my main javascript file declared functions, but I'm stuck on it... In my specRunner.html I included every files which needed, in karma.conf.js I added both my test specification and main js files also files: ['src/scripts/main.js','src/tests/mySpec.js'].
In my main.js there is the function I want to use
function testFunctionOne(a, b) {
return a * b;
}
So in mySpec.js file there is the test:
describe('testFunctionOne function', function () {
it('should return a * b', function () {
expect(testFunctionOne(2,4).toEqual(8));
});
});
My question is what am I forgot? What am I making wrong? Keep in mind, this is my first attempt for Jasmine testing.
expect(testFunctionOne(2,4)).toEqual(8); not expect(testFunctionOne(2,4).toEqual(8)); I think
I have this js file that contains some functions, for example a file x.js.
I need to reuse the functions in x.js in other files so I don't write the same function twice. I tried the "dojo/request/script" but it doesn't work.
Is there any suggestion on how to import these functions?
Ideally, you should make the file into an AMD module. For example, if your my/AB.js contains this:
function f1(x) { /*..*/ }
function f2(y) { /*..*/ }
You should rewrite it to:
define([], function() {
return {
f1: function(x) { /*..*/ },
f2: function(y) { /*..*/ }
}
});
Then, in your other javascript file(s), you can use require to load it.
require(['my/AB'], function(AB) {
AB.f1('foo');
AB.f2('bar');
});
(Notice that there's no .js extension in my/AB!)
This has the benefit that your functions in AB.js are no longer in the global scope, i.e. they will not collide with other people's functions. It also allows you to use the Dojo build system to deploy optimized, combined files later on.
However, this is not always possible. Perhaps other JS files are relying on f1 and f2 being in the global scope. But you can load non-AMD, regular files with Dojo's loader too, by simply adding the .js extension.
require(['my/AB.js'], function() {
window.f1('foo');
window.f2('bar');
});
Note that in all these cases, I've assumed your code is in a directory called my. Whatever your actual directory is called, you need to tell the Dojo loader about it in the dojoConfig.
<script type="text/javascript">
var dojoConfig = {
baseUrl: ".....",
// your other config parameters,
packages: [ 'my', '../folder/relative/to/baseUrl/my' ]
};
</script>
<!-- your inclusion of dojo.js somewhere below this -->
PS: You can actually load JS files from arbitrary locations too:
require(['http://example.com/js/my/AB.js'], function() {
window.f1('foo');
window.f2('bar');
});
I've written a function which I'd like to use as a Grunt task. I can do this by adding this to the Gruntfile:
grunt.registerTask('foo', function () {
// code here
});
However, it makes more sense to keep the function code in a separate file. I plan to define a bunch of these custom tasks and I don't want to bloat the Gruntfile.
I'm not sure what the preferred way of registering such tasks is. I have found this to work:
grunt.registerTask('foo', function () {
require('./path/to/foo.js')(grunt);
});
So, I'm having the inline function like in the fist example, but this time, I'm loading an external file and invoking it immediately. In that external file, I of course have to write:
module.exports = function (grunt) {
// code here
}
This works, but it feels hackish. Is there a more proper way of doing this?
Short answer: the alternative to this
grunt.registerTask('foo', function () {
require('./path/to/foo.js')(grunt);
});
is http://gruntjs.com/api/grunt#grunt.loadtasks
Long answer:
Normally when you have tasks in external files there are served as other nodejs modules. So, if that is something that you will use in several projects you may want to register it in the registry. Later inside your Gruntfile.js you will have:
grunt.loadNpmTasks('yout-module-here');
The grunt's documentation says:
Load tasks from the specified Grunt plugin. This plugin must be installed locally via npm, and must be relative to the Gruntfile
However, if you don't want to upload anything to the registry you should use loadTasks
grunt.loadTasks('path/to/your/task/directory');
So, once the task is loaded you may use it in your configuration.
Here is a simple grunt task placed in external file:
'use strict';
module.exports = function(grunt) {
grunt.registerMultiTask('nameoftask', 'description', function() {
var self = this;
// this.data here contains your configuration
});
};
And later in Gruntfile.js
grunt.initConfig({
nameoftask: {
task: {
// parameters here
}
}
});
I had a similar problem.
I wanted to modularize my grunt config and custom tasks by functionnalities (big UX/UI blocks) rather than by technical features. AND I wanted to keep the config files next to task files... (better when working on a large legacy codebase with an varied team - 5 persons with varying JS knowledge)
So I externalized my tasks like Krasimir did.
In the gruntfile, I wrote :
//power of globbing for loading tasks
var tasksLocations = ['./grunt-config/default_tasks.js', './grunt-config/**/tasks.js'];
var taskFiles = grunt.file.expand({
filter: "isFile"
}, tasksLocations);
taskFiles.forEach(function(path) {
grunt.log.writeln("=> loading & registering : " + path);
require(path)(grunt);
});
You will find the whole boilerplate gruntfile here (external config and tasks loading) : https://gist.github.com/0gust1/7683132