[TypeScript] 1 asset handling for [Play 2.1.x and 2.2.x] 2, implemented as an [sbt] 3 plugin (very similar to Play's handling of CoffeeScript and LESS).
The plugin uses TypeScript compiler executable - tsc
- which should added to your PATH.
Recommended way to install it in your system is, with node.js and npm installed, run:
npm install -g typescript
You really should put -g
option, thereby installing not only the module, but also the executable.
Using version 0.9.1.1 of tsc
is highly recommended.
If you already have an installation of tsc
but have forgotten its version, run:
tsc --version
To update your tsc
to the latest version, run:
npm update -g typescript
In your Play application folder, add
addSbtPlugin("com.github.mumoshu" % "play2-typescript" % "0.3.0-RC1")
to project/plugins.sbt
.
The plugin automatically registers for compilation of app/assets/**/*.ts
, that is all typescript files in your app/assets
directory.
If you are confused about how the *.ts files are placed exactly, take a look at example Play2 projects under src/sbt-test
.
TypeScript modules requires CommonJS module support on runtime.
Fortunately, play2-typescript is by default integrated with Play's RequireJS support. It means that every dependency between output JavaScript files is managed by RequireJS, both in DEV and PROD mode. In DEV mode, JavaScript files required by the main source are dynamically and asynchronously downloaded by RequireJS, while in PROD mode they are pre-compiled altogether that the main source is concatenated with its depending files and minified.
compile:resource-generators
: The typescript file watcher is being added hereplay-typescript-entry-points
: All files matchingapp/assets/**/*.ts
, except files starting in an underscoreplay-typescript-options
: A sequence of strings passed to typescript as command-line flags
It's a pain to debug your actual TypeScript code through the glass: JavaScript sources presented by the compiler.
We really should always serve sourcemaps for our TypeScript sources in DEV mode. The goal is that we could just see the original TypeScript source for each served JavaScript source, using Google Chrome, opening 'Sources' tab in Developer Tools.
Q. How do we setup our own Travis CI build?
A. There are two properties you must customize in .travis.yml
- addons.sauce_connect.username
- addons.sauec_connect.access_key
For the latter, we should encrypt it to prevent our OpenSauce account from abuses. To do this, run the below command in our project directory:
travis encrypt --add addons.sauce_connect.access_key THE_ACCESS_KEY
Assuming a .travis.yml file which contains:
addons:
sauce_connect:
username: mumoshu
The command will add our access key encrypted to our .travis.yml file like:
addons:
sauce_connect:
username: mumoshu
access_key:
secure: mgjauzNcJeW2co5Am4IqPgaR8CJsGZIQca4M7mZj1z+XlRIE4bw5PNmIk7coNj5/FWSmxlgT1vdK2G2pj4R2u+pl89zdeoBaLSffrFa0sHa2IOg6+UZiAB0EYUACChO9A8gVXd78n/zq52Q0Kj38SjsFnj/G/EsN7zbPqbY0Uis=
This plugin is based on Juha Litola's [play-sass][play-sass] plugin for handling Sass assets.
Copyright (c) 2013 KUOKA Yusuke
Apache v2 licensing, for details see file LICENSE.