Compiling your app to JavaScript_Dart Cookbook-QQ阅读男生科幻网

上QQ阅读APP看书，第一时间看更新

Compiling your app to JavaScript

Deploying a Dart app in a browser means running it in a JavaScript engine, so the Dart code has to first be compiled to JavaScript. This is done through the dart2js tool, which is itself written in Dart and lives in the bin subfolder of dart-sdk. The tool is also nicely integrated in Dart Editor.

How to do it...

Right-click on .html or the .dart file and select Run as JavaScript.
Alternatively, you can right-click on the pubspec.yaml file and select Pub Build (generates JS) from the context menu. You can also click on the Tools menu while selecting the same file, and then on Pub Build.

How it works...

The first option invokes the pub serve command to start a local web server invoking dart2js along its way in the checked mode. However, the compiled .dart.js file is served from the memory by the internal development web server on http://127.0.0.1:4031. This is only good for development testing.

In the second option, the generated files are written to disk in a subfolder build/web of your app. In this way, you can copy this folder to a production web server and deploy your web app to run in all the modern web browsers (you only need to deploy the .js file, not the .precompiled.js file or the .map file). However, Pub Build in Dart Editor enables the checked mode by default; use the pub build command from a console for the production mode.

There's more...

The dart2js file can also be run from the command line, which is the preferred way to build non-web apps.

Tip

The command to compile the dart script to an output file prorabbits.js using -o <file> or -out <file> is dart2js -o prorabbits.js prorabbits.dart.

If you want to enable the checked mode in the JavaScript version, use the –c or - checked option such as dart2js –c -o prorabbits.js prorabbits.dart. The command dart2js –vh gives a detailed overview of all the options.

The pub build command, issued on a command line in the folder where pubspec.yaml is located, will do the same as in option 2 previously, but also apply the JavaScript shrinking step; the following is an example output for app test_pub:

f:\code\test_pub>pub build

Loading source assets... (0.7s)

Building test_pub... (0.3s)

[Info from Dart2JS]:

Compiling test_pub|web/test.dart...

[Info from Dart2JS]: Took 0:00:01.770028 to compile test_pub|web/test.dart. Built 165 files to "build"

You can minify both the JavaScript version and the Dart version of your app.

Producing more readable JavaScript code

To produce more readable JavaScript code (instead of the minified version of the production mode, refer to the Shrinking the size of your app recipe), use the command pub build --mode=debug, which is the default command in Dart Editor.

Alternatively, you can add the following transformers section to your app's pubspec.yaml file:

name: test_pub
description: testing pub

transformers:
- $dart2js:
  minify: false
  checked: true

dependencies:
  js: any

dev_dependencies:
  unittest: any

Note

For more information, refer to https://www.dartlang.org/tools/pub/dart2js-transformer.html.

Producing a single Dart file

The dart2js tool can also be used as Dart to Dart to create a single .dart file that contains everything you need for the app with this command:

dart2js --output-type=dart --minify -oapp.complete.dart app.dart

This takes the Dart app, tree shakes it, minifies it, and generates a single .dart file to deploy. The advantage is that it pulls in dependencies like third-party libraries and tree shakes it to eliminate the unused parts.