zwitterion
1.0.0
Um servidor de desenvolvimento da web que permite importar qualquer coisa*
* Se, por qualquer coisa, você quer dizer: JavaScript ES2015+, TypeScript, JSON, JSX, TSX, Assemblyscript, Rust, C, C ++, WebAssembly e, no futuro, qualquer coisa que compila com JavaScript ou WebAssembly.
O Zwitterion foi projetado para ser uma substituição instantânea para o seu servidor de arquivos estático de desenvolvimento da Web atual.
As implantações de produção também são possíveis através da construção estática.
Por exemplo, você pode escrever coisas como as seguintes e apenas funciona:
./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!' ;
}Realmente, apenas funciona.
O Zwitterion permite que você volte aos bons velhos tempos do desenvolvimento da Web.
Basta escrever seu código -fonte em qualquer idioma suportado e executá -lo no navegador.
Além disso ... o zwitterion não é um empurrador. Evita o agrupamento de uma experiência mais simples.
import * as stuff from 'library'; em vez de import * as stuff from '../node_modules/library/index.js'; );index.html em rotas não tratadas)Instale o zwitterion no diretório do qual você gostaria de servir arquivos:
npm install zwitterionExecute o zwitterion acessando seu executável diretamente do terminal:
node_modules/.bin/zwitterion
ou de um script npm:
{
...
"scripts": {
"start": "zwitterion"
}
...
}
Instale o Zwitterion globalmente para usar em projetos:
npm install -g zwitterionExecute o zwitterion do terminal:
zwitterionou de um script npm:
{
...
"scripts": {
"start": "zwitterion"
}
...
}
Recomenda -se usar o Zwitterion na produção, criando uma construção estática do seu projeto. Uma compilação estática executa essencialmente todos os arquivos relevantes através do Zwitterion e copia esses e todos os outros arquivos em seu projeto para um diretório dist . Você pode levar esse diretório e carregá -lo para uma rede de entrega de conteúdo (CDN) ou outro serviço de hospedagem de arquivos estático.
Você também pode usar um servidor Zwitterion em execução na produção, mas por desempenho e potenciais motivos de segurança, ele não é recomendado.
Para criar uma construção estática, execute o zwitterion com a opção --build-static . Você provavelmente precisará adicionar o tipo de application/javascript mime ao seu provedor de hospedagem para os arquivos de tipas -descrito, AssemblyScript, Rust, WASM e WAT.
Do terminal:
zwitterion --build-staticDe um script npm:
{
...
" scripts " : {
" build-static " : " zwitterion --build-static "
}
...
} A construção estática estará localizada em um diretório chamado dist , no mesmo diretório do qual você executou o comando --build-static .
JavaScript é o idioma da web. Você pode aprender mais aqui.
A importação de JavaScript ES2015+ é direta e funciona conforme o esperado. Basta usar declarações de importação e exportação sem modificações. Recomenda -se usar extensões explícitas de arquivos:
./app.js :
import { helloWorld } from './hello-world.js' ;
console . log ( helloWorld ( ) ) ; ./hello-world.js :
export function helloWorld ( ) {
return 'Hello world!' ;
} A transpilação de JavaScript é feita pelo compilador TypeScript. Por padrão, as compilerOptions do compilador de texto datilografado são definidas como o seguinte:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Você pode substituir essas opções criando um arquivo .json com suas próprias compilerOptions e dizendo a Zwitterion onde localizá-lo com a opção --tsc-options-file Line. As opções disponíveis podem ser encontradas aqui. As opções são especificadas como um objeto JSON. Por exemplo:
tsc-options.json :
{
"target" : " ES5 "
}Diga a Zwitterion onde localizá -lo:
zwitterion --tsc-options-file tsc-options.jsonO TypeScript é um superconjunto digitado do JavaScript. Você pode aprender mais aqui.
A importação de texto é direta e funciona conforme o esperado. Basta usar declarações de importação e exportação sem modificações. Recomenda -se usar extensões explícitas de arquivos:
./app.ts :
import { helloWorld } from './hello-world.ts' ;
console . log ( helloWorld ( ) ) ; ./hello-world.ts :
export function helloWorld ( ) : string {
return 'Hello world!' ;
} Por padrão, as compilerOptions do compilador de texto datilografado são definidas como o seguinte:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Você pode substituir essas opções criando um arquivo .json com suas próprias compilerOptions e dizendo a Zwitterion onde localizá-lo com a opção --tsc-options-file Line. As opções disponíveis podem ser encontradas aqui. As opções são especificadas como um objeto JSON. Por exemplo:
tsc-options.json :
{
"target" : " ES5 "
}Diga a Zwitterion onde localizá -lo:
zwitterion --tsc-options-file tsc-options.jsonO JSON é fornecido como uma exportação padrão. Recomenda -se usar extensões explícitas de arquivos:
./app.js :
import helloWorld from './hello-world.json' ;
console . log ( helloWorld ) ; ./hello-world.json :
{
"hello" : " world "
}A importação de JSX é direta e funciona como esperado. Basta usar declarações de importação e exportação sem modificações. Recomenda -se usar extensões explícitas de arquivos:
./app.js :
import { helloWorldElement } from './hello-world.jsx' ;
ReactDOM . render (
helloWorldElement ,
document . getElementById ( 'root' )
) ; ./hello-world.jsx :
export const hellowWorldElement = < h1 > Hello, world! </ h1 > ; A transpilação JSX é feita pelo compilador de texto datilografado. Por padrão, as compilerOptions do compilador de texto datilografado são definidas como o seguinte:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Você pode substituir essas opções criando um arquivo .json com suas próprias compilerOptions e dizendo a Zwitterion onde localizá-lo com a opção --tsc-options-file Line. As opções disponíveis podem ser encontradas aqui. As opções são especificadas como um objeto JSON. Por exemplo:
tsc-options.json :
{
"target" : " ES5 "
}Diga a Zwitterion onde localizá -lo:
zwitterion --tsc-options-file tsc-options.jsonA importação de TSX é direta e funciona conforme o esperado. Basta usar declarações de importação e exportação sem modificações. Recomenda -se usar extensões explícitas de arquivos:
./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 > ; A transpilação de TSX é feita pelo compilador TypeScript. Por padrão, as compilerOptions do compilador de texto datilografado são definidas como o seguinte:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Você pode substituir essas opções criando um arquivo .json com suas próprias compilerOptions e dizendo a Zwitterion onde localizá-lo com a opção --tsc-options-file Line. As opções disponíveis podem ser encontradas aqui. As opções são especificadas como um objeto JSON. Por exemplo:
tsc-options.json :
{
"target" : " ES5 "
}Diga a Zwitterion onde localizá -lo:
zwitterion --tsc-options-file tsc-options.jsonAssemblyscript é um novo idioma que compila um subconjunto estrito do TypeScript para WebAssembly. Você pode aprender mais sobre isso no livro Assemblycript.
Zwitterion assume que os arquivos de Assemblyscript têm a extensão de arquivo .as . Esta é uma opção de extensão específica de zwitterion, pois o projeto Assemblyscript ainda não escolheu sua própria extensão oficial de arquivo. Você pode seguir essa discussão aqui. O Zwitterion seguirá a escolha oficial de extensão assim que for feita.
A importação de Assemblyscript é quase idêntica à importação de JavaScript ou TypeScript. A principal diferença é que a exportação padrão do seu módulo de Assemblyscript de entrada é uma função que retorna uma promessa. Esta função leva como seu parâmetro um objeto que contém importações no módulo AssemblyScript.
A passagem de valores de e para funções exportadas dos módulos de Assemblyscript deve ser direta, mas existem algumas limitações. O Zwitterion usa como bêmula sob o capô para intermediar os valores de e para os módulos AssemblyScript. Olhe lá se precisar de mais informações.
Você pode importar o Assemblycript de JavaScript ou arquivos tipycript como este:
./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 ;
}Se você deseja transmitir as importações de fora do ambiente Assemblyscript, cria um arquivo com declarações de exportação que definem os tipos de importações. Em seguida, você passa suas importações como um objeto para a função Init do módulo de Assemblyscript. O nome da propriedade que define suas importações para um módulo deve ser o nome do arquivo exato do arquivo exportando as declarações de importação. Por exemplo:
./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 ;
}Você também pode importar o Assemblyscript de arquivos de Assemblycript, como assim:
./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 ;
} Por padrão, nenhuma opção de compilador foi definida. As opções disponíveis podem ser encontradas aqui. Você pode adicionar opções criando um arquivo .json com uma matriz de nomes e valores de opções e dizendo a Zwitterion onde localizá-lo com a opção de linha de comando --asc-options-file . Por exemplo:
./asc-options.json :
[
" --optimizeLevel " , " 3 " ,
" --runtime " , " none " ,
" --shrinkLevel " , " 2 "
]Diga a Zwitterion onde localizá -lo:
zwitterion --asc-options-file asc-options.jsonA ferrugem é uma linguagem de baixo nível focada no desempenho, confiabilidade e produtividade. Saiba mais aqui.
Atualmente, o suporte à ferrugem é muito básico (ou seja, o suporte a WASM-Bindgen). Você deve ter ferrugem instalada em sua máquina. Você pode encontrar instruções para instalar ferrugem aqui. É um objetivo de zwitterion instalar automaticamente uma versão local das ferramentas de ferrugem necessárias quando o Zwitterion é instalado, mas isso atualmente é um trabalho em andamento.
A importação de ferrugem é quase idêntica à importação de JavaScript ou TypeScript. A principal diferença é que a exportação padrão do seu módulo de ferrugem de entrada é uma função que retorna uma promessa. Essa função leva como seu parâmetro um objeto que contém importações para o módulo de ferrugem. Você pode importar ferrugem de arquivos JavaScript ou TypeScript como este:
./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 ;
}Atualmente, o suporte é muito básico. Você deve ter o EMSCRIPTEN instalado em sua máquina. Você pode encontrar instruções para instalar o Emscript aqui. É um objetivo de zwitterion instalar automaticamente uma versão local da ferramenta C necessária quando o Zwitterion é instalado, mas isso atualmente é um trabalho em andamento.
A importação de C é quase idêntica à importação de JavaScript ou TypeScript. A principal diferença é que a exportação padrão do seu módulo C é uma função que retorna uma promessa. Essa função leva como seu parâmetro um objeto que contém importações para o módulo C. Você pode importar C a partir de arquivos JavaScript ou TypeScript como este:
./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 ;
}Atualmente, o suporte ao C ++ é muito básico. Você deve ter o EMSCRIPTEN instalado em sua máquina. Você pode encontrar instruções para instalar o Emscript aqui. É um objetivo de zwitterion instalar automaticamente uma versão local da ferramenta C ++ necessária quando o Zwitterion é instalado, mas isso atualmente é um trabalho em andamento.
A importação de C ++ é quase idêntica à importação de JavaScript ou TypeScript. A principal diferença é que a exportação padrão do seu módulo C ++ é uma função que retorna uma promessa. Esta função leva como seu parâmetro um objeto que contém importações para o módulo C ++. Você pode importar C ++ de arquivos JavaScript ou TypeScript como este:
./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 é uma representação textual do formato binário WASM. Ele permite que o WASM seja mais facilmente escrito à mão. Saiba mais aqui.
A importação de WAT é quase idêntica à importação de JavaScript ou TypeScript. A principal diferença é que a exportação padrão do seu módulo WAT de entrada é uma função que retorna uma promessa. Essa função leva como seu parâmetro um objeto que contém importações para o módulo WAT. Você pode importar WAT de arquivos JavaScript ou TypeScript como este:
./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))
)O WASM é um formato de instrução binário construído para ser eficiente, seguro, portátil e aberto. Saiba mais aqui.
A importação de WASM é quase idêntica à importação de JavaScript ou TypeScript. A principal diferença é que a exportação padrão do seu módulo WASM de entrada é uma função que retorna uma promessa. Essa função leva como seu parâmetro um objeto que contém importações para o módulo WASM. Você pode importar WASM de arquivos JavaScript ou TypeScript como este:
./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`
Especifique a porta do servidor:
--port [port]Crie uma construção estática do diretório de trabalho atual. A saída estará em um diretório chamado Dist no diretório de trabalho atual:
--build-staticUma lista de caminhos separados por vírgula, em relação ao diretório atual, para excluir da construção estática:
--exclude [exclude]Uma lista de caminhos separados por vírgula, em relação ao diretório atual, para incluir na construção estática
--include [include]Um caminho para um arquivo, em relação ao diretório atual, para servir como raiz do spa. Será devolvido para o caminho raiz e quando um arquivo não puder ser encontrado:
--spa-root [spaRoot]Desative o redirecionamento do spa para index.html:
--disable-spaUm caminho para um arquivo JSON, em relação ao diretório atual, para cabeçalhos HTTP personalizados:
--headers-file [headersFile]Os cabeçalhos HTTP personalizados são especificados como um objeto JSON com a seguinte forma:
type CustomHTTPHeaders = {
[ regexp : string ] : HTTPHeaders ;
}
type HTTPHeaders = {
[ key : string ] : string ;
}Por exemplo:
./headers.json
{
"^service-worker.ts$" : {
"Service-Worker-Allowed" : " / "
}
}Um caminho para um arquivo JSON, em relação ao diretório atual, para opções de compilador TSC:
--tsc-options-file [tscOptionsFile]As opções disponíveis podem ser encontradas aqui. As opções são especificadas como um objeto JSON. Por exemplo:
tsc-options.json :
{
"target" : " ES5 "
}Um caminho para um arquivo json, em relação ao diretório atual, para as opções do compilador ASC:
--asc-options-file [ascOptionsFile]Por padrão, nenhuma opção de compilador foi definida. As opções disponíveis podem ser encontradas aqui. As opções são especificadas como uma matriz de nomes e valores de opções. Por exemplo:
./asc-options.json :
[
" --optimizeLevel " , " 3 " ,
" --runtime " , " none " ,
" --shrinkLevel " , " 2 "
]Os pacotes de terceiros devem ser de autoria como se estivessem usando o zwitterion. Essencialmente, isso significa que eles devem ser de autoria em JavaScript ou TypeScript padrão, e AssemblyScript, Rust, C e C ++ devem ser de autoria de acordo com a documentação da WebAssembly. Exceções notáveis serão explicadas nesta documentação. Commonjs (as importações de módulos de sintaxe, JSON, HTML ou CSS ES e outros recursos não padrão que os pacotes geralmente suportam não são suportados no código-fonte.
É importante observar que o Zwitterion assume que o arquivo root (o arquivo encontrado em / ) do seu aplicativo da web é sempre um arquivo index.html .
O Zwitterion depende do suporte ao navegador nativo para os módulos ES (sintaxe de importação/exportação). Você deve adicionar o atributo type="module" aos elementos de script que referenciar módulos, por exemplo:
<script type="module" src="amazing-module.ts"></script>
É importante observar que o Zwitterion não agrupa arquivos nem se envolve no tremor de árvores. Isso pode afetar o desempenho do seu aplicativo. Os módulos HTTP2 e ES podem ajudar no desempenho, mas neste momento os sinais de tempo tendem a apontar para o pior desempenho. O Zwitterion tem planos de melhorar o desempenho gerando automaticamente o servidor HTTP2 empurrar informações da construção estática e olhando para o tremor de árvores, mas não está claro o que afetará isso. Fique atento para obter mais informações sobre o desempenho à medida que o zwitterion amadurece.
Com tudo o que foi dito acima, as implicações de desempenho não são claras. Medir por si mesmo.
Leia o seguinte para obter mais informações sobre agrupamento versus não agrupamento com http2:
O zwitterion é simples. É mais ou menos um servidor de arquivos estático, mas reescreve os arquivos solicitados na memória, conforme necessário, para retornar ao cliente. Por exemplo, se um arquivo digital for solicitado do cliente, o Zwitterion recuperará o texto do arquivo, compilará -o ao JavaScript e retornará o texto compilado ao cliente. O mesmo é feito para arquivos JavaScript. De fato, quase o mesmo processo será usado para qualquer extensão de arquivo que queremos apoiar no futuro. Por exemplo, no futuro, se um arquivo C for solicitado, ele será lido na memória, o texto será compilado ao WebAssembly e a montagem web será devolvida ao cliente. Toda essa compilação é feita no lado do servidor e oculta do usuário. Para o usuário, é apenas um servidor de arquivos estático.
