zwitterionのダウンロードzwitterionソースコードのダウンロード

ズウィタリオン

何でもインポートできるWeb開発サーバー*

*あなたが意味する場合は、JavaScript ES2015+、TypeScript、JSON、JSX、TSX、AssemblyScript、Rust、C、C ++、WebAssembly、および将来、JavaScriptまたはWebAssemblyにコンパイルするもの。

Zwitterionは、現在のWeb開発静的ファイルサーバーの即時交換になるように設計されています。

スタティックビルドを通じて、生産展開も可能です。

たとえば、次のようなものを書くことができます。

./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!' ;
}

本当に、それはただ機能します。

Zwitterionを使用すると、Web開発の古き良き時代に戻ることができます。

サポートされている言語でソースコードを記述し、ブラウザで実行するだけです。

また...ズウィタリオンはバンドラーではありません。より簡単な体験のために束ねることを避けます。

現在の機能

ES2015+
タイプスクリプト
JSON
JSX
TSX
assemblyscript
さび（基本的なサポート）
C（基本的なサポート）
C ++（基本的なサポート）
WebAssemblyテキスト形式（WAT）
WebAssembly（WASM）
bare imports（ import * as stuff from 'library'; import * as stuff from '../node_modules/library/index.js'; ）
シングルページアプリケーションルーティング（デフォルトでは、サーバーは未処理のルートでindex.htmlを返します）
生産展開用の静的ビルド

今後の機能

より堅牢な錆の統合（すなわち、NPMのインストール中の自動ローカル錆のインストール）
より堅牢なC統合
より堅牢なC ++統合
マップをインポートします
HTTP2最適化

ドキュメント

例
インストールと基本的な使用
生産使用
言語
- JavaScript
- タイプスクリプト
- JSON
- JSX
- TSX
- assemblyscript
- さび
- c
- C ++
- WebAssemblyテキスト形式（WAT）
- WebAssembly（WASM）
コマンドラインオプション
特別な考慮事項
ボンネットの下

インストールと基本的な使用

ローカルのインストールと使用

次のファイルを提供したいディレクトリにZwitterionをインストールします。

npm install zwitterion

ターミナルから直接実行可能にアクセスしてZwitterionを実行します。

 node_modules/.bin/zwitterion

またはNPMスクリプトから：

 {
  ...
  "scripts": {
    "start": "zwitterion"
  }
  ...
}

グローバルなインストールと使用

Zwitterionをグローバルにインストールして、プロジェクト間で使用します。

npm install -g zwitterion

ターミナルからZwitterionを実行します：

zwitterion

またはNPMスクリプトから：

 {
  ...
  "scripts": {
    "start": "zwitterion"
  }
  ...
}

生産使用

プロジェクトの静的ビルドを作成することにより、生産にZwititerionを使用することをお勧めします。静的ビルドは、基本的にすべての関連ファイルをZwitterionを介して実行し、プロジェクト内のそれらおよび他のすべてのファイルをdistディレクトリにコピーします。このディレクトリを使用して、コンテンツ配信ネットワーク（CDN）または別の静的ファイルホスティングサービスにアップロードできます。

生産で実行中のZwitherionサーバーを使用することもできますが、パフォーマンスと潜在的なセキュリティ上の理由では、推奨されません。

静的ビルドを作成するには、 --build-staticオプションを使用してZwitterionを実行します。おそらく、TypeScript、AssemblyScript、Rust、WASM、およびWATファイルのapplication/javascript Mimeタイプをホスティングプロバイダーに追加する必要があります。

ターミナルから：

zwitterion --build-static

NPMスクリプトから：

{
  ...
  " scripts " : {
    " build-static " : " zwitterion --build-static "
  }
  ...
}

静的ビルドは、 distというディレクトリにあり、 --build-staticコマンドを実行したのと同じディレクトリに配置されます。

言語

JavaScript

JavaScriptはWebの言語です。詳細についてはこちらをご覧ください。

JavaScript ES2015+のインポートは簡単で、予想どおりに機能します。変更せずにインポートステートメントとエクスポートを使用するだけです。明示的なファイル拡張子を使用することをお勧めします。

./app.js ：

 import { helloWorld } from './hello-world.js' ;

console . log ( helloWorld ( ) ) ;

./hello-world.js ：

 export function helloWorld ( ) {
  return 'Hello world!' ;
}

JavaScriptトランスピレーションは、TypeScriptコンパイラによって行われます。デフォルトでは、TypeScript CompilerのcompilerOptions次のように設定されています。

  {
    "module" : " ES2015 " ,
    "target" : " ES2015 "
  }

これらのオプションをオーバーライドして、独自のcompilerOptionsを使用して.jsonファイルを作成し、 --tsc-options-fileコマンドラインオプションを使用してどこに配置するかをZwitterionに伝えることができます。利用可能なオプションはここにあります。オプションはJSONオブジェクトとして指定されています。例えば：

tsc-options.json ：

{
  "target" : " ES5 "
}

Zwitterionにどこにあるのかを伝えます。

zwitterion --tsc-options-file tsc-options.json

タイプスクリプト

TypeScriptは、JavaScriptのタイプされたスーパーセットです。詳細についてはこちらをご覧ください。

タイプスクリプトのインポートは簡単で、予想通りに機能します。変更せずにインポートステートメントとエクスポートを使用するだけです。明示的なファイル拡張子を使用することをお勧めします。

./app.ts ：

 import { helloWorld } from './hello-world.ts' ;

console . log ( helloWorld ( ) ) ;

./hello-world.ts ：

 export function helloWorld ( ) : string {
  return 'Hello world!' ;
}

デフォルトでは、TypeScript CompilerのcompilerOptions次のように設定されています。

  {
    "module" : " ES2015 " ,
    "target" : " ES2015 "
  }

tsc-options.json ：

{
  "target" : " ES5 "
}

Zwitterionにどこにあるのかを伝えます。

zwitterion --tsc-options-file tsc-options.json

JSON

JSONはデフォルトのエクスポートとして提供されます。明示的なファイル拡張子を使用することをお勧めします。

./app.js ：

 import helloWorld from './hello-world.json' ;

console . log ( helloWorld ) ;

./hello-world.json ：

{
  "hello" : " world "
}

JSX

JSXのインポートは簡単で、期待どおりに機能します。変更せずにインポートステートメントとエクスポートを使用するだけです。明示的なファイル拡張子を使用することをお勧めします。

./app.js ：

 import { helloWorldElement } from './hello-world.jsx' ;

ReactDOM . render (
  helloWorldElement ,
  document . getElementById ( 'root' )
) ;

./hello-world.jsx ：

 export const hellowWorldElement = < h1 > Hello, world! </ h1 > ;

JSXトランスピレーションは、TypeScriptコンパイラによって行われます。デフォルトでは、TypeScript CompilerのcompilerOptions次のように設定されています。

  {
    "module" : " ES2015 " ,
    "target" : " ES2015 "
  }

tsc-options.json ：

{
  "target" : " ES5 "
}

Zwitterionにどこにあるのかを伝えます。

zwitterion --tsc-options-file tsc-options.json

TSX

TSXのインポートは簡単で、期待どおりに機能します。変更せずにインポートステートメントとエクスポートを使用するだけです。明示的なファイル拡張子を使用することをお勧めします。

./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 > ;

TSXトランスピレーションは、TypeScriptコンパイラによって行われます。デフォルトでは、TypeScript CompilerのcompilerOptions次のように設定されています。

  {
    "module" : " ES2015 " ,
    "target" : " ES2015 "
  }

tsc-options.json ：

{
  "target" : " ES5 "
}

Zwitterionにどこにあるのかを伝えます。

zwitterion --tsc-options-file tsc-options.json

assemblyscript

assemblyscriptは、TypeScriptの厳格なサブセットをWebAssemblyにコンパイルする新しい言語です。それについては、Assemblyscriptの本で詳しく知ることができます。

Zwitterionは、AssemblyScriptファイルには.asファイル拡張子があると想定しています。 AssemblyScriptプロジェクトはまだ独自の公式ファイル拡張機能を選択していないため、これはZwiterion固有の拡張選択の選択です。ここでその議論に従うことができます。 Zwitterionは、作成されると公式の拡張選択に従います。

Assemblyscriptのインポートは、JavaScriptまたはTypeScriptのインポートとほぼ同じです。重要な違いは、エントリアセンブリスクリプトモジュールのデフォルトエクスポートが約束を返す関数であることです。この関数は、その1つのパラメーターとして、AssemblyScriptモジュールへのインポートを含むオブジェクトを取得します。

アセンブリスクリプトモジュールからエクスポートされる関数との間で値を渡すことは簡単ですが、いくつかの制限があります。 Zwitterionは、AS-Bindの下でASバインドを使用して、AssemblyScriptモジュールとの間で値をブローカーします。もっと情報が必要な場合は、そこを見てください。

このようなjavaScriptまたはtypeScriptファイルからassemblyscriptをインポートできます。

./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 ;
}

AssemblyScript環境の外部から輸入を渡す場合は、輸入の種類を定義するエクスポート宣言を備えたファイルを作成します。次に、オブジェクトとしてインポートをAssemblyScriptモジュールinit機能に渡します。モジュールのインポートを定義するプロパティの名前は、インポート宣言をエクスポートするファイルの正確なファイル名でなければなりません。例えば：

./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 ;
}

Assemblyscriptファイル内からAssemblyScriptをインポートすることもできます。

./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 ;
}

デフォルトでは、コンパイラオプションは設定されていません。利用可能なオプションはここにあります。オプション名と値の配列を備えた.jsonファイルを作成し、 --asc-options-fileコマンドラインオプションを使用してZwitterionにどこに配置するかを伝えることにより、オプションを追加できます。例えば：

./asc-options.json ：

[
  " --optimizeLevel " , " 3 " ,
  " --runtime " , " none " ,
  " --shrinkLevel " , " 2 "
]

Zwitterionにどこにあるのかを伝えます。

zwitterion --asc-options-file asc-options.json

さび

Rustは、パフォーマンス、信頼性、生産性に焦点を当てた低レベルの言語です。詳細はこちらをご覧ください。

錆のサポートは現在非常に基本的です（つまり、wasm-bindgenサポートはありません）。マシンに錆を取り付ける必要があります。 Rustをここにインストールするための手順を見つけることができます。 Zwitterionがインストールされているときに、必要な錆ツールのローカルバージョンを自動的にインストールすることは、Zwitterionの目標ですが、現在進行中の作業です。

錆のインポートは、JavaScriptまたはTypeScriptのインポートとほぼ同じです。重要な違いは、エントリラストモジュールのデフォルトエクスポートが約束を返す関数であることです。この関数は、その1つのパラメーターとして、Rustモジュールへのインポートを含むオブジェクトを使用します。このようなJavaScriptまたはTypeScriptファイルからRustをインポートできます。

./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

Cサポートは現在非常に基本的です。あなたはあなたのマシンにemscriptenをインストールする必要があります。 emscriptenをインストールするための手順をここに見つけることができます。 Zwitterionがインストールされているときに、必要なCツールのローカルバージョンを自動的にインストールすることは、Zwitterionの目標ですが、現在進行中の作業です。

Cのインポートは、JavaScriptまたはTypeScriptのインポートとほぼ同じです。重要な違いは、エントリCモジュールのデフォルトエクスポートが約束を返す関数であることです。この関数は、その1つのパラメーターとして、Cモジュールへのインポートを含むオブジェクトを取得します。このようなJavaScriptまたはTypeScriptファイルからCをインポートできます。

./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 ;
}

C ++

C ++サポートは現在非常に基本的です。あなたはあなたのマシンにemscriptenをインストールする必要があります。 emscriptenをインストールするための手順をここに見つけることができます。 Zwitherionがインストールされているときに、必要なC ++ツールのローカルバージョンを自動的にインストールすることは、Zwitterionの目標ですが、現在進行中の作業です。

C ++のインポートは、JavaScriptまたはTypeScriptのインポートとほぼ同じです。重要な違いは、エントリC ++モジュールのデフォルトエクスポートが約束を返す関数であることです。この関数は、その1つのパラメーターとして、C ++モジュールへのインポートを含むオブジェクトを取ります。このようなJavaScriptまたはTypeScriptファイルからC ++をインポートできます。

./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;
  }
}

WebAssemblyテキスト形式（WAT）

WATは、WASMバイナリ形式のテキスト表現です。 WASMをより簡単に手作業で書くことができます。詳細はこちらをご覧ください。

WATのインポートは、JavaScriptまたはTypeScriptのインポートとほぼ同じです。重要な違いは、エントリWATモジュールのデフォルトエクスポートが約束を返す関数であることです。この関数は、その1つのパラメーターとして、WATモジュールへのインポートを含むオブジェクトを使用します。このようなJavaScriptまたはTypeScriptファイルからWATをインポートできます。

./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))
)

WebAssembly（WASM）

WASMは、効率的で安全で、ポータブルで、オープンになるように構築されたバイナリ命令形式です。詳細はこちらをご覧ください。

WASMのインポートは、JavaScriptまたはTypeScriptのインポートとほぼ同じです。重要な違いは、エントリWASMモジュールのデフォルトエクスポートが約束を返す関数であることです。この関数は、その1つのパラメーターとして、WASMモジュールへのインポートを含むオブジェクトを取得します。このようなJavaScriptまたはTypeScriptファイルからWASMをインポートできます。

./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`

コマンドラインオプション

ポート

サーバーのポートを指定します。

--port [port]

静的を構築します

現在の作業ディレクトリの静的ビルドを作成します。出力は、現在の作業ディレクトリのDISTと呼ばれるディレクトリにあります。

--build-static

除外します

静的ビルドから除外するための、現在のディレクトリに比べて、パスのコンマ分離されたリスト：

--exclude [exclude]

含む

静的ビルドに含めるための現在のディレクトリに比べて、パスのコンマ分離されたリスト

--include [include]

スパルート

現在のディレクトリに比べてファイルへのパスは、スパルートとして機能します。ルートパスとファイルが見つからない場合に返されます。

--spa-root [spaRoot]

スパを無効にします

spaリダイレクトをindex.htmlに無効にします。

--disable-spa

ヘッダーファイル

カスタムHTTPヘッダーのための現在のディレクトリと比較して、JSONファイルへのパス：

--headers-file [headersFile]

カスタムHTTPヘッダーは、次の形状のJSONオブジェクトとして指定されています。

 type CustomHTTPHeaders = {
    [ regexp : string ] : HTTPHeaders ;
}

type HTTPHeaders = {
    [ key : string ] : string ;
}

例えば：

./headers.json

{
  "^service-worker.ts$" : {
    "Service-Worker-Allowed" : " / "
  }
}

TSCオプションファイル

TSCコンパイラオプションのための現在のディレクトリと比較して、JSONファイルへのパス：

--tsc-options-file [tscOptionsFile]

利用可能なオプションはここにあります。オプションはJSONオブジェクトとして指定されています。例えば：

tsc-options.json ：

{
  "target" : " ES5 "
}

ASCオプションファイル

ASCコンパイラオプションのための現在のディレクトリと比較して、JSONファイルへのパス：

--asc-options-file [ascOptionsFile]

デフォルトでは、コンパイラオプションは設定されていません。利用可能なオプションはここにあります。オプションは、オプション名と値の配列として指定されています。例えば：

./asc-options.json ：

[
  " --optimizeLevel " , " 3 " ,
  " --runtime " , " none " ,
  " --shrinkLevel " , " 2 "
]

特別な考慮事項

サードパーティパッケージ

サードパーティパッケージは、Zwitterionを使用しているかのように作成する必要があります。基本的に、これは標準のJavaScriptまたはTypeScriptで執筆する必要があり、Assemblyscript、Rust、C、およびC ++はWebAssemblyドキュメントに従って承認する必要があります。このドキュメントでは、顕著な例外について説明します。 CommonJS（要件構文）、JSON、HTML、またはCSS ESモジュールのインポート、およびバンドラーが一般的にサポートするその他の非標準機能は、ソースコードでは抑制されません。

ルートファイル

Zwitterionは、Webアプリケーションのルートファイル（ /にあるファイル）が常にindex.htmlファイルであると想定していることに注意することが重要です。

ESモジュールスクリプト要素

Zwitterionは、ESモジュールのネイティブブラウザーサポート（インポート/エクスポート構文）に依存します。たとえば、モジュールを参照するスクリプト要素にtype="module"属性を追加する必要があります。

 <script type="module" src="amazing-module.ts"></script>

パフォーマンス

Zwitterionはファイルをバンドルしたり、木の揺れに関与したりしないことに注意することが重要です。これは、アプリケーションのパフォーマンスに影響を与える可能性があります。 HTTP2およびESモジュールはパフォーマンスに役立つ可能性がありますが、この時点での時間標識はパフォーマンスが悪化する傾向があります。 Zwitterionは、静的ビルドからHTTP2サーバープッシュ情報を自動的に生成し、ツリーの揺れを調べることにより、パフォーマンスを改善する計画を持っていますが、これが何に影響するかは不明です。 Zwititerionが成熟するにつれて、パフォーマンスの詳細については、お楽しみに。

上記のすべてが言われているため、パフォーマンスへの影響は不明です。自分のために測定してください。

http2にバンドリングしないとバンドリングの詳細については、以下をお読みください。

https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-http-2-437c37efe3ff
https://stackoverflow.com/questions/30861591/why-bundle-optimizations-are-no-longer-a-concern-in-http-2
http://engineering.khanacademy.org/posts/js-packaging-http2.htm
https://blog.newrelic.com/2016/02/09/http2-best-practics-web-performance/
https://mattwilcox.net/web-development/http2-for-front-web-developers
https://news.ycombinator.com/item?id=9137690
https://www.sitepoint.com/file-bundling-and-http2/
https://medium.freecodecamp.org/javascript-modules-part-2-module-bundling-5020383cf306
https://css-tricks.com/musings-on-http2-andling/

ボンネットの下

ズウィタリオンは簡単です。それは多かれ少なかれ静的ファイルサーバーですが、クライアントに戻るために必要に応じて、メモリ内の要求されたファイルを書き直します。たとえば、クライアントからタイプスクリプトファイルが要求された場合、Zwitterionはファイルのテキストを取得し、JavaScriptにコンパイルし、コンパイルされたテキストをクライアントに返します。 JavaScriptファイルについても同じことが行われます。実際、将来サポートしたいファイル拡張機能には、ほぼ同じプロセスが使用されます。たとえば、将来、Cファイルが要求された場合、メモリに読み取られ、テキストがWebAssemblyにコンパイルされ、WebAssemblyがクライアントに返されます。このコンパイルはすべて、サーバー側で行われ、ユーザーから隠されています。ユーザーにとって、それは単なる静的ファイルサーバーです。

拡大する