Closure compiler skip file - javascript

I have a shell script that collects all the .js files on a page and concats them to be compiled using the closure compiler. However, I don't want a specific js file to optimized any via the compiler. For example, I have the command to compile fileA.js, fileB.js, and fileC.js. How do I notate to skip fileB.js but still place it in the output file scripts.min.js in the correct order? So, fileA.js and fileC.js would be optimized using SIMPLE_OPTIMIZATION and fileB.js wouldn't be touched. Is there a keyword I can place in the comments of the file itself that says, skip this file?
java -jar compiler.jar --js=fileA.js --js=fileB.js --js=fileC.js --js_output_file=scripts.min.js

If I understand your intent here, you may consider processing each file that you want to minify separately, then performing the concatenation as a separate step. In pseudo-code:
minify fileA.js
minify fileC.js
cat fileA.js fileB.js fileC.js >scripts.min.js

There is no keyword that you can place in any scope to say "ignore me". nullptr has the right suggestion. In our project we have created some simple preprocessing comments and use them to control the flow. However, you can only ignore and include a file before the minified code or after the minified code if you want to do it in one pass. So, nullptr's solution is the only one. Remember to use extern files so variable renaming (and not renaming) works properly.

Related

How to use d.ts file for intellisense in VS Code similar to NPM approach

I have a nodejs project (in JS). Unfortunately, I have to utilize a lot of node global variables.
Everything works fine (even a lot of people are suggesting not to use globals) except thing:
There is no intellisense for globals. So every time I want to use, let's say, global function/object I need to look in its code and figure out what are the
parameters, what does it return, etc.
Let's say I have a global variable which is a pure object:
foo = {
bar: {
level2: {
level3: {
level4: "abc
}
}
}
}
It's quite annoying to deal with it since I can't "see" the structure of the object when using it and it's easy to make a mistake when writing code.
The reason why I posted this question is the ...npm packages
There are plenty of packages written in vanilla JS and most of them are utilizing the power d.ts files.
Once you install the package you can use it from any place in your projects and VS code will have intellisense for them. If you will click on tooltip (IDK how it's called... Type definition tooltip?) of VS code
you will be navigated to the d.ts file of the package (not the actual implementation of the command).
So my question is how to do the same in my project. I'm not going to publish it as npm I just want a d.ts file somewhere in the project so I can
use my global without looking into its implementation every time I need to recall what it does.
Let inside your .d.ts file be anything
To access variables, functions, interface add this line in your .ts file, VS code IntelliSense will suggest you
/// <reference path="./test.d.ts" />
If you want to use this test.d.ts all over your project not just on any particular file. Then add this line in tsconfig.json
"files" : [ "./src/test.d.ts" ]
Update as mentioned in the comment section
my js file which I am assuming similar to what you are trying to do
export const testString = 'aditya';
in your js file you
/// <reference path="test.js" />
Regardless of if it is possible or not, the worst drawback of what you are looking for is that the declaration file(s) must be kept updated by hand each time a global variable/function is changed.
There are plenty of packages written in vanilla JS and most of them are utilizing the power d.ts files.
Usually .d.ts files are not written by hand, but are produced by tsc: many of the packages you are speaking about are probably written in TypeScript and distributed as JavaScript packages (to be used in JavaScript projects as well) with an associated index.d.ts file (to be used in TypeScript projects)
even a lot of people are suggesting not to use globals
+1

Run java script file created by Emscripten from another java script file

Here is the task:
I want to run .js file which was created by Emscripten from .cpp file, from another .js file.
i.e.: I have ping.cpp file, which simply displays text "ping". I use Emscripten to create ping.js To do it, I type em++ ping.cpp and here it is - ping.js.
Now I can run it using node ping.js, but I want it to run from my second .js file which is called init.js and I can't understand how should I do it. Because ping.js doesn't have main functions which display "ping" and which I can call from another .js file or for example .html file, instead of this it has 68500 lines of code.
So, is there any chance for me to run ping.js from init.js?
You should probably load your ping.js file with a script tag in your HTML file, just like any other script. The trick is to make sure that you make any functions you want to use accessible to OTHER scripts that you load. To do so, you need to set an EXPORTED_FUNCTIONS compilation flag to indicate which function names you want to preserve. Specifically
em++ -s EXPORTED_FUNCTIONS="['_ping']" ping.cpp -o ping.js
Note the underscore ('_') that needed to be added in front of the function name to compensate for name mangling.
In the other JS file where you want to use ping, you need to set it up. Make sure the compiled script loads first, and then do:
ping = Module.cwrap('ping', 'null', ['string']);
This will then allow you to use ping, assuming it has a void return type (hence the null) and a single c-style string argument (hence the ['string']).
If you really do want to load it from another JavaScript file, see this answer:
How do I include a JavaScript file in another JavaScript file?

How to use use external js in typescript

I Generate the Angular JS code through the Typescript code. In one situation, I need to add external JS file to my typescript file and need to access the classes in the js file.
I add that js file like this.
/// <amd-dependency path="../../vendor/tweenMax.js" />
But still the typescript file can not identify the objects of that javascript file.
If someone knows the suitable way, please add your answer. (I'm using min. js file)
You need a .d.ts file (TypeScript definition file) for any non-TypeScript packages. The dependency references are only for TypeScript files (not plain js).
https://github.com/borisyankov/DefinitelyTyped
If a .d.ts file does not exist for your addin you can simply define an interface for it yourself (so that it thinks it exists).
It is purely for the strong-typing that it needs any definition, otherwise you can just cast your variable with <any> and call anything on it (whether it exists or not, just like normal JS) :)

How can typescript generate single one javascript file without reference typescript file code

Can typescript generate single one javascript file without reference typescript file code?
Here are two typescript source files.
Class source1{...};
Class source 2{...};
Here are another two typescript files.
///reference path=’source1’
Class reference1{...};
///reference path=’source2’
Class reference2{...};
I will generate reference1 and reference2 to single one js file.
But in the js file, there are source1 and source2 code.
How can I get single javascript file without souce1 and soucre2 code?
Thanks.
Looks to me that you need to split your compilation into two phases, one to generate soruce1 and soruce2, and another one to generate reference1 and reference2. The best way to do this is to generate a .d.ts from the first batch of files then reference that in your second compilation.
to generate sources.d.ts:
tsc --declaration --out soruces.js soruce1.ts source2.ts
now your files should look like:
///reference path=’sources.d.ts’
Class reference1{...};
///reference path=’source.s.ts’
Class reference2{...};
the second compilation would be:
tsc --out references.js reference1.ts reference2.ts
You are asking the compiler to do conflicting things.
If you want a single output file, you use the flag:
tsc --out single.js app.ts
This tells the compiler to walk any dependencies, combine the output in the correct order and save it in single.js
If you don't want a single file, you leave out the flag and each TypeScript file will be paired with its output JavaScript file.
You are asking if you can combine files without including referenced files - that isn't possible.

How do I split my javascript into modules using Google's Closure Compiler?

I want to use the google closure compiler on the javascript source we're using.
In development mode we tend to break functionality to lots of files but for production would like to have them combined into modules.
When calling the compiler I can give it a list of files to include for compilation, but the output of that shows that the compiler did not save the order of the files list.
I searched about it and found that I can use goog.provide/good.require in order to control the dependencies between the different js files.
The problem with that is that it adds code to my js which I just don't need or want, for example:
goog.provide("mainFile")
will add this:
var mainFile = {};
to the compiled js file, something that I don't want.
We're not using the google closure library at all, all I want to use is the compiler.
Is there a way to tell the compiler the order of the files without including more "closure library" functionality which I have no need for?
I can of course create a tool of my own which will first take all the files, combine them into one which will then be the input of the compiler, but I would prefer to void that if it can be done by the compiler itself.
Edit
The goal is to be able to produce modules like the answer in this thread: Using the --module option in Closure Compiler to create multiple output files
And so I want to add to that the ability to control which files go into which module while also having control on their order.
For now I don't use wildcards, but I plan to do so in the future (if it's possible).
simply "cat file1.js file2.js > combined.js && compile..." is fine, but in our case it's a bit more complicated and we'll have to write a program/script that does that based on some logic.
If we can somehow tell the compiler the order of the files in advanced it might just save the time of implementing such a program.
Thanks.
Closure-compiler's ability to create multiple output files provides a powerful tool to separate input files into distinct output chunks. It is designed such that different chunks can be loaded at differing times depending on the features required. There are multiple compiler flags pertaining to chunks.
Each use of the --chunk flag describes an output file and it's dependencies. Each chunk flag follows the following syntax:
--js inputfile.js
--chunk name:num_files:dependency
The resulting output file will be name.js and includes the files specified by the preceding --js flag(s).
The dependency option is what you will be most interested in. It specifies what the parent chunk is. The chunk options must describe a valid dependency tree (you must have a base chunk).
Here's an example:
--js commonfunctions.js
--chunk common:1
--js page1functions.js
--js page1events.js
--chunk page1:2:common
--js page2function.js
--chunk page2:1:common
--js page1addons.js
--chunk page1addons:1:page1
In this case, you are telling the compiler that the page1 and page2 chunks depend on the common chunk and that the page1addons chunk depends on the page1 chunk.
Keep in mind that the compiler can and does move code from one chunk into other chunk output files if it determines that it is only used by that chunk.
None of this requires closure-library or the use of goog.require/provide calls nor does it add any code to your output. If you want the compiler to determine dependencies automatically or to be able to manage those dependencies for you, you'll need to use a module format such as CommonJS, ES2015 modules or goog.require/provide/module calls.
Update Note: Prior to the 20180610 version, the chunk flags were named module. They were renamed to reduce confusion with proper JS modules. The answer has been updated to reflect the new names.
Update Note 2: There is now a utility to automatically calculate and generate these flags for you: https://github.com/ChadKillingsworth/closure-calculate-chunks
You can also set the output path, for example with:
--module_output_path_prefix ./public/js/
See also:
Using the --module option in Closure Compiler to create multiple output files

Categories