zwitterion
1.0.0
무엇이든 가져올 수있는 웹 개발자 서버*
* 당신이 의미하는 경우 : JavaScript ES2015+, TypeScript, JSON, JSX, TSX, AssemblyScript, Rust, C, C ++, WebAssembly 및 JavaScript 또는 WebAssembly에 컴파일하는 모든 내용.
Zwitterion은 현재 웹 개발 정적 파일 서버를 즉시 대체하도록 설계되었습니다.
정적 빌드를 통해 생산 배포도 가능합니다.
예를 들어, 다음과 같은 내용을 쓸 수 있으며 작동합니다.
./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을 사용하면 웹 개발의 좋은 시절로 돌아갈 수 있습니다.
지원되는 언어로 소스 코드를 작성하여 브라우저에서 실행하십시오.
또한 ... Zwitterion은 번들이 아닙니다. 그것은 더 간단한 경험을 위해 번들링을 피합니다.
import * as stuff from 'library'; import * as stuff from '../node_modules/library/index.js'; )index.html 반환합니다)파일을 제공하려는 디렉토리에 zwitterion을 설치하십시오.
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 (Content Delivery Network) 또는 다른 정적 파일 호스팅 서비스에 업로드 할 수 있습니다.
생산에서 실행중인 Zwitterion 서버를 사용할 수도 있지만 성능 및 잠재적 인 보안상의 이유로 권장되지 않습니다.
정적 빌드를 만들려면 --build-static 옵션으로 Zwitterion을 실행하십시오. application/javascript MIME 유형을 TypeScript, AssemblyScript, Rust, WASM 및 WAT 파일에 대한 호스팅 제공 업체에 추가해야 할 것입니다.
터미널에서 :
zwitterion --build-staticNPM 스크립트에서 :
{
...
" 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 변환은 TypeScript 컴파일러에 의해 수행됩니다. 기본적으로 Typescript 컴파일러의 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의 입력 된 슈퍼 세트입니다. 여기에서 더 많은 것을 배울 수 있습니다.
TypeScript 가져 오기는 간단하며 예상대로 작동합니다. 수정없이 가져 오기 및 내보내기 명세서를 사용하십시오. 명시 적 파일 확장자를 사용하는 것이 좋습니다.
./app.ts :
import { helloWorld } from './hello-world.ts' ;
console . log ( helloWorld ( ) ) ; ./hello-world.ts :
export function helloWorld ( ) : string {
return 'Hello world!' ;
} 기본적으로 Typescript 컴파일러의 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 변환은 TypeScript 컴파일러에 의해 수행됩니다. 기본적으로 Typescript 컴파일러의 compilerOptions 다음으로 설정됩니다.
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} 고유 한 compilerOptions 로 .json 파일을 작성하고 Zwitterion에 --tsc-options-file 명령 줄 옵션으로 위치 할 위치를 알려 주면 이러한 옵션을 무시할 수 있습니다. 사용 가능한 옵션은 여기에서 찾을 수 있습니다. 옵션은 JSON 객체로 지정됩니다. 예를 들어:
tsc-options.json :
{
"target" : " ES5 "
}Zwitterion을 어디에서 찾을 지 알 수 있습니다.
zwitterion --tsc-options-file tsc-options.jsonTSX 가져 오기는 간단하며 예상대로 작동합니다. 수정없이 가져 오기 및 내보내기 명세서를 사용하십시오. 명시 적 파일 확장자를 사용하는 것이 좋습니다.
./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 컴파일러의 compilerOptions 다음으로 설정됩니다.
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} 고유 한 compilerOptions 로 .json 파일을 작성하고 Zwitterion에 --tsc-options-file 명령 줄 옵션으로 위치 할 위치를 알려 주면 이러한 옵션을 무시할 수 있습니다. 사용 가능한 옵션은 여기에서 찾을 수 있습니다. 옵션은 JSON 객체로 지정됩니다. 예를 들어:
tsc-options.json :
{
"target" : " ES5 "
}Zwitterion을 어디에서 찾을 지 알 수 있습니다.
zwitterion --tsc-options-file tsc-options.jsonAssemblyScript는 webAssembly에 엄격한 TypeScript의 하위 집합을 컴파일하는 새로운 언어입니다. 어셈블리 스크립트 서적에서 더 많이 배울 수 있습니다.
Zwitterion은 AssemblyScript 파일에 .as 파일 확장자가 있다고 가정합니다. 어셈블리 스크립트 프로젝트가 아직 자체 공식 파일 확장을 선택하지 않았기 때문에 이것은 Zwitterion 특이 확장 선택입니다. 여기서 그 토론을 따를 수 있습니다. Zwitterion은 일단 공식 확장 선택을 따릅니다.
어셈블리 스크립트 가져 오기는 JavaScript 또는 TypeScript 가져 오기와 거의 동일합니다. 주요 차이점은 Entry AssemblyScript 모듈의 기본 내보내기가 약속을 반환하는 함수라는 것입니다. 이 기능은 하나의 매개 변수로서 AssemblyScript 모듈로 가져 오는 객체를 사용합니다.
어셈블리 스크립트 모듈에서 내보낸 함수로 값을 전달하는 것은 간단해야하지만 몇 가지 제한 사항이 있습니다. Zwitterion은 후드 아래에서 바인드를 사용하여 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 Module 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는 성능, 신뢰성 및 생산성에 중점을 둔 저수준 언어입니다. 여기에서 자세히 알아보십시오.
Rust Support는 현재 매우 기본적입니다 (즉, WASM-BINDGEN 지원 없음). 컴퓨터에 녹이 설치되어 있어야합니다. Rust를 설치하기위한 지침을 여기에서 찾을 수 있습니다. Zwitterion이 설치 될 때 필요한 녹 도구의 로컬 버전을 자동으로 설치하는 것이 Zwitterion의 목표이지만 현재 진행중인 작업입니다.
Rust 가져 오기는 JavaScript 또는 TypeScript 가져 오기와 거의 동일합니다. 주요 차이점은 Entry Rust 모듈의 기본 내보내기가 약속을 반환하는 함수라는 것입니다. 이 기능은 하나의 매개 변수로 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 지원은 현재 매우 기본적입니다. 컴퓨터에 emscripten을 설치해야합니다. emscripten을 설치하기위한 지침을 여기에서 찾을 수 있습니다. Zwitterion이 설치 될 때 필요한 C 툴링의 로컬 버전을 자동으로 설치하는 것이 Zwitterion의 목표이지만 현재 진행중인 작업입니다.
C 가져 오기는 JavaScript 또는 TypeScript 가져 오기와 거의 동일합니다. 주요 차이점은 Entry 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이 설치 될 때 필요한 C ++ 툴링의 로컬 버전을 자동으로 설치하는 것이 Zwitterion의 목표이지만 현재 진행중인 작업입니다.
C ++ 가져 오기는 JavaScript 또는 TypeScript 가져 오기와 거의 동일합니다. 주요 차이점은 항목 C ++ 모듈의 기본 내보내기가 약속을 반환하는 함수라는 것입니다. 이 기능은 하나의 매개 변수로서 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;
}
}
WAT는 WASM 바이너리 형식의 텍스트 표현입니다. 그것은 wasm을 더 쉽게 손으로 쓸 수있게합니다. 여기에서 자세히 알아보십시오.
WAT 가져 오기는 JavaScript 또는 TypeScript 가져 오기와 거의 동일합니다. 주요 차이점은 입력 WAT 모듈의 기본 내보내기가 약속을 반환하는 함수라는 것입니다. 이 함수는 하나의 매개 변수로 WAT 모듈로 가져 오는 객체를 사용합니다. JavaScript 또는 TypeScript 파일에서 와트를 가져올 수 있습니다.
./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 또는 TypeScript 가져 오기와 거의 동일합니다. 주요 차이점은 항목 WASM 모듈의 기본 내보내기가 약속을 반환하는 함수라는 것입니다. 이 기능은 하나의 매개 변수로서 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 컴파일러 옵션에 대한 현재 디렉토리와 관련하여 JSON 파일의 경로 :
--tsc-options-file [tscOptionsFile]사용 가능한 옵션은 여기에서 찾을 수 있습니다. 옵션은 JSON 객체로 지정됩니다. 예를 들어:
tsc-options.json :
{
"target" : " ES5 "
}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 모듈 가져 오기 및 Bundlers가 일반적으로 지원하는 기타 비표준 기능은 소스 코드에서지지하지 않습니다.
Zwitterion은 웹 응용 프로그램의 루트 파일 ( / 에서 찾은 파일)이 항상 index.html 파일이라고 가정하는 것이 중요합니다.
Zwitterion은 ES 모듈에 대한 기본 브라우저 지원 (가져 오기/내보내기 구문)에 따라 다릅니다. 예를 들어 모듈을 참조하는 스크립트 요소에 type="module" 속성을 추가해야합니다.
<script type="module" src="amazing-module.ts"></script>
Zwitterion은 파일을 번들로 묶거나 나무 흔들림에 관여하지 않는다는 점에 유의해야합니다. 이는 응용 프로그램의 성능에 영향을 줄 수 있습니다. HTTP2 및 ES 모듈은 성능에 도움이 될 수 있지만,이 시점 에서이 시점에서 징후는 성능이 악화되는 경향이 있습니다. Zwitterion은 정적 빌드에서 HTTP2 서버 푸시 정보를 자동으로 생성하고 트리 흔들림을 살펴보면 성능을 향상시킬 계획이지만 이것이 어떤 영향을 미칠지는 확실하지 않습니다. Zwitterion이 성숙함에 따라 성능에 대한 자세한 정보를 얻으십시오.
위의 모든 내용이 말하면 성능의 영향은 불분명합니다. 자신을 위해 측정하십시오.
번들링에 대한 자세한 내용은 http2와 함께 번들링하지 않으려면 다음을 참조하십시오.
Zwitterion은 간단합니다. 정적 파일 서버이지만 클라이언트로 돌아 가기 위해 필요한 경우 메모리에 요청 된 파일을 다시 작성합니다. 예를 들어, 클라이언트에서 TypeScript 파일이 요청되면 Zwitterion은 파일의 텍스트를 검색하고 JavaScript로 컴파일 한 다음 컴파일 된 텍스트를 클라이언트에 반환합니다. JavaScript 파일에 대해서도 마찬가지입니다. 실제로, 거의 동일한 프로세스가 향후 지원하고자하는 파일 확장에 사용될 것입니다. 예를 들어, 향후 C 파일이 요청되면 메모리로 읽히면 텍스트가 webAssembly로 컴파일되고 webAssembly가 클라이언트로 반환됩니다. 이 모든 컴파일은 서버 측에서 수행되며 사용자로부터 숨겨져 있습니다. 사용자에게는 정적 파일 서버 일뿐입니다.
