When I am using ADVANCED_OPTIMIZATIONS in closure, I can add to the web.config attributes such:
<compilation debug="false">
and than when I will write in my code:
if (goog.DEBUG) { code }
on advanced mode I will NOT see this script inside the .js file.
I would like to do the same with my own properties - I've created a define.js file:
Define.js:
goog.scope(function() {
define.IS_SHOW_CODE = false;
}
and wrote code:
if (!define.IS_SHOW_CODE) { code }
and I still CAN find this if and its content inside the compiled .js file!
How to prevent the closure from compiling script in advanced mode?
If "goog" works, likely you are missing the declaration of "define".
It should look something like this:
var define = {}; // goog.provide('define') would also work here.
/** #define {boolean} */
define.IS_SHOW_CODE = true;
Ok i found how -
i MUST use the prefix goog.[xxx] in order to tell the compiler to remove the script inside.
using "define" instead didnt remove the script.
so i've changed the define.IS_SHOW_CODE to goog.IS_SHOW_CODE
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...
How can I set the scope of the defined variables for JSHint to my whole project in WebStorm?
If I have multiple files and imports like jquery or Backbone I don't need to see the error JSHint: 'Backbone' is not defined.(W117). This is not only form my imported libraries, but also for my own external files.
Some suggestions is that I should disable undefined errors, but this is the functionality that I want to use.
I.E.
In my main.js I have this:
function Main(){
// Some epic code
}
Main.prototype.theBestFunctionEver = function(awesome, stuff){
return awesome + stuff;
}
and in foo.js I have this:
function init(){
var main = new Main(); // Shows that Main is undefined
var wrongVar = 6 + unInited // This should always give me an error
// Rest of init
}
JSHint works on per-file basis and doesn't 'see' variables defined in other files unless they are added to 'global' list. This can be done by either adding the corresponding comments ('/* global MY_LIB*/ - see http://www.jshint.com/docs/) in code, or by adding variables/functions you'd like to use globally to the 'Predefined' list in Preferences -> Javascript -> Code Quality Tool -> JSHint -> Predefined (,separated).
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.
A small test app is set up like this:
init.js:
//#codekit-prepend "vendor/jquery-1.7.2.js"
//#codekit-prepend "vendor/underscore.js"
//#codekit-prepend "vendor/backbone.js"
// Setup namespace for the app
window.app = window.app || {};
//#codekit-append "models/Ride.js"
Ride.js:
(function() {
window.app.Ride = Backbone.Model.extend({
initialize: function() {
console.log("Ride initialized");
}
});
})();
CodeKit's JSHint check reports that both Backbone and console are not defined. What am I missing here?
JSHint doesn't run your code so it doesn't know about any modules you included in other files. You have to specifically tell it about all global variables you plan to use in Ride.js. In your case it will be: /*global Backbone */. console is disallowed by default because it is not a very good idea to ship your software with filled console.log calls. To remove this warning you can use /*jshint devel:true */.
So in the end your file should look like this to pass JSHint check:
/*jshint devel:true */
/*global Backbone */
(function() {
window.app.Ride = Backbone.Model.extend({
initialize: function() {
console.log("Ride initialized");
}
});
})();
More info here: http://www.jshint.com/options/
Bryan here. CodeKit does check your files in a full, global context. (That is, it combines them first, so variables declared in an earlier file will be valid in a later one. This assumes you use CodeKit to combine the files, either with #codekit-prepend/append statements or drag/drop import links set up in CodeKit itself). If you're combining your JS files some other way (such as a build script) then CodeKit is unaware that the files go together and therefore it checks each one separately.
You can use the comment flags in the answer above, or you can configure JSHint's options directly in CodeKit. See the preferences window (or project settings area, if your project uses project-level settings). You can also enter custom globals there as well, which will remove those warnings.
Cheers!
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.