2016-05-02 17 views
1

Hallo ich einige Dart zu lernen und im neu in diesem Forum als gut gestartet,Wie einen dartscript auf Ihrer Website verwendet

ive erstellt die ubersimple Webapp, mit WebStorm und geschrieben, um einen wirklich einfachen Dart-Skript und einen HTML-Dokument.

der Kopf von meinem html doc:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="scaffolded-by" content="https://github.com/google/stagehand"> 
    <title>Das bist du!</title> 
    <script defer src="http://das-bist-du.com/main.dart" type="application/dart"></script> 
    <script defer src="http://das-bist-du.com/packages/browser/dart.js"> </script> 
</head> 

<body> 
</body> 
</html> 

der Dart-Code:

import 'dart:html'; 
import 'dart:math'; 

ButtonElement rndButton; 
ImageElement rndImage; 
var images; 
var rng; 

void main() { 
    rndButton = querySelector('#rndButton'); 
    rndImage = querySelector('#imgScreen'); 

    images = ['http://das-bist-du.com/onewebmedia/anN0MBo_700b.jpg', 'http://das-bist-du.com/onewebmedia/du1.jpg', 'http://das-bist-du.com/onewebmedia/du2.jpg', 'http://das-bist-du.com/onewebmedia/du3.jpg', 'http://das-bist-du.com/onewebmedia/du3.jpg', 'http://das-bist-du.com/onewebmedia/du4.jpg', 'http://das-bist-du.com/onewebmedia/du5.jpg', 'http://das-bist-du.com/onewebmedia/du6.jpg']; 
    rndButton.onClick.listen(pickYou); 
} 
void pickYou (Event e) { 
    rng = new Random(); 
    setYou(rng.nextInt((images.length))); 
} 

void setYou (var rnd) { 
    print(images[rnd].toString()); 
    rndImage.src = (images[rnd].toString()); 
} 

Ich weiß, dass der Code nicht schön ist und alles, ich war nur Dinge testen. :)

Jetzt möchte ich beide auf einer Website verwenden, habe ich die HTML-Seite den Code und die dart.js auf die Website hochgeladen und legte die src in der HTML-Skript-Tag.

Beim Testen in Webstorm mit Chromium funktioniert es. Aber das Skript läuft nicht auf der Website. Wie kann ich Dart online auf einer Website verwenden? in jedem Browser außer Dartium (der Chomium basiert Dart Entwicklung Browser, der die Dart VM enthält) nicht direkt

Vielen Dank im Voraus

Antwort

1

Dart laufen.

Wenn Sie pub build in Ihrem Projektverzeichnis ausführen (wo die pubspec.yaml ist), die Sie dann eine Ausgabe in build Unterverzeichnis erhalten, die auf dem Web-Server für die öffentliche Nutzung hochgeladen werden kann.

Es ist auch ein Transformator verfügbar, der die Skript-Tags optimiert, wenn pub build ausgeführt wird. https://pub.dartlang.org/packages/dart_to_js_script_rewriter

+0

Also gibt es keine Möglichkeit, die Dart vm online zu verwenden? Ich habe versucht, meinen Dart-Code in js mit dsrt2js umzuwandeln, das Ergebnis waren 8000 Zeilen Code, also denke ich, dass ich etwas falsch gemacht habe. Ich werde versuchen, das Pub bauen später danke – RedStriped

+0

'Pub Build' verwendet 'dart2js' unter der Haube. Vielleicht wurde der Output nicht minimiert. Dart muss zusätzlich zu dem Code, den Sie selbst geschrieben haben, standardmäßig Code enthalten, da er viele zusätzliche Funktionen für die Browser-Abstraktion (wie jQuery) und andere Dinge bietet. Daher werden Sie keine 15 Zeilen JS erhalten, auch wenn das Dart-Beispiel nur eine "Hallo Welt" ist. –

+0

Sie können die Dart-VM nicht online verwenden. Dartium soll nicht in der Produktion verwendet werden und kein anderer Browser unterstützt Dart direkt. Das war vor einiger Zeit geplant, aber diese Pläne wurden vor einem Jahr aus verschiedenen Gründen fallen gelassen. –

Verwandte Themen