目录

Contents

Dart 1 Web 应用迁移到 Dart 2

本文将向你阐述迁移 Dart 1.x Web 应用到 Dart 2 的相关信息。这些迁移变化是必须的因为:

This page has information on migrating your Dart 1.x web app to Dart 2. These changes are necessary because of the following:

工具

Tools

Dart 2 的 Web 应用开发环境与 Dart 1.x 不同。以下是重点:

The development environment for web apps is different in Dart 2 from Dart 1.x. Here are the highlights:

Dart 1.x Dart 2
Dartium, content shell Chrome and dartdevc
Dartium, content shell Chrome 和 dartdevc
pub build webdev build
pub serve webdev serve
pub run angular_test pub run build_runner test -- -p chrome.
pub transformers build package transformers. See: Transforming code

代码

Code

为了迁移到 Dart 2,你需要编辑你 Web 应用项目的一些文件:

To migrate to Dart 2, you’ll need to edit your web app’s project files:

你可以对比 4.xmaster 分支的任意示例应用来获取完整的迁移示例,比如这些:

For complete examples of migrating apps, look at the files changed between the 4.x and master branches of the following apps:

Pubspec 文件

Pubspec

修改你 pubspec.yaml 文件的这些部分:

Make these changes to your pubspec.yaml file:

  • Add new dev_dependencies:

  • dev_dependencies 添加新的节点:

    • build_runner:
    • build_test: ,如果你正在运行测试

      build_test: , if you are running tests

    • build_web_compilers:
  • 删除 dev_dependencies 中的下列节点:

    Drop dev_dependencies:

    • browser
    • dart_to_js_script_rewriter
  • 更新到 测试 版本 0.12.30 或更高;其会默认运行 Chrome 测试。

    Upgrade to test version 0.12.30 or later; it runs Chrome tests headless by default.

  • 删除所有的 转换器:

    Drop all transformers:

    • angular
    • dart_to_js_script_rewriter
    • test/pub_serve

例如,angular-examples/quickstart/pubspec.yaml 是一个应用了这些差异修改的示例。

For example, look at the differences in the Quickstart example’s pubspec with these changes applied.

带脚本元素的 HTML

HTML with script elements

web/index.html 文件是一个使用了 <script> 元素的最常见栗子。你需要作出以下修改:

The most common example of a file with <script> elements is web/index.html. You’ll need to make these changes:

  • 删除 <script defer src="packages/browser/dart.js"></script>

    Drop <script defer src="packages/browser/dart.js"></script>

  • 替换为 <script defer src="foo.dart" type="application/dart"></script>
    <script defer src="foo.dart.js"></script>

    Replace <script defer src="foo.dart" type="application/dart"></script> by
    <script defer src="foo.dart.js"></script>

比如,查看这个 快速入门范例的 web/index.html 页面 在应用这些变化后的差异。

angular-examples/quickstart/web/index.html 中向你展示了如何应用这些更改。

For example, look at the differences in the Quickstart example’s web/index.html page with these changes applied.

其他资源

Additional resources

Dart 2 迁移指南 中有关于 Dart 2 变化的信息,以及如何从 Dart 1.x 版本迁移你的代码。

The Dart 2 migration guide has information about changes in Dart 2, and how to migrate your code from Dart 1.x.