zwitterion
1.0.0
Web開發服務器，可讓您導入任何內容*
*如果您的意思是：JavaScript ES2015+，Typescript，JSON，JSX，TSX，彙編，Rust，C，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!' ;
}真的，它只是有效的。
witterion使您可以回到網絡開發的美好時光。
只需用任何受支持的語言編寫您的源代碼，然後在瀏覽器中運行它。
同樣... zwitterion不是捆綁者。它避免捆綁以獲得更簡單的體驗。
import * as stuff from 'library';而不是import * as stuff from '../node_modules/library/index.js'; ; ）index.html ，在未手動路由上）在您想從：
npm install zwitterion通過直接從終端訪問其可執行文件來運行zwitterion：
node_modules/.bin/zwitterion
或來自NPM腳本：
{
...
"scripts": {
"start": "zwitterion"
}
...
}
在全球範圍內安裝zwitterion以跨項目使用：
npm install -g zwitterion從終端運行zwitterion：
zwitterion或來自NPM腳本：
{
...
"scripts": {
"start": "zwitterion"
}
...
}
建議通過創建項目的靜態構建來在生產中使用zwitterion。靜態構建基本上通過zwitterion運行所有相關文件，並將項目中的這些和所有其他文件複製到dist目錄。您可以將此目錄上傳到內容輸送網絡（CDN）或其他靜態文件託管服務。
您也可以在生產中使用運行的zwitterion服務器，但出於性能和潛在的安全原因，不建議這樣做。
要創建靜態構建，請使用--build-static選項運行zwitterion。您可能需要將application/javascript MIME類型添加到託管提供商，彙編，Rust，WASM和WAT文件中。
從終端：
zwitterion --build-static來自NPM腳本：
{
...
" scripts " : {
" build-static " : " zwitterion --build-static "
}
...
}靜態構建將位於一個名為dist的目錄中，與您從運行--build-static命令的同一目錄中。
JavaScript是網絡的語言。您可以在這裡了解更多。
導入JavaScript ES2015+非常簡單，並且可以按預期工作。只需使用導入和導出語句而無需任何修改即可。建議使用明確的文件擴展名：
./app.js ：
import { helloWorld } from './hello-world.js' ;
console . log ( helloWorld ( ) ) ; ./hello-world.js ：
export function helloWorld ( ) {
return 'Hello world!' ;
} JavaScript轉移由打字稿編譯器完成。默認情況下，打字稿編譯器的compilerOptions將設置為以下內容：
{
"module" : " ES2015 " ,
"target" : " ES2015 "
}您可以通過使用自己的compilerOptions創建.json文件來覆蓋這些選項，並告訴zwitterion在哪裡可以使用--tsc-options-file命令行選項將其定位。可用選項可以在此處找到。選項指定為JSON對象。例如：
tsc-options.json ：
{
"target" : " ES5 "
}告訴zwitterion在哪裡可以找到它：
zwitterion --tsc-options-file tsc-options.jsonTypescript是JavaScript的類型超集。您可以在這裡了解更多。
導入打字稿很簡單，可以按預期工作。只需使用導入和導出語句而無需任何修改即可。建議使用明確的文件擴展名：
./app.ts ：
import { helloWorld } from './hello-world.ts' ;
console . log ( helloWorld ( ) ) ; ./hello-world.ts ：
export function helloWorld ( ) : string {
return 'Hello world!' ;
}默認情況下，打字稿編譯器的compilerOptions將設置為以下內容：
{
"module" : " ES2015 " ,
"target" : " ES2015 "
}您可以通過使用自己的compilerOptions創建.json文件來覆蓋這些選項，並告訴zwitterion在哪裡可以使用--tsc-options-file命令行選項將其定位。可用選項可以在此處找到。選項指定為JSON對象。例如：
tsc-options.json ：
{
"target" : " ES5 "
}告訴zwitterion在哪裡可以找到它：
zwitterion --tsc-options-file tsc-options.jsonJSON作為默認導出提供。建議使用明確的文件擴展名：
./app.js ：
import helloWorld from './hello-world.json' ;
console . log ( helloWorld ) ; ./hello-world.json ：
{
"hello" : " world "
}導入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轉卸詞由打字稿編譯器完成。默認情況下，打字稿編譯器的compilerOptions將設置為以下內容：
{
"module" : " ES2015 " ,
"target" : " ES2015 "
}您可以通過使用自己的compilerOptions創建.json文件來覆蓋這些選項，並告訴zwitterion在哪裡可以使用--tsc-options-file命令行選項將其定位。可用選項可以在此處找到。選項指定為JSON對象。例如：
tsc-options.json ：
{
"target" : " ES5 "
}告訴zwitterion在哪裡可以找到它：
zwitterion --tsc-options-file tsc-options.json導入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轉濾由打字稿編譯器完成。默認情況下，打字稿編譯器的compilerOptions將設置為以下內容：
{
"module" : " ES2015 " ,
"target" : " ES2015 "
}您可以通過使用自己的compilerOptions創建.json文件來覆蓋這些選項，並告訴zwitterion在哪裡可以使用--tsc-options-file命令行選項將其定位。可用選項可以在此處找到。選項指定為JSON對象。例如：
tsc-options.json ：
{
"target" : " ES5 "
}告訴zwitterion在哪裡可以找到它：
zwitterion --tsc-options-file tsc-options.json彙編是一種新的語言，可將嚴格的打字稿子集編譯為WebAssembly。您可以在“彙編”書中了解有關它的更多信息。
zwitterion假設彙編文件具有.as文件擴展名。這是一個特定於zwitterion的擴展選擇，因為彙編項目尚未選擇自己的官方文件擴展名。您可以在這裡進行討論。一旦做出Zwitterion，將遵循官方的擴展選擇。
導入彙編幾乎與導入JavaScript或Typescript相同。關鍵區別在於，您的條目彙編模塊的默認導出是返回承諾的函數。此函數將其作為一個參數為一個對象，該對象包含導入到彙編模塊中。
傳遞從彙編模塊導出的函數的值和從彙編模塊導出的值應該很簡單，但是存在一些局限性。 zwitterion在引擎蓋下使用盡可能多的界定值來對彙編模塊進行代理值。如果您需要更多信息，請查看那裡。
您可以從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 ;
}如果您想從彙編環境外部的外部傳遞導入，則創建一個文件，其中包含定義導入類型的導出聲明。然後，您將導入作為對像傳遞給gashedybryscript模塊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 ;
}您也可以從彙編文件中導入彙編，例如：
./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文件來添加選項，並告訴zwitterion在哪裡可以使用--asc-options-file命令行選項將其定位。例如：
./asc-options.json ：
[
" --optimizeLevel " , " 3 " ,
" --runtime " , " none " ,
" --shrinkLevel " , " 2 "
]告訴zwitterion在哪裡可以找到它：
zwitterion --asc-options-file asc-options.jsonRust是一種低級語言，專注於性能，可靠性和生產力。在這裡了解更多。
生鏽的支持目前非常基本（即沒有WASM-BIND基因支持）。您必須在計算機上安裝生鏽。您可以在此處找到安裝Rust的說明。 Zwitterion的目標是在安裝Zwitterion時自動安裝必要的生鏽工具的本地版本，但這是目前正在進行的工作。
導入生鏽幾乎與導入JavaScript或打字稿相同。關鍵區別在於，進入Rust模塊的默認導出是返回承諾的函數。此函數將其作為一個參數，一個對象，其中包含進口到Rust模塊。您可以從JavaScript或打字稿文件中導入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目前非常基本的支持。您必須在計算機上安裝emscripten。您可以在此處找到用於安裝Emscripten的說明。安裝zwitterion時，zwitterion的目標是自動安裝必要的C工具的本地版本，但目前正在進行中。
導入C幾乎與導入JavaScript或打字稿相同。關鍵區別在於，輸入C模塊的默認導出是返回承諾的函數。此函數將其作為一個參數，一個對象，其中包含導入到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 ++支持當前非常基本。您必須在計算機上安裝emscripten。您可以在此處找到用於安裝Emscripten的說明。安裝zwitterion時，zwitterion的目標是自動安裝必要的C ++工具的本地版本，但這是目前正在進行的工作。
導入C ++幾乎與導入JavaScript或打字稿相同。關鍵區別在於您的條目C ++模塊的默認導出是返回承諾的函數。此函數將其作為一個參數為一個對象，其中包含導入到C ++模塊的對象。您可以從JavaScript或打字稿文件中導入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;
}
}
WAT是WASM二進制格式的文本表示。它允許WASM更容易手工編寫。在這裡了解更多。
導入WAT幾乎與導入JavaScript或打字稿相同。關鍵區別在於，進入WAT模塊的默認導出是返回承諾的函數。此函數將其作為一個參數，一個對象，其中包含導入到WAT模塊的對象。您可以從JavaScript或打字稿文件中導入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))
)WASM是一種二進制指令格式，旨在高效，安全，便攜式和開放。在這裡了解更多。
導入WASM幾乎與導入JavaScript或打字稿相同。關鍵區別在於，您的條目WASM模塊的默認導出是返回承諾的函數。該函數將其作為一個參數，一個對象，其中包含對WASM模塊的導入。您可以從JavaScript或打字稿文件中導入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" : " / "
}
}相對於當前目錄的JSON文件的路徑，用於TSC編譯器選項：
--tsc-options-file [tscOptionsFile]可用選項可以在此處找到。選項指定為JSON對象。例如：
tsc-options.json ：
{
"target" : " ES5 "
}相對於當前目錄的JSON文件的路徑，用於ASC編譯器選項：
--asc-options-file [ascOptionsFile]默認情況下，尚未設置編譯器選項。可用選項可以在此處找到。選項被指定為選項名稱和值的數組。例如：
./asc-options.json ：
[
" --optimizeLevel " , " 3 " ,
" --runtime " , " none " ,
" --shrinkLevel " , " 2 "
]第三方軟件包必須像在使用zwitterion一樣撰寫。從本質上講，這意味著它們應在標準JavaScript或Typescript中撰寫，並且必鬚根據其WebAssembly文檔來撰寫彙編，Rust，C和C ++。在本文檔中將解釋值得注意的例外。 CONCORJS（需要語法），JSON，HTML或CSS ES模塊導入以及其他非標準功能，這些功能通常不會在源代碼中捆綁支持。
重要的是要注意，zwitterion假設Web應用程序的root文件（在/ ）始終是index.html文件。
zwitterion取決於對ES模塊的本機瀏覽器支持（導入/導出語法）。您必須將type="module"屬性添加到引用模塊的腳本元素，例如：
<script type="module" src="amazing-module.ts"></script>
重要的是要注意，zwitterion不會捆綁文件或搖晃樹木。這可能會影響您的應用程序的性能。 HTTP2和ES模塊可能有助於提高性能，但是在此時間點，跡象往往指向較差的性能。 Zwitterion計劃通過自動從靜態構建中自動生成HTTP2服務器推送信息並研究樹木搖動，但目前尚不清楚這會產生什麼影響，從而提高了性能。請繼續關注有關Zwitterion成熟的更多信息的更多信息。
在上述所有內容時，績效的影響尚不清楚。為自己衡量。
閱讀以下內容以獲取有關捆綁的更多信息，而不是與http2捆綁：
zwitterion很簡單。它或多或少是靜態文件服務器，但是它根據需要在內存中重寫請求的文件以返回客戶端。例如，如果從客戶端請求打字稿文件，則Zwitterion將檢索文件的文本，將其編譯為JavaScript，然後將編譯後的文本返回給客戶端。 JavaScript文件也要做同樣的事情。實際上，將來我們將來要支持的任何文件擴展名將使用幾乎相同的過程。例如，將來，如果請求C文件，它將被讀取到內存中，文本將被編譯給WebAssembly，並且WebAssembly將返回給客戶端。所有這些彙編都是完成了服務器端的，並且對用戶隱藏了。對於用戶，它只是靜態文件服務器。
