Closure Compiler: ERROR - cannot read - javascript

I downloaded Google Closure Compiler from official Google website (https://developers.google.com/closure/compiler/docs/gettingstarted_app). And then run it to minify my widget.js but i received the error below:
C:\Users\Administrator\Downloads\compiler-latest>java -jar
compiler.jar --js "wi dget.js" \ --js_output_file "output.js" ERROR -
Cannot read: \
1 error(s), 0 warning(s)
I tried to change my widget.js content, if the widget.js contain some syntax error it will tell me know. But it seem that the "error - CANNOT READ \" always show up even my widget.js is empty or just have a line alert('test');
How can i resolve that error?

You should run your compiler as following:
java -jar compiler.jar --js widget.js --js_output_file output.js
You can put multi js files and seperate by a space without double quote ("), single quote (') or slash (/) like your case.
Hope this help.

Related

js modules usage in a multi-page web app (Closure compiler)

I have a web app that contains several pages with some js files of shared code.
- common1.js
- common2.js
- page1.js
- page2.js
- page3.js
...
The shared files are loaded with page1 and, on a button click, the page changes to page2 or page3.
I use Closure Compiler and every page is a chunk.
--js "../common1.js" \
--chunk common1.min:1 \
--js "../common2.js" \
--chunk common2.min:1:common1.min \
--js "../page1.js" \
--chunk page1.min:1:common2.min \
--js "../page2.js" \
--chunk page2.min:1:common2.min \
All is working and the chunks are loaded correctly. (ADVANCED_OPTIMIZATIONS)
Unfortunately, I need to start using modules. I refactored the js files to use import/export.
The problem is that all code is moved on my entry point and the other chunks are empty.
--compilation_level ADVANCED_OPTIMIZATIONS \
--language_out ECMASCRIPT_2021 \
--dynamic_import_alias "dynamicImport" \
--chunk_output_type "ES_MODULES" \
--dependency_mode PRUNE_LEGACY \
--entry_point "${JS_PATH}/page1.js" \
EG: page2 and page3 are empty.
What am I doing wrong?
The only solution I've found is to build each page singularly. However, since many code is shared, the file output would be greater since the shared code cannot be used. (It is cached so there is no load time for it)
Each individual file is an individual entry point and you need to compile each of the files separately.
If they share common code, import them in their respective pages and compile the files separately.
If you need separate chunks with single entry point, try using the dynamic imports. This will create chunks as you expected.
Refer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports
Note: Webpack handles dynamic chunks well enough. However I didn't tested this with Closure.

Closure Compiler with Advanced Optimizations and Externs

I have downloaded the latest closure compiler jar file and followed the instructions here to see how I can get it to preserve references to JS functions defined elsewhere.
My test script, hello.js is as follows
function hello(nom)
{
alert(nom + familyName());
}
My externs are defined in the file externs.js which contains the code
function familyName(){}
I then issue the command
java -jar closure.jar --js hello.js --externs externs.js --js_output_file hello-compiled.js --compilation_level ADVANCED_OPTIMIZATIONS
Without ADVANED_OPTIMIZATIONS everything works correctly - effectively a spot of code minification. However, as soon as I put in the advanced flag the output hello_compiled.js comes out as an empty 1 byte file. Clearly, I am misunderstanding something somewhere. I'd be much obliged to anyone who might be able to put me on the right track here.
I suspect your hello.js only defines the hello function? If so, you need to add:
hello("foo");
so that something actually happens. You can try this out with the online closure compiler. The default code there is:
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');
If you comment out the last line and click the "advanced" button and compile, the result is successful but it is zero bytes. This is because that code effectively does nothing, so the compiler is doing the right thing.

How do I tell Closure Compiler to include all source files from a given directory only for modules?

I have a directory of scripts:
/scripts/module-foo.js
/scripts/module-bar.js
/scripts/site.js
/scripts/some_other_non_module_script.js
the two module scripts export modules:
goog.module('foo');
exports = 'foo';
And the site.js script includes them:
var foo = goog.module.get('foo');
I can get this to work fine if I manually specify each source file in the compiler command:
java -jar compiler.jar ... --js module-foo.js --js module-bar.js --js site.js
but I'm trying to avoid that. If I specify
--js ./**
It works, but I get the source from site.js as well as some_other_non_module_script.js in the same output file. I only want site.js
site.js will need to have a goog.provide statement itself - something like goog.provide('mysite'). Then you can use the --only_closure_dependencies and --closure_entry_point flags.
java -jar compiler.jar ... --js scripts/**.js --only_closure_dependencies
--closure_entry_point mysite
Learn about the Manage Closure Dependencies Flags

Closure Compiler - hybrid compilation for source using jQuery and Closure

I'm in the process of migrating a project from jQuery to Closure. I have some code that is only half-migrated that I would like to compile. The uncompiled source works fine. I want to know what compile command to compile it using SIMPLE_OPTIMIZATIONS.
The compile command for the original jQuery-based code was this:
java -jar ~/closure/closure-compiler/build/compiler.jar \
--js ~/Sites/mysite/js/bc_school6_2.js \
--js ~/Sites/js_common/bc.job_school.js \
--js ~/Sites/js_common/bc_help.js \
--js ~/Sites/js_common/validation.js \
--js ~/Sites/js_common/md5.js \
--js ~/Sites/js_common/chosen.jquery.js \
--js ~/Sites/js_common/jquery.reveal.js \
--js ~/Sites/js_common/printArea.js
> ~/Sites/mysite/js-minified/bc_school6_2s.js
The SIMPLE_OPTIMIZATIONS compile command for the source when it is fully migrated will be this (although the fully-migrated code will use ADVANCED_OPTIMIZATIONS):
closure-library/closure/bin/build/closurebuilder.py \
--root=closure-library/ \
--root=closure-templates/javascript/ \
--root=bc/ \
--namespace="bc.bc_school6_2" \
--output_mode=compiled \
--compiler_jar=closure-compiler/build/compiler.jar \
--compiler_flags="--compilation_level=SIMPLE_OPTIMIZATIONS" \
> ~/Sites/mysite/js-minified/bc_school6_2s.js
At present, the namespace is not properly set up in the source, so the latter compile process won't work properly.
Is it possible to compile the source using the Google Closure library, but then add in all my jQuery files from js_common folder? Can I do it in one compile command, or if not, can I compile my goog code, and then incorporate the jQuery material?
Thanks.
You can compile your goog code and then include the jQuery code as external code. This method will also let you compile your code in ADVANCED MODE and still be able to use jQuery in it's original form.
To do this, you will have to use a .js file that contains all of your extern declarations. Then you use the --externs flag to tell the closure compiler where to look for externs. See the sample usage below:
java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS \
--js makeallnotes.js --externs extern1.js --externs extern2.js
To find out more about how to declare externs, see this tutorial. Basically, they are used to tell the closure compiler about an external API or library you are using.
There is actually a jQuery extern file included with the Google Closure source code. Find the version of jQuery you are using on this page.
On a side note, I'd look into using Plovr to build your Closure Project. It lets you use a configuration a file to set all of your build parameters and will save a lot of time if you are building your code often.

Compress all file .js with Google Closure Compiler Application in one File

I would like to Compress all my file .js in a same directory in one file with Google Closure Compiler in a command line.
For one file it's :
java -jar compiler.jar --js test.js --js_output_file final.js
But I didn't find in the doc how put my other file at the end of final.js without write over the last compress file ?
I would like something like that :
java -jar compiler.jar --js --option *.js --js_output_file final.js
It's possible or must I do a programm who add all file in a file and after compress it ?
Thank you if you can help me !
java -jar path/to/closure-compiler/build/compiler.jar \
--js input_one.js \
--js input_two.js \
... \
--js_output_file compiled_output.js
I tried Orbits' answer, but It didn't really work perhaps the version I use is a newer version. The command I use is :
java -jar compiler.jar --js file1.js file2.js file3.js --js_output_file --js_output_file compiled_output.js.
Assuming that you’ve installed the Closure Compiler with Homebrew on a Mac, you can also concatenate all files and then pipe them to to Closure (this should also work the java -jar way, but I haven’t verified it):
cat $(ls scripts/*.js) | closure-compiler --js_output_file main.js
Here are five globbing techniques for including multiple input files, with documentation extracted from the CommandLineRunner class:
(1) This is a variation of muka's technique, removing the --js flag, which is not needed:
java -jar compiler.jar \
--js_output_file build/out.js `find ./src/*.js`
From the docs:
The --js flag name is optional, because args are interpreted as files by default.
This will include all .js files in /src/, but won't include any files in subdirectories of /src/.
(2) Similar to 1, but will include all .js files in /src/ and all its subdirectories:
java -jar compiler.jar \
--js_output_file build/out.js `find ./src/ -name '*.js'`
(3) Similar to 2, but uses xargs:
find ./src/ -name '*.js' \
| xargs java -jar compiler.jar \
--js_output_file build/out.js \
--manage_closure_dependencies
From the docs:
It is convenient to leverage the additional arguments feature when using the
Closure Compiler in combination with find and xargs:
find MY_JS_SRC_DIR -name '*.js' \
| xargs java -jar compiler.jar --manage_closure_dependencies
The find command will produce a list of '*.js' source files in
the MY_JS_SRC_DIR directory while xargs will convert them
to a single, space-delimited set of arguments that are appended to the
java command to run the Compiler.
Note that it is important to use the
--manage_closure_dependencies option in this case because the
order produced by find is unlikely to be sorted correctly with
respect to goog.provide() and goog.requires().
(4) The v20140625
release added support for the ** (globstar) wildcard, which recursively
matches all subdirectories.
For example, this will include all .js files in /src/ and all its subdirectories:
java -jar compiler.jar \
--js_output_file build/out.js './src/**.js'
More info here. From the docs:
You may also use minimatch-style glob patterns. For example, use:
--js='**.js' --js='!**_test.js'
to recursively include all js files that do not end in _test.js
From the Java docs:
The following rules are used to interpret glob patterns:
The * character matches zero or more characters of a name component without crossing directory boundaries.
The ** characters matches zero or more characters crossing directory boundaries.
(5) The v20140625
release also added a new feature: if the input path is a directory, then all .js files
in that directory and all subdirectories will be included.
For example, this will include all .js files in /src/ and all its subdirectories:
java -jar compiler.jar \
--js_output_file build/out.js './src/'
More info here.
You can use KjsCompiler: https://github.com/knyga/kjscompiler
. Compiles multiple JavaScript files with Google Closure Compiler application in a right order
How to solve your problem:
1. Add annotations to js files, like this:
/**
* #depends {lib/somefile.js}
**/
If you do not care about compilation chain, you can ignore this step.
2. java -jar kjscompile.jar
You can look for example here: https://github.com/knyga/kjscompiler/tree/master/examples
<exec executable="java">
<arg line="-jar ../lib/compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --language_in ECMASCRIPT5 --js_output_file=${compressdir}/js/controllers/jscontrollersfiles.js ${webappdir}/js/controllers/*.js" />
</exec>
The github of google closure doc gives the below command.
If you have multiple scripts, you should compile them all together with one compile command.
java -jar compiler.jar --js_output_file=out.js in1.js in2.js in3.js ...
You can also use minimatch-style globs.
# Recursively include all js files in subdirs
java -jar compiler.jar --js_output_file=out.js 'src/**.js'
# Recursively include all js files in subdirs, excluding test files.
# Use single-quotes, so that bash doesn't try to expand the '!'
java -jar compiler.jar --js_output_file=out.js 'src/**.js' '!**_test.js'
Source : https://github.com/google/closure-compiler#compiling-multiple-scripts

Categories