Concatjs is a JavaScript bundler, in a trivial sense: the UNIX cat command is a basic implementation:
$ cat one.js two.js > bundle.js
Clearly self-evident is that this bundler is super-fast and simple. A performant implementation adds some in-memory caching, and for developer ergonomics you add a simple IIFE wrapper around each file so that the Chrome DevTools shows the files in the tree as if they had been independently loaded.
However at its core, concatjs requires a big tradeoff of a migration cost to buy-in, to get this incredible performance. The path of the JavaScript files is lost in the bundling process, so they must contain their module ID internally.
Named AMD/UMD (non-anonymous require.js modules) and goog.module are the two JS module formats that are compatible with concatjs. Most packages do not ship with this format, so in order to use concatjs tooling, you have to shim your code and dependencies.
This is at the core of how Google does JavaScript development. So Bazel rules that originated in Google's codebase, such as ts_library depend in some ways on producing concatjs output.
There are two choices for development mode:
concatjs_devserver rule to bring up our simple, fast development server. This is intentionally very simple, to help you get started quickly. However, since there are many development servers available, we do not want to mirror their features in yet another server we maintain.concatjs_devserver supports. Be careful that your development round-trip stays fast (should be under two seconds).To use concatjs_devserver, you simply load the rule, and call it with deps that point to your ts_library target(s):
load("@npm//@bazel/typescript:index.bzl", "concatjs_devserver", "ts_library") ts_library( name = "app", srcs = ["app.ts"], ) concatjs_devserver( name = "devserver", # We'll collect all the devmode JS sources from these TypeScript libraries deps = [":app"], # This is the path we'll request from the browser, see index.html serving_path = "/bundle.js", # The devserver can serve our static files too static_files = ["index.html"], )
The index.html should be the same one you use for production, and it should load the JavaScript bundle from the path indicated in serving_path.
If you don't have an index.html file, a simple one will be generated by the concatjs_devserver.
See examples/app in this repository for a working example. To run the devserver, we recommend you use ibazel:
$ ibazel run examples/app:devserver
ibazel will keep the devserver program running, and provides a LiveReload server so the browser refreshes the application automatically when each build finishes.
USAGE
concatjs_devserver is a simple development server intended for a quick “getting started” experience.
Additional documentation at https://github.com/alexeagle/angular-bazel-example/wiki/Running-a-devserver-under-Bazel
ATTRIBUTES
(Name, mandatory): A unique name for this target.
(List of strings): Additional root paths to serve static_files from. Paths should include the workspace name such as ["__main__/resources"]
Defaults to []
(List of labels): Scripts to include in the JS bundle before the module loader (require.js)
Defaults to []
(List of labels): Targets that produce JavaScript, such as ts_library
Defaults to []
(Label): Go based devserver executable.
With cross-platform RBE for OSX & Windows ctx.executable.devserver will be linux as --cpu and
--host_cpu must be overridden to k8. However, we still want to be able to run the devserver on the host
machine so we need to include the host devserver binary, which is ctx.executable.devserver_host, in the
runfiles. For non-RBE and for RBE with a linux host, ctx.executable.devserver & ctx.executable.devserver_host
will be the same binary.
Defaults to precompiled go binary setup by @bazel/typescript npm package
Defaults to @npm//@bazel/devserver:devserver
(Label): Go based devserver executable for the host platform. Defaults to precompiled go binary setup by @bazel/typescript npm package
Defaults to @npm//@bazel/devserver:devserver_darwin_amd64
(String): The entry_module should be the AMD module name of the entry module such as "__main__/src/index". concatjs_devserver concats the following snippet after the bundle to load the application: require(["entry_module"]);
Defaults to ""
(Integer): The port that the devserver will listen on.
Defaults to 5432
(List of labels): User scripts to include in the JS bundle before the application sources
Defaults to []
(String): The path you can request from the client HTML which serves the JavaScript bundle. If you don't specify one, the JavaScript can be loaded at /_/ts_scripts.js
Defaults to "/_/ts_scripts.js"
(List of labels): Arbitrary files which to be served, such as index.html. They are served relative to the package where this rule is declared.
Defaults to []