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将返回给客户端。所有这些汇编都是完成了服务器端的,并且对用户隐藏了。对于用户,它只是静态文件服务器。