I have a file with a JS object:
function Monitor() {
var self = this;
...
And I have a file that creates an instance of this and uses it.
self.monitor = new Monitor();
The files are included in a cshtml file in order:
<script type="text/javascript" src="#Url.Content("~/Scripts/Shared/Monitor.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/Scripts/Views/NewMonitor_Index.js")"></script>
The problem is I get this error:
Warning 1 JS Hint: 'Monitor' is not defined.
How do I configure it so that it finds the monitor object?
I don't think if there is an automatic way. Although JSHint could detect other script tags, it is probably more difficult to get the actual path to the file.
Anyways, if I know that a certain symbol is definitely available in the context, I add a
/*global Monitor*/
at the beginning of the script.
If a symbol will be available in every script, I add it to my .jshintrc file in the directory, like
{
"predef": [
"Monitor"
]
}
But I don't know if/how this works on Windows.
Related
This is a legacy project so I'm not going to change everything to TypeScript, but I do want to slowly start combining it, so I want to call TypeScript code from normal JS, using RequireJS. I have a 1-login.js and realtimeConnection.ts (that's transformed into realtimeConnection.js):
<script type="text/javascript" data-main="/content/scripts/realtimeConnection.js" src="/content/require.min.js"></script>
...
<script type="text/javascript" src="/content/pages/1-login.js"></script>
This is 1-login.js:
(function ($) {
requirejs(["/content/scripts/realtimeConnection.js"], function (rtCon) {
debugger;
// The probelm: rtCon === undefined
});
...
...
}(jQuery));
realtimeConnection.ts:
export class RealtimeConnection {
}
Which in turn becomes realtimeConnection.js:
"use strict";
var RealtimeConnection = (function () {
function RealtimeConnection() {
}
return RealtimeConnection;
}());
exports.RealtimeConnection = RealtimeConnection;
So how do I expose my TS code to the JS code via RequireJS?
Ok found it: I needed to tell the TypeScript compiler to build it in a RequireJS/AMD style:
Since I'm using Visual Studio 2015, I placed a tsconfig.json file with the appropriate settings ("module": "amd" in particular) in the root content dir, as per this SO answer.
Now it works.
Now to whoever going to mark it as duplicate:
That allegedly duplicate question, which its answer I linked above, has the title "Visual Studio 2015 RC does not create sourcemap when saving Typescript file". The answer is the same, but the question is different.
I found my answer, hope it'll help others as well... BTNOMB.. just saying...
I'm trying to use Browserify so that I can use an npm package in the browser. The package I'm trying to use is this
I have a fcs.js file:
// Use a Node.js core library
var FCS = require('fcs');
// What our module will return when require'd
module.exports = function(FCS) {
return FCS;
};
And an index.js file:
var FCS = require('./fcs.js');
console.log('FCS IS ');
console.log(FCS);
I then ran:
browserify index.js > bundle.js
And created an index.html file:
<html>
<script src="bundle.js"></script>
<script>
var fcs = new FCS();
</script>
</html>
But I end up with the error:
Uncaught ReferenceError: FCS is not defined
Maybe I'm not grasping the concept correctly. How can i use this package in the browser? Thanks.
Don't do this: require('./fcs.js');
Do this: require('./fcs');
When you require something, the extension is implicitly .js. Also make sure that your module, FCS, has an entry point (the default is index.js, but you can change that in the main entry in the package.json).
Also, in your index.html document, you're expecting that FCS is a global object. I haven't seen the internal code of FCS, but it will only be globally available if it's attached to the window object.
When you require something, it only makes it available to the rest of your code where it's required. If you want to make it globally available, you have to attach it to the window object, just like anything else.
In other words, the internals of your FCS module might look something like:
// node_modules -> fcs -> index.js
var FCS = function() {};
window.FCS = FCS; // this makes it globally available
module.exports = FCS; // this lets you require it
#JoshBeam's answer is correct - in order to expose assets inside the browserify bundle, you need to attach something to the window object. But instead of exposing specific assets, I wanted something more general.
Here's what I did:
in my app.js
require('this')
require('that')
require('./modules/mycode')
...
window.req = require
And in my <script> tag in my HTML:
something = req('./modules/mycode')
Notice that, instead of assigning the require function directly to window.require, I gave it a different name. The reason for this is simple: if you call it window.require, you're overwriting the original require and you'll find yourself in an infinite loop of recursion (at least until the browser runs out of stack space).
The problem is that your inline script (in index.html) is expecting a global variable called FCS to exist (when you do new FCS()). This is not the case because in index.js, your FCS variable is scoped to that file.
You should write all your scripts in separate files and bundle them all using browserify, avoiding the inline script or make FCS global, by attaching it to window.
I am looking for a "module definition" framework to run on the server when deploying my JavaScript App.
I am aware of require.js and other AMD frameworks. However, the necessity to implement define() and require() in my production code is non-satisfying for my purposes and since the App will be deployed in one file, I do not need the ability to inject scripts asynchronously.
Is there a build tool that can merge scripts without adding infrastructure code?
For clarification: The HTML page embedding the scripts is not relevant to my problem. The merging process should be done on script level.
main.js:
function a() {
import("b");
b();
}
b.js:
var b = function() {
alert("b!");
};
Should simply become something like:
function a() {
var b = function() {
alert("b!");
};
b();
}
So you want a tool to find and replace
<script src="SOURCE_URI" type="text/javascript"></script>
in your HTML file With
<script type="text/javascript">
CONTENT_OF_SOURCE_URI
</script>
Or maybe you want to collect all of the SOURCE_URI's and then combine them into one concatenated file and then run that file into a JavaScript compiler/optimizer/obfuscater like Closure and then output the inline script?
Most of the tools that exist will probably use require() and take a JS file as the input, so I suggest you write your own. A simple regex to parse the SRC= out of the script tags in your HTML will probably suffice.
edit https://developers.google.com/closure/compiler/docs/api-tutorial3
With the default compilation level of SIMPLE_OPTIMIZATIONS, the Closure Compiler makes JavaScript smaller by renaming local variables.
There are symbols other than local variables that can be shortened,
however, and there are ways to shrink code other than renaming
symbols. Compilation with ADVANCED_OPTIMIZATIONS exploits the full
range of code-shrinking possibilities.
Compare the outputs for SIMPLE_OPTIMIZATIONS and
ADVANCED_OPTIMIZATIONS for the following code:
function unusedFunction(note) {
alert(note['text']);
}
function displayNoteTitle(note) {
alert(note['title']);
}
var flowerNote = {};
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);
Compilation with SIMPLE_OPTIMIZATIONS shortens the code to this:
function unusedFunction(a){alert(a.text)}function displayNoteTitle(a){alert(a.title)}var flowerNote={};flowerNote.title="Flowers";displayNoteTitle(flowerNote);
Compilation with ADVANCED_OPTIMIZATIONS shortens the code even further
to this:
var a={};a.title="Flowers";alert(a.title);
Both of these scripts produce an alert reading "Flowers", but the
second script is much smaller.
How can I get the current file name I'm in, using dojo.
I have a javascript file and my break point is within that file. I want to know the file name.
and using dojo or javascipt I want to get the name of this file
Any Help will be highly appreciated
Thank you
If you are using AMD (Dojo 1.7+) you can get the module ID of the current module from the special module module:
define([ 'module' ], function (module) {
console.log(module.id);
});
If using legacy Dojo modules, the filename of the script currently being executed is never provided and cannot be retrieved in a cross-browser way because they are loaded using XHR and eval.
There is an example of that in dojo/tests/_base/loader/moduleIds.js :
function get(mid, refmod){
return require.getModuleInfo(mid, refmod, require.packs, require.modules, "../../dojo/", require.mapProgs, require.pathsMapProg, 1);
}
I tried the following in one of my modules :
require.getModuleInfo("my/Module", null, require.packs, require.modules, "../../dojo/", require.mapProgs, require.pathsMapProg, 1).url
This resolved the path to the javascript file that contains my module code...
This works too :
require.modules["my/module"].url
I'm using requireJS to load scripts. It has this detail in the docs:
The path that is used for a module name should not include the .js
extension, since the path mapping could be for a directory.
In my app, I map all of my script files in a config path, because they're dynamically generated at runtime (my scripts start life as things like order.js but become things like order.min.b25a571965d02d9c54871b7636ca1c5e.js (this is a hash of the file contents, for cachebusting purposes).
In some cases, require will add a second .js extension to the end of these paths. Although I generate the dynamic paths on the server side and then populate the config path, I have to then write some extra javascript code to remove the .js extension from the problematic files.
Reading the requireJS docs, I really don't understand why you'd ever want the path mapping to be used for a directory. Does this mean it's possible to somehow load an entire directory's worth of files in one call? I don't get it.
Does anybody know if it's possible to just force require to stop adding .js to file paths so I don't have to hack around it?
thanks.
UPDATE: added some code samples as requested.
This is inside my HTML file (it's a Scala project so we can't write these variables directly into a .js file):
foo.js.modules = {
order : '#Static("javascripts/order.min.js")',
reqwest : 'http://5.foo.appspot.com/js/libs/reqwest',
bean : 'http://4.foo.appspot.com/js/libs/bean.min',
detect : 'order!http://4.foo.appspot.com/js/detect/detect.js',
images : 'order!http://4.foo.appspot.com/js/detect/images.js',
basicTemplate : '#Static("javascripts/libs/basicTemplate.min.js")',
trailExpander : '#Static("javascripts/libs/trailExpander.min.js")',
fetchDiscussion : '#Static("javascripts/libs/fetchDiscussion.min.js")'
mostPopular : '#Static("javascripts/libs/mostPopular.min.js")'
};
Then inside my main.js:
requirejs.config({
paths: foo.js.modules
});
require([foo.js.modules.detect, foo.js.modules.images, "bean"],
function(detect, images, bean) {
// do stuff
});
In the example above, I have to use the string "bean" (which refers to the require path) rather than my direct object (like the others use foo.js.modules.bar) otherwise I get the extra .js appended.
Hope this makes sense.
If you don't feel like adding a dependency on noext, you can also just append a dummy query string to the path to prevent the .js extension from being appended, as in:
require.config({
paths: {
'signalr-hubs': '/signalr/hubs?noext'
}
});
This is what the noext plugin does.
requirejs' noext plugin:
Load scripts without appending ".js" extension, useful for dynamic scripts...
Documentation
check the examples folder. All the info you probably need will be inside comments or on the example code itself.
Basic usage
Put the plugins inside the baseUrl folder (usually same folder as the main.js file) or create an alias to the plugin location:
require.config({
paths : {
//create alias to plugins (not needed if plugins are on the baseUrl)
async: 'lib/require/async',
font: 'lib/require/font',
goog: 'lib/require/goog',
image: 'lib/require/image',
json: 'lib/require/json',
noext: 'lib/require/noext',
mdown: 'lib/require/mdown',
propertyParser : 'lib/require/propertyParser',
markdownConverter : 'lib/Markdown.Converter'
}
});
//use plugins as if they were at baseUrl
define([
'image!awsum.jpg',
'json!data/foo.json',
'noext!js/bar.php',
'mdown!data/lorem_ipsum.md',
'async!http://maps.google.com/maps/api/js?sensor=false',
'goog!visualization,1,packages:[corechart,geochart]',
'goog!search,1',
'font!google,families:[Tangerine,Cantarell]'
], function(awsum, foo, bar, loremIpsum){
//all dependencies are loaded (including gmaps and other google apis)
}
);
I am using requirejs server side with node.js. The noext plugin does not work for me. I suspect this is because it tries to add ?noext to a url and we have filenames instead of urls serverside.
I need to name my files .njs or .model to separate them from static .js files. Hopefully the author will update requirejs to not force automatic .js file extension conventions on the users.
Meanwhile here is a quick patch to disable this behavior.
To apply this patch (against version 2.1.15 of node_modules/requirejs/bin/r.js) :
Save in a file called disableAutoExt.diff or whatever and open a terminal
cd path/to/node_modules/
patch -p1 < path/to/disableAutoExt.diff
add disableAutoExt: true, to your requirejs.config: requirejs.config({disableAutoExt: true,});
Now we can do require(["test/index.njs", ...] ... and get back to work.
Save this patch in disableAutoExt.diff :
--- mod/node_modules/requirejs/bin/r.js 2014-09-07 20:54:07.000000000 -0400
+++ node_modules/requirejs/bin/r.js 2014-12-11 09:33:21.000000000 -0500
## -1884,6 +1884,10 ##
//Delegates to req.load. Broken out as a separate function to
//allow overriding in the optimizer.
load: function (id, url) {
+ if (config.disableAutoExt && url.match(/\..*\.js$/)) {
+ url = url.replace(/\.js$/, '');
+ }
+
req.load(context, id, url);
},
The patch simply adds the following around line 1887 to node_modules/requirejs/bin/r.js:
if (config.disableAutoExt && url.match(/\..*\.js$/)) {
url = url.replace(/\.js$/, '');
}
UPDATE: Improved patch by moving url change deeper in the code so it no longer causes a hang after calling undef on a module. Needed undef because:
To disable caching of modules when developing with node.js add this to your main app file:
requirejs.onResourceLoad = function(context, map)
{
requirejs.undef(map.name);
};