Including Javascript Files (not module) in Kotlin - javascript

I have two Javascript files. I have some Kotlin code that generates a Javascript file. I also have a file (call it file.js) that depends on the generated javascript file from Kotlin.
Is there a way for me to include file.js in the Kotlin generated Javascript file using Gradle? Is there a setting that can append resource Javascript files into the generated output?
My motivation is to slowly transition my Javascript project into Kotlin, and due to the structure of the project, I cannot create a module. Just want to know if it is possible to do this and how.

You can use Gradle's Ant integration for that. Here's an example from Gradle forums:
task concat(type: SourceTask) {
source 'src'
include '**/*.txt'
outputs.file new File(buildDir, "full.txt")
doLast {
ant.concat(destfile: outputs.files.singleFile) {
source.addToAntBuilder(ant, 'fileset', FileCollection.AntType.FileSet)
}
}
}
This will concatenate a bunch of files into a single full.txt file - adapt it to your specific case and have the task execute prior to assembling your final build artifact.
I have to say that for Javascript builds Gradle's integration with tools like Gulp and Grunt (via plugins) may be an even better match for you - those tools can naturally handle simple JS file concatenation, but they also offer many more tasks useful for working with web technologies.

Related

Compile Typescript files into single js file without preliminaries

I'm pretty new to Typescript. I'm about to work on a Js project and I want to use Typescript because provides modularity features which helps me to maintain and develop the project more easily.
I put each class inside one single ts file and imported all of them in the main.ts file. I used --outFile flag to compile all of them into a single js file
but the problem is I want to finally compile them into a single js file and easily attach it to HTML file without any other preliminaries such as importing require.js! is there any way to do it without importing any other js files to the HTML document? if not, please suggest me an alternative way!
because I want to just compile all the stuff into one file like jquery.js file.
I used --outFile
Use outFile only if your code doesn't depend on any other library as it is straight concatenation.
the problem is I want to finally compile them into a single js file and easily attach it to HTML file without any other preliminaries such as importing require.js
This will only happen if you used a module aka import/export statement in your code. These require a module loader. outFile should not be used if you are using modules.
Thoughts
Personally I recommend commonjs with webpack
This is what I was looking for
https://www.typescriptlang.org/docs/handbook/gulp.html

Naming pattern for TypeScript compiled Javascript files

We recently created a Repository for a TypeScript project. We try to .ignore all generated files to keep our repository and build processes clean.
Currently our TypeScript files someFile.ts are compiled to JavaScript files someFile.js. We would like to ignore all compiled files. However, there are javascript files which we would like to track in our repository. This makes it impossible to simply ignore all src/**/*.js files.
Is there a way to add a prefix or postfix or other naming adjustment to the compiled javascript files as a compileOption? Something like file.compiled.js?
From the docs: http://www.typescriptlang.org/docs/handbook/compiler-options.html
You could use --listEmittedFiles and save the list of compiled files to .gitignore

JS Marko (raptor templates) load dynamic template path in browser

I am trying to use Marko templates in a web application, and would prefer to be able to load pre-compiled templates dynamically. My (weak) understanding is that the suggested raptor-optimizer does static analysis to load all of the templates (as does browserify), and so wouldn't be able to bundle templates only referenced dynamically.
Is it possible to do this without having to hard code every possible template path that I might be interested in? Is it possible to not have to surrender the concat and minify steps to raptor-optimizer/browserify?
first_tmpl = require('marko').load(require.resolve('./tmpl/first.marko'))
second_tmpl = require('marko').load(require.resolve('./tmpl/second.marko'))
https://github.com/raptorjs3/marko#browser-side-rendering
Out of the box, Browserify only supports static code analysis for discovering and bundling dependencies. The RaptorJS Optimizer supports both static code analysis and declarative dependencies inside optimizer.json files. The RaptorJS Optimizer also supports glob patterns so that you can do the following inside an optimizer.json file:
{
"dependencies": [
"**/*.marko"
]
}
In most cases it is better to rely on discovering required templates via static code analysis.
I hope that helps.
--Patrick

Compiling multiple Typescript files into one javascript file

I am using tsc.exe manually, is there a way for me to basically pass it a load of Typescript files under a root namespace and just compile it to a single namespace encapsulated js file?
I am thinking like how you have a .net dll which contains the root namespace and all children.
I managed to find some links after posting this:
TypeScript compiling as a single JS file
http://www.codebelt.com/typescript/typescript-compiler-commands/
Both of which helpped me, the actual answer is:
tsc.exe --out some_file.js some_ts_file.ts some_other_ts_file.ts

How to build Dojo into a single file, given a list of dependencies?

I have a simple Dojo application, that does only one require call, loading all the dependencies. The trouble is, while it is extremely simple, it still ends up loading ~100 files from server. I tried to solve that problem using Dojo build system, but seems I don't have a deep enough understanding.
So my question is - given a list of dependencies, like the following:
["dojo/parser",
"dijit/registry",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/dom-class",
"dojo/request",
"dijit/form/ValidationTextBox",
"dijit/form/Select",
"dijit/form/NumberSpinner",
"dijit/form/CheckBox",
"dijit/layout/ContentPane",
"dijit/Dialog",
"dojo/NodeList-traverse",
"dojo/domReady"]
how do I set up the build to create a single-file (or several-file, just not 100-file) dojo file?
If you're using Dojo's require() loader, there are build tools that you can use to combine files and minify. According to the site, the build tools aren't included in an official release, so you'll have to get them from the development version (specifically, look in the buildscripts directory).
The Dojo documentation contains some info on its build system that you may also find useful.
As a proof of concept, here are the steps I took:
Go to the download page, and download the Source Dojo Toolkit SDK (it's the only one that contains the util scripts needed for a build).
Extract to a location (for the sake of this post, let's say it's /opt/dojo-toolkit).
From the Dojo toolkit directory (i.e. /opt/dojo-toolkit), run the build util: ./util/buildscripts/build.sh action=release htmlFiles=/path/to/my/index.html (careful, this slowed my 5-year-old dual-core to a crawl)
Example of index.html (this one is exactly inside the dojo-toolkit directory):
...
<head>
<script src="dojo/dojo.js"></script>
<script>
dojo.require("my.test");
</script>
</head>
...
The require() call looks for nested modules (I couldn't get it to work with a top-level module), so in this case, I've got a my directory inside of dojo-toolkit which contains a test.js file. That file is the main "bootstrap" file which loads in all of the dependencies. I just put random require() calls in mine:
dojo.require('dijit.ProgressBar');
dojo.require('dijit.Tree');
And that should do it. Basically, running the build utility against your HTML file (the one that contains the reference to dojo.js) makes sure that all of the dependencies are found, starting from the top.
Note: the build system create a release directory with the built output, but it looks a little misleading at first - it appears to have minified each individual file, but if you look at your actual bootstrap file (my/test.js, in this case), it will be a combined, minified file with (I presume) everything you need to run your app.
Otherwise, if you're using AMD style require()'s (as in require.js), you can use its optimization tool. According to the site, it will:
Combine all dependent files (including require.js itself) into a single file. It analyzes the require() call to figure out which files it needs to combine.
Minify your JavaScript using either UglifyJS (default) or Closure Compiler.
I needed to do the same thing and this is how I solved it.
If you read the documentation about how to create custom builds (http://dojotoolkit.org/documentation/tutorials/1.8/build/), in the Layers section they talk about creating custom layers. You can add all the modules you need there. Here is an example of my custom layer file:
layers : {
"dojo/dojo" : {
include : [
"dojo/dojo",
"dojo/_base/window",//
"dojo/dom",//
"dojo/dom-class",//
"dojo/ready",//
"dojo/store/Memory"
],
customBase : true,
boot : true
}
}
What this will do is build only those modules into dojo.js, along with the bootstrap loader so that you can load other modules on the fly.

Categories

Resources