zwitterion
1.0.0
Ein Web -Dev -Server, auf dem Sie alles importieren können*
* Wenn Sie mit irgendetwas meinen: JavaScript ES2015+, TypeScript, JSON, JSX, TSX, Assemblyscript, Rost, C, C ++, WebAssembly und in Zukunft alles, was JavaScript oder WebAssembly kompiliert.
Zwitterion ist ein sofortiger Ersatz für Ihren aktuellen Webentwicklungs -Dateiserver.
Produktionsbereitstellungen sind auch durch den statischen Build möglich.
Zum Beispiel können Sie Dinge wie Folgendes schreiben und es funktioniert nur:
./index.html :
<!DOCTYPE html >
< html >
< head >
< script type =" module " src =" app.ts " > </ script >
</ head >
< body >
This is the simplest developer experience I've ever had!
</ body >
</ html > ./app.ts :
import { getHelloWorld } from './hello-world.ts' ;
const helloWorld : string = getHelloWorld ( ) ;
console . log ( helloWorld ) ; ./hello-world.ts :
export function getHelloWorld ( ) : string {
return 'Why hello there world!' ;
}Wirklich, es funktioniert einfach.
Mit Zwitterion können Sie zu den guten alten Tagen der Webentwicklung zurückkehren.
Schreiben Sie einfach Ihren Quellcode in eine unterstützte Sprache und führen Sie ihn im Browser aus.
Auch ... Zwitterion ist kein Bundler. Es meidet, um eine einfachere Erfahrung zu bündeln.
import * as stuff from 'library'; anstelle von import * as stuff from '../node_modules/library/index.js'; )index.html auf nicht behandelten Routen zurück)Installieren Sie Zwitterion im Verzeichnis, aus dem Sie Dateien ausstellen möchten:
npm install zwitterionFühren Sie Zwitterion aus, indem Sie auf die ausführbare Datei direkt vom Terminal zugreifen:
node_modules/.bin/zwitterion
oder aus einem NPM -Skript:
{
...
"scripts": {
"start": "zwitterion"
}
...
}
Installieren Sie Zwitterion weltweit, um Projekte für Projekte zu verwenden:
npm install -g zwitterionFühren Sie Zwitterion aus dem Terminal aus:
zwitterionoder aus einem NPM -Skript:
{
...
"scripts": {
"start": "zwitterion"
}
...
}
Es wird empfohlen, Zwitterion in der Produktion zu verwenden, indem Sie einen statischen Aufbau Ihres Projekts erstellen. In einem statischen Build wird im Wesentlichen alle relevanten Dateien über Zwitterion ausgeführt und diese und alle anderen Dateien in Ihrem Projekt in ein dist -Verzeichnis kopiert. Sie können dieses Verzeichnis übernehmen und in ein Content Delivery Network (CDN) oder einen anderen statischen Dateihosting -Dienst hochladen.
Sie können auch einen laufenden Zwitterion -Server in der Produktion verwenden, aber aus Leistung und potenziellen Sicherheitsgründen werden dies nicht empfohlen.
Um einen statischen Build zu erstellen, führen Sie Zwitterion mit der Option --build-static aus. Sie müssen Ihren Hosting -Anbieter wahrscheinlich den MIME -Typ der application/javascript für Ihre Typscript-, AssemblyScript-, Rost-, WASM- und WAT -Dateien hinzufügen.
Vom Terminal:
zwitterion --build-staticAus einem NPM -Skript:
{
...
" scripts " : {
" build-static " : " zwitterion --build-static "
}
...
} Der statische Build befindet sich in einem Verzeichnis namens dist , in demselben Verzeichnis, aus dem Sie den Befehl --build-static ausgeführt haben.
JavaScript ist die Sprache des Webs. Sie können hier mehr erfahren.
Das Importieren von JavaScript ES2015+ ist unkompliziert und funktioniert wie erwartet. Verwenden Sie einfach Import- und Exportanweisungen ohne Änderungen. Es wird empfohlen, explizite Dateierweiterungen zu verwenden:
./app.js :
import { helloWorld } from './hello-world.js' ;
console . log ( helloWorld ( ) ) ; ./hello-world.js :
export function helloWorld ( ) {
return 'Hello world!' ;
} Die JavaScript -Transpilation erfolgt vom TypeScript -Compiler. Standardmäßig werden die compilerOptions des TypsScript -Compilers auf Folgendes eingestellt:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Sie können diese Optionen überschreiben, indem Sie eine .json Datei mit Ihren eigenen compilerOptions erstellen und Zwitterion mitgeteilt werden, wo sie sie mit der Befehlszeilenoption --tsc-options-file finden soll. Die verfügbaren Optionen finden Sie hier. Optionen werden als JSON -Objekt angegeben. Zum Beispiel:
tsc-options.json :
{
"target" : " ES5 "
}Sagen Sie Zwitterion, wo Sie es finden sollen:
zwitterion --tsc-options-file tsc-options.jsonTypeScript ist ein typisierter Superet von JavaScript. Sie können hier mehr erfahren.
Das Importieren von Typenkripten ist unkompliziert und funktioniert wie erwartet. Verwenden Sie einfach Import- und Exportanweisungen ohne Änderungen. Es wird empfohlen, explizite Dateierweiterungen zu verwenden:
./app.ts :
import { helloWorld } from './hello-world.ts' ;
console . log ( helloWorld ( ) ) ; ./hello-world.ts :
export function helloWorld ( ) : string {
return 'Hello world!' ;
} Standardmäßig werden die compilerOptions des TypsScript -Compilers auf Folgendes eingestellt:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Sie können diese Optionen überschreiben, indem Sie eine .json Datei mit Ihren eigenen compilerOptions erstellen und Zwitterion mitgeteilt werden, wo sie sie mit der Befehlszeilenoption --tsc-options-file finden soll. Die verfügbaren Optionen finden Sie hier. Optionen werden als JSON -Objekt angegeben. Zum Beispiel:
tsc-options.json :
{
"target" : " ES5 "
}Sagen Sie Zwitterion, wo Sie es finden sollen:
zwitterion --tsc-options-file tsc-options.jsonJSON wird als Standard -Export bereitgestellt. Es wird empfohlen, explizite Dateierweiterungen zu verwenden:
./app.js :
import helloWorld from './hello-world.json' ;
console . log ( helloWorld ) ; ./hello-world.json :
{
"hello" : " world "
}Das Import von JSX ist unkompliziert und funktioniert wie erwartet. Verwenden Sie einfach Import- und Exportanweisungen ohne Änderungen. Es wird empfohlen, explizite Dateierweiterungen zu verwenden:
./app.js :
import { helloWorldElement } from './hello-world.jsx' ;
ReactDOM . render (
helloWorldElement ,
document . getElementById ( 'root' )
) ; ./hello-world.jsx :
export const hellowWorldElement = < h1 > Hello, world! </ h1 > ; Die JSX -Transpilation erfolgt vom TypeScript -Compiler. Standardmäßig werden die compilerOptions des TypsScript -Compilers auf Folgendes eingestellt:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Sie können diese Optionen überschreiben, indem Sie eine .json Datei mit Ihren eigenen compilerOptions erstellen und Zwitterion mitgeteilt werden, wo sie sie mit der Befehlszeilenoption --tsc-options-file finden soll. Die verfügbaren Optionen finden Sie hier. Optionen werden als JSON -Objekt angegeben. Zum Beispiel:
tsc-options.json :
{
"target" : " ES5 "
}Sagen Sie Zwitterion, wo Sie es finden sollen:
zwitterion --tsc-options-file tsc-options.jsonDas Importieren von TSX ist unkompliziert und funktioniert wie erwartet. Verwenden Sie einfach Import- und Exportanweisungen ohne Änderungen. Es wird empfohlen, explizite Dateierweiterungen zu verwenden:
./app.js :
import { helloWorldElement } from './hello-world.tsx' ;
ReactDOM . render (
helloWorldElement ,
document . getElementById ( 'root' )
) ; ./hello-world.tsx :
const helloWorld : string = 'Hello, world!' ;
export const hellowWorldElement = < h1 > { helloWorld } </ h1 > ; Die TSX -Transpilation erfolgt vom TypeScript -Compiler. Standardmäßig werden die compilerOptions des TypsScript -Compilers auf Folgendes eingestellt:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Sie können diese Optionen überschreiben, indem Sie eine .json Datei mit Ihren eigenen compilerOptions erstellen und Zwitterion mitgeteilt werden, wo sie sie mit der Befehlszeilenoption --tsc-options-file finden soll. Die verfügbaren Optionen finden Sie hier. Optionen werden als JSON -Objekt angegeben. Zum Beispiel:
tsc-options.json :
{
"target" : " ES5 "
}Sagen Sie Zwitterion, wo Sie es finden sollen:
zwitterion --tsc-options-file tsc-options.jsonAssemblyScript ist eine neue Sprache, die eine strenge Teilmenge von TypeScript in WebAssembly zusammenstellt. Sie können mehr darüber im AssemblyScript -Buch erfahren.
Zwitterion geht davon aus, dass AssemblyScript -Dateien die .as -Dateierweiterung haben. Dies ist eine zwitterion-spezifische Erweiterungswahl, da das AssemblyScript-Projekt noch keine eigene offizielle Dateierweiterung ausgewählt hat. Sie können diese Diskussion hier folgen. Zwitterion folgt der offiziellen Erweiterungswahl, sobald sie getroffen wurde.
Das Importieren von Assemblyskript ist nahezu identisch mit dem Importieren von JavaScript oder TypeScript. Der Hauptunterschied besteht darin, dass der Standard -Export Ihres Eintrags -Assemblyskript -Moduls eine Funktion ist, die ein Versprechen zurückgibt. Diese Funktion gilt als ein Parameter, ein Objekt, das Importe in das Assemblyskriptmodul enthält.
Das Übergeben von Werten an und aus Funktionen, die aus den Assemblyskriptmodulen exportiert wurden, sollten unkompliziert sein, aber es gibt einige Einschränkungen. Zwitterion verwendet AS-Bind unter der Motorhaube, um Werte zu und nach Assemblyskriptmodulen zu vermitteln. Schauen Sie sich dort an, wenn Sie weitere Informationen benötigen.
Sie können Assemblyskript aus JavaScript- oder Typscript -Dateien wie folgt importieren:
./app.js :
import addModuleInit from './add.as' ;
runAssemblyScript ( ) ;
async function runAssemblyScript ( ) {
const adddModule = await addModuleInit ( ) ;
console . log ( addModule . add ( 1 , 1 ) ) ;
} ./add.as :
export function add ( x : i32 , y : i32 ) : i32 {
return x + y ;
}Wenn Sie Importe von außerhalb der AssemblyScript -Umgebung weitergeben möchten, erstellen Sie eine Datei mit Exportdeklarationen, die die Arten der Importe definieren. Anschließend geben Sie Ihre Importe als Objekt an die Init -Funktion des AssemblyScript -Moduls weiter. Der Name der Eigenschaft, die Ihre Importe für ein Modul definiert, muss der genaue Dateinamen der Datei sein, in dem die Importdeklarationen exportiert werden. Zum Beispiel:
./app.js :
import addModuleInit from './add.as' ;
runAssemblyScript ( ) ;
async function runAssemblyScript ( ) {
const adddModule = await addModuleInit ( {
'env.as' : {
log : console . log
}
} ) ;
console . log ( addModule . add ( 1 , 1 ) ) ;
} ./env.as :
export declare function log ( x : number ) : void ; ./add.as :
import { log } from './env.as' ;
export function add ( x : i32 , y : i32 ) : i32 {
log ( x + y ) ;
return x + y ;
}Sie können Assemblyscript auch in Assemblyscript -Dateien importieren, wie dies:
./add.as :
import { subtract } from './subtract.as' ;
export function add ( x : i32 , y : i32 ) : i32 {
return subtract ( x + y , 0 ) ;
} ./subtract.as ::
export function subtract ( x : i32 , y : i32 ) : i32 {
return x - y ;
} Standardmäßig wurden keine Compiler -Optionen festgelegt. Die verfügbaren Optionen finden Sie hier. Sie können Optionen hinzufügen, indem Sie eine .json Datei mit einer Reihe von Optionsnamen und -werten erstellen und Zwitterion mitgeteilt werden, wo sie mit der Befehlszeilenoption --asc-options-file befindet. Zum Beispiel:
./asc-options.json :
[
" --optimizeLevel " , " 3 " ,
" --runtime " , " none " ,
" --shrinkLevel " , " 2 "
]Sagen Sie Zwitterion, wo Sie es finden sollen:
zwitterion --asc-options-file asc-options.jsonRust ist eine Sprache auf niedriger Ebene, die sich auf Leistung, Zuverlässigkeit und Produktivität konzentriert. Erfahren Sie hier mehr.
Die Rostunterstützung ist derzeit sehr einfach (dh keine WASM-B-Bindgen-Unterstützung). Sie müssen Rost auf Ihrem Computer installieren lassen. Hier finden Sie Anweisungen zum Installieren von Rost. Es ist ein Ziel von Zwitterion, eine lokale Version des erforderlichen Rost -Tools automatisch zu installieren, wenn Zwitterion installiert ist, aber das ist derzeit in Arbeit.
Das Importieren von Rost ist nahezu identisch mit dem Importieren von JavaScript oder Typenkript. Der Hauptunterschied besteht darin, dass der Standard -Export Ihres Eingangsrostmoduls eine Funktion ist, die ein Versprechen zurückgibt. Diese Funktion gilt als ein Parameter, ein Objekt, das Importe in das Rostmodul enthält. Sie können Rost aus JavaScript- oder Typscript -Dateien wie folgt importieren:
./app.js
import addModuleInit from './add.rs' ;
runRust ( ) ;
async function runRust ( ) {
const addModule = await addModuleInit ( ) ;
console . log ( addModule . add ( 5 , 5 ) ) ;
} ./add.rs
#! [ no_main ]
# [ no_mangle ]
pub fn add ( x : i32 , y : i32 ) -> i32 {
return x + y ;
}C -Unterstützung ist derzeit sehr einfach. Sie müssen Emscripten auf Ihrem Computer installieren lassen. Hier finden Sie Anweisungen zur Installation von EMSCIPTEN. Es ist ein Ziel von Zwitterion, eine lokale Version des erforderlichen C -Werkzeugs automatisch zu installieren, wenn Zwitterion installiert ist, aber das ist derzeit in Arbeit.
Das Importieren von C ist nahezu identisch mit dem Importieren von JavaScript oder Typenkript. Der Hauptunterschied besteht darin, dass der Standard -Export Ihres Eintrags -C -Moduls eine Funktion ist, die ein Versprechen zurückgibt. Diese Funktion gilt als ein Parameter, ein Objekt, das Importe in das C -Modul enthält. Sie können C aus JavaScript- oder Typscript -Dateien wie folgt importieren:
./app.js
import addModuleInit from './add.c' ;
runC ( ) ;
async function runC ( ) {
const addModule = await addModuleInit ( ) ;
console . log ( addModule . add ( 5 , 5 ) ) ;
} ./add.c
int add ( int x , int y ) {
return x + y ;
}Die Unterstützung von C ++ ist derzeit sehr einfach. Sie müssen Emscripten auf Ihrem Computer installieren lassen. Hier finden Sie Anweisungen zur Installation von EMSCIPTEN. Es ist ein Ziel von Zwitterion, eine lokale Version des erforderlichen C ++ - Tools automatisch zu installieren, wenn Zwitterion installiert ist, aber das ist derzeit in Arbeit.
Das Importieren von C ++ ist nahezu identisch mit dem Importieren von JavaScript oder TypeScript. Der Hauptunterschied besteht darin, dass der Standard -Export Ihres Eintrags C ++ - Modul eine Funktion ist, die ein Versprechen zurückgibt. Diese Funktion gilt als ein Parameter, ein Objekt, das Importe in das C ++ - Modul enthält. Sie können C ++ aus JavaScript- oder Typscript -Dateien wie folgt importieren:
./app.js
import addModuleInit from './add.cpp' ;
runCPP ( ) ;
async function runCPP ( ) {
const addModule = await addModuleInit ( ) ;
console . log ( addModule . add ( 5 , 5 ) ) ;
} ./add.cpp
extern " C " {
int add ( int x, int y) {
return x + y;
}
}
Wat ist eine Textdarstellung des WASM -Binärformates. Es ermöglicht WASM leichter von Hand. Erfahren Sie hier mehr.
Das Importieren von WAT ist nahezu identisch mit dem Importieren von JavaScript oder Typenkript. Der Hauptunterschied besteht darin, dass der Standard -Export Ihres Eintrags -WAT -Moduls eine Funktion ist, die ein Versprechen zurückgibt. Diese Funktion gilt als ein Parameter, ein Objekt, das Importe in das WAT -Modul enthält. Sie können Wat aus JavaScript- oder TypeScript -Dateien wie folgt importieren:
./app.js
import addModuleInit from './add.wat' ;
runWat ( ) ;
async function runWat ( ) {
const addModule = await addModuleInit ( ) ;
console . log ( addModule . add ( 5 , 5 ) ) ;
} ./add.wat
(module
(func $add (param $x i32) (param $y i32) (result i32)
(i32.add (get_local $x) (get_local $y))
)
( export " add " (func $add))
)WASM ist ein Binäranweisungsformat, das für effizient, sicher, tragbar und offen gebaut wurde. Erfahren Sie hier mehr.
Das Importieren von WASM ist nahezu identisch mit dem Importieren von JavaScript oder Typenkript. Der Hauptunterschied besteht darin, dass der Standard -Export Ihres Eintrags -WASM -Moduls eine Funktion ist, die ein Versprechen zurückgibt. Diese Funktion gilt als ein Parameter, ein Objekt, das Importe in das WASM -Modul enthält. Sie können WASM aus JavaScript- oder Typscript -Dateien wie folgt importieren:
./app.js
import addModuleInit from './add.wasm' ;
runWasm ( ) ;
async function runWasm ( ) {
const addModule = await addModuleInit ( ) ;
console . log ( addModule . add ( 5 , 5 ) ) ;
} ./add.wasm
Imagine this is a compiled Wasm binary file with a function called `add`
Geben Sie den Port des Servers an:
--port [port]Erstellen Sie einen statischen Aufbau des aktuellen Arbeitsverzeichnisses. Die Ausgabe befindet sich in einem Verzeichnis namens Dist im aktuellen Arbeitsverzeichnis:
--build-staticEine von Kommas getrennte Liste von Pfaden, relativ zum aktuellen Verzeichnis, um vom statischen Build auszuschließen:
--exclude [exclude]Eine von Kommas getrennte Liste von Pfaden im Vergleich zum aktuellen Verzeichnis, das in den statischen Build aufgenommen wird
--include [include]Ein Pfad zu einer Datei, relativ zum aktuellen Verzeichnis, um als Spa -Wurzel zu dienen. Es wird für den Stammpfad zurückgegeben und wenn eine Datei nicht gefunden werden kann:
--spa-root [spaRoot]Deaktivieren Sie die SPA -Umleitung auf index.html:
--disable-spaEin Pfad zu einer JSON -Datei, relativ zum aktuellen Verzeichnis, für benutzerdefinierte HTTP -Header:
--headers-file [headersFile]Benutzerdefinierte HTTP -Header werden als JSON -Objekt mit der folgenden Form angegeben:
type CustomHTTPHeaders = {
[ regexp : string ] : HTTPHeaders ;
}
type HTTPHeaders = {
[ key : string ] : string ;
}Zum Beispiel:
./headers.json
{
"^service-worker.ts$" : {
"Service-Worker-Allowed" : " / "
}
}Ein Pfad zu einer JSON -Datei, relativ zum aktuellen Verzeichnis, für TSC -Compiler -Optionen:
--tsc-options-file [tscOptionsFile]Die verfügbaren Optionen finden Sie hier. Optionen werden als JSON -Objekt angegeben. Zum Beispiel:
tsc-options.json :
{
"target" : " ES5 "
}Ein Pfad zu einer JSON -Datei, relativ zum aktuellen Verzeichnis, für ASC -Compiler -Optionen:
--asc-options-file [ascOptionsFile]Standardmäßig wurden keine Compiler -Optionen festgelegt. Die verfügbaren Optionen finden Sie hier. Optionen werden als Array von Optionsnamen und Werten angegeben. Zum Beispiel:
./asc-options.json :
[
" --optimizeLevel " , " 3 " ,
" --runtime " , " none " ,
" --shrinkLevel " , " 2 "
]Pakete von Drittanbietern müssen so verfasst werden, als würden sie Zwitterion verwenden. Dies bedeutet im Wesentlichen, dass sie in Standard -JavaScript oder Typscript verfasst werden sollten, und Assemblyscript, Rost, C und C ++ müssen gemäß ihrer WebAssembly -Dokumentation verfasst werden. In dieser Dokumentation werden bemerkenswerte Ausnahmen erläutert. CommonJS (die benötigte Syntax), JSON-, HTML- oder CSS-ES-Modulimporte sowie andere nicht standardmäßige Merkmale, die Bundler häufig unterstützen, werden im Quellcode nicht angegeben.
Es ist wichtig zu beachten, dass Zwitterion davon ausgeht, dass die Root -Datei (die Datei AT / ) Ihrer Webanwendung immer eine index.html -Datei ist.
Zwitterion hängt von der nativen Browser -Unterstützung für ES -Module (Import/Exportsyntax) ab. Sie müssen das Attribut type="module" zu Skriptelementen hinzufügen, die Module verweisen, zum Beispiel:
<script type="module" src="amazing-module.ts"></script>
Es ist wichtig zu beachten, dass Zwitterion keine Dateien bündelt oder sich an Baumschütteln beteiligt. Dies kann sich auf die Leistung Ihrer Anwendung auswirken. HTTP2- und ES -Module können bei der Leistung helfen, aber zu diesem Zeitpunkt weisen Anzeichen tendenziell auf eine schlechtere Leistung hin. Zwitterion plant, die Leistung zu verbessern, indem er automatisch HTTP2 -Server -Push -Informationen aus dem statischen Build generiert und in Baumschütteln untersucht wird. Es ist jedoch unklar, welche Auswirkungen dies haben wird. Weitere Informationen zur Leistung als Zwitterion reift.
Bei all den oben genannten Angaben sind die Auswirkungen auf die Leistung unklar. Messen Sie sich.
Lesen Sie Folgendes, um weitere Informationen zum Bündeln im Vergleich zu Bündelung mit HTTP2 zu erhalten:
Zwitterion ist einfach. Es ist mehr oder weniger ein statischer Dateiserver, aber es schreibt angeforderte Dateien im Speicher nach Bedarf um, um zum Client zurückzukehren. Wenn beispielsweise eine TypeScript -Datei vom Client angefordert wird, ruft Zwitterion den Text der Datei ab, kompilieren Sie sie in JavaScript und geben dann den kompilierten Text an den Client zurück. Das Gleiche gilt für JavaScript -Dateien. Tatsächlich wird fast der gleiche Prozess für jede Dateierweiterung verwendet, die wir in Zukunft unterstützen möchten. Wenn beispielsweise in Zukunft eine C -Datei angefordert wird, wird sie in den Speicher gelesen, wird der Text in die WebAssembly zusammengestellt und die WebAssembly wird an den Client zurückgegeben. All diese Zusammenstellung erfolgt serverseitig und verborgen vor dem Benutzer. Für den Benutzer handelt es sich nur um einen statischen Dateiserver.
