Compiling to JavaScript with dart2js
The tool provided to compile Dart down into JavaScript is dart2js. The dart2js compiler can be found among the Dart software development kit builds.[11] The SDK are the ones with “sdk” in the filename (as opposed to the “editor” builds that include the editor in addition to the SDK).
We see that, once unzipped, the SDK contains the entire Dart library (core, html, io, json).
| | +-- bin |
| | +-- dart |
| | +-- dart2js |
| | +-- dartanalyzer |
| | +-- dartdoc |
| | +-- pub |
| | +-- include |
| | +-- lib |
| | | +-- async |
| | | +-- chrome |
| | | +-- collection |
| | | +-- convert |
| | | +-- core |
| | | +-- html |
| | | +-- indexed_db |
| | | +-- io |
| | | +-- isolate |
| | | +-- js |
| | | +-- json |
| | | +-- math |
| | | +-- mirrors |
| | | +-- svg |
| | | +-- typed_data |
| | | +-- utf |
| | | +-- web_audio |
| | | +-- web_gl |
| | | +-- web_sql |
| | +-- util |
In addition to the core Dart libraries, the SDK contains library code to support documentation (dartdoc) and compiling to JavaScript (dart2js).
Using dart2js could not be more basic. It takes a single command-line argument—the Dart filename. There is also a single command-line option that can be used to set the filename of the resulting JavaScript (out.js by default):
| | $ dart2js -omain.dart.js main.dart |
There is no output from the compiler indicating success, but we now have a nice little JavaScript version of our script.
| | $ ls -lh |
| | -rw-r--r-- 1 chris chris 33 Feb 17 12:47 main.dart |
| | -rw-r--r-- 1 chris chris 7.2K Feb 17 12:47 main.dart.js |
Well, maybe it’s not “little.”
If there are errors in the Dart code being compiled, dart2js does a very nice job of letting us know where the errors occur.
| | $ dart2js main.dart |
| | main.dart:5:3: Warning: Cannot resolve "document". |
| | document.query('#foo'); |
| | ^^^^^^^^ |
One thing to bear in mind when compiling JavaScript is that dart2js works only at the application level, not the class level. Consider the situation in which we are converting our comic book collection application to follow a hip MVC pattern.
| | comics.dart |
| | Collection.Comics.dart |
| | HipsterModel.dart |
| | Models.ComicBook.dart |
| | Views.AddComic.dart |
| | Views.AddComicForm.dart |
| | Views.ComicsCollection.dart |
There is no way to compile individual classes into usable JavaScript.
| | $ dart2js Models.ComicBook.dart |
| | Models.ComicBook.dart:1:1: Error: Could not find "main". |
| | library models_comic_book; |
| | |
| | Error: Compilation failed. |
If the script containing the main entry point references the other libraries or if those libraries reference other libraries, then everything will be slurped into the resulting JavaScript. The three libraries referenced in the following import statements will be pulled into the compiled JavaScript:
| javascript/web/scripts/comics.dart | |
| | import 'Collections.Comics.dart' as Collections; |
| | import 'Views.Comics.dart' as Views; |
| | main() { |
| | // ... |
| | } |
Similarly, the ComicBook model will also be included in the dart2js-generated JavaScript by virtue of being referenced in the collection class.
| javascript/web/scripts/Collections.Comics.dart | |
| | library comics_collection; |
| | |
| | import 'HipsterCollection.dart'; |
| | import 'Models.ComicBook.dart'; |
| | |
| | class Comics extends HipsterCollection { |
| | // ... |
| | } |
At some point, it might be nice to write classes in Dart and compile them into usable JavaScript. For now, however, we are relegated to compiling entire applications, not pieces.