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
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
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
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
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.