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 Directory. Вы можете взять этот каталог и загрузить его в сеть доставки контента (CDN) или другую службу хостинга статического файла.
Вы также можете использовать работающий сервер Zwitterion в производстве, но по производительности и потенциальным соображениям безопасности это не рекомендуется.
Чтобы создать статическую сборку, запустите Zwitterion с помощью опции --build-static . Вероятно, вам нужно будет добавить тип MIME application/javascript в ваш хостинг -провайдер для вашего TypeScript, AssemblyScript, 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 осуществляется компилятором TypeScript. По умолчанию компилятор TypeScript compilerOptions устанавливается на следующее:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Вы можете переопределить эти параметры, создав файл .json с помощью собственных compilerOptions и сообщив 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 "
} Вы можете переопределить эти параметры, создав файл .json с помощью собственных compilerOptions и сообщив 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 "
} Вы можете переопределить эти параметры, создав файл .json с помощью собственных compilerOptions и сообщив 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 осуществляется компилятором TypeScript. По умолчанию компилятор TypeScript compilerOptions устанавливается на следующее:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} Вы можете переопределить эти параметры, создав файл .json с помощью собственных compilerOptions и сообщив Zwitterion, где найти его с помощью параметра командной строки --tsc-options-file . Доступные варианты можно найти здесь. Параметры указаны как объект JSON. Например:
tsc-options.json :
{
"target" : " ES5 "
}Скажите Zwitterion, где его найти:
zwitterion --tsc-options-file tsc-options.jsonAssemblyscript - это новый язык, который составляет строгое подмножество типографии для webassembly. Вы можете узнать больше об этом в книге Assemblyscript.
Zwitterion предполагает, что файлы AssemblyScript имеют расширение файла .as . Это выбор расширения, специфичный для Zwitterion, так как проект AssemblyScript еще не выбрал свое официальное расширение файла. Вы можете следовать этой дискуссии здесь. Zwitterion будет следовать официальному выбору расширения после его создания.
Импорт AssemblyScript практически идентичен импорту JavaScript или TypeScript. Ключевое отличие состоит в том, что экспорт по умолчанию модуля входной сборки - это функция, которая возвращает обещание. Эта функция принимает в качестве одного параметра объект, содержащий импорт в модуль Assemblyscript.
Передача значений и из функций, экспортируемых из модулей Assemblyscript, должно быть простым, но есть некоторые ограничения. Zwitterion использует As-Bind под капюшоном к брокерам в модулях AssemblyScript и из и из. Посмотрите, если вам нужна дополнительная информация.
Вы можете импортировать AssemblyScript из файлов JavaScript или TypeScript, например:
./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. Название свойства, которое определяет ваш импорт для модуля, должно быть точным именем файла, экспортирующего импортные объявления. Например:
./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, например, SO:
./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-BINDGEN). Вы должны установить ржавчину на вашем компьютере. Вы можете найти инструкции по установке ржавчины здесь. Целью Zwitterion является автоматическая установка локальной версии необходимой Rust Tooling при установке Zwitterion, но в настоящее время это работа.
Импорт ржавчины почти идентична импорту JavaScript или TypeScript. Ключевое отличие состоит в том, что экспорт по умолчанию вашего модуля ржавчины вход является функцией, которая возвращает обещание. Эта функция принимает в качестве одного параметра объект, содержащий импорт в модуль ржавчины. Вы можете импортировать ржавчину из файлов JavaScript или TypeScript, как это:
./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. Ключевое отличие состоит в том, что экспорт по умолчанию вашего модуля ввода C является функцией, которая возвращает обещание. Эта функция принимает в качестве одного параметра объект, содержащий импорт в модуль C. Вы можете импортировать C из файлов JavaScript или TypeScript, как это:
./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 ++. Вы можете импортировать C ++ из файлов JavaScript или TypeScript, например:
./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;
}
}
Ват является текстовым представлением двоичного формата WASM. Это позволяет WASM быть легче записано вручную. Узнайте больше здесь.
Импорт WAT практически идентичен импорту JavaScript или TypeScript. Ключевое отличие состоит в том, что экспорт по умолчанию модуля вашего входа WAT является функцией, которая возвращает обещание. Эта функция принимает в качестве одного параметра объект, содержащий импорт в модуль 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. Вы можете импортировать WASM из файлов JavaScript или TypeScript, как это:
./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]Отключить спа -перенаправление на index.html:
--disable-spaПуть к файлу JSON, относительно текущего каталога, для пользовательских заголовков HTTP:
--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, и Assemblyscript, Rust, C и C ++ должны быть авторизованы в соответствии с их документацией Webassembly. Примечательные исключения будут объяснены в этой документации. CommonJS (Syntax retack), JSON, HTML или импорт модуля CSS ES, и другие нестандартные функции, которые обычно поддерживают пучки, не придерживаются исходного кода.
Важно отметить, что 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 будет возвращен клиенту. Вся эта компиляция выполнена на стороне сервера и скрыта от пользователя. Для пользователя это просто статический файловый сервер.
