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 و AssectBlyScript و 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. بشكل افتراضي ، يتم ضبط compilerOptions برنامج التحويل البرمجي TypeScript على ما يلي:
{
"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!' ;
} بشكل افتراضي ، يتم ضبط compilerOptions برنامج التحويل البرمجي TypeScript على ما يلي:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} يمكنك تجاوز هذه الخيارات عن طريق إنشاء ملف .json باستخدام compilerOptions الخاص بك وإخبار Zwitterion بمكان تحديد موقعه مع خيار سطر الأوامر --tsc-options-file . يمكن العثور على الخيارات المتاحة هنا. يتم تحديد الخيارات ككائن JSON. على سبيل المثال:
tsc-options.json :
{
"target" : " ES5 "
}أخبر Zwitterion مكان تحديد موقعه:
zwitterion --tsc-options-file tsc-options.jsonيتم توفير JSON كتصدير افتراضي. يوصى باستخدام ملحقات الملفات الصريحة:
./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 > ; يتم Transpilation JSX بواسطة برنامج التحويل البرمجي TypeScript. بشكل افتراضي ، يتم ضبط compilerOptions برنامج التحويل البرمجي TypeScript على ما يلي:
{
"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 Transpilation بواسطة برنامج التحويل البرمجي TypeScript. بشكل افتراضي ، يتم ضبط compilerOptions برنامج التحويل البرمجي TypeScript على ما يلي:
{
"module" : " ES2015 " ,
"target" : " ES2015 "
} يمكنك تجاوز هذه الخيارات عن طريق إنشاء ملف .json باستخدام compilerOptions الخاص بك وإخبار Zwitterion بمكان تحديد موقعه مع خيار سطر الأوامر --tsc-options-file . يمكن العثور على الخيارات المتاحة هنا. يتم تحديد الخيارات ككائن JSON. على سبيل المثال:
tsc-options.json :
{
"target" : " ES5 "
}أخبر Zwitterion مكان تحديد موقعه:
zwitterion --tsc-options-file tsc-options.jsonAssemblyscript هي لغة جديدة تجمع مجموعة فرعية صارمة من TypeScript إلى Webassembly. يمكنك معرفة المزيد عنها في كتاب Assemblyscript.
يفترض Zwitterion أن ملفات Assemblyscript لها امتداد ملف .as . هذا اختيار تمديد خاص بـ Zwitterion ، حيث لم يختار مشروع Assemblyscript امتداد الملف الرسمي الخاص به بعد. يمكنك متابعة هذه المناقشة هنا. سوف يتبع Zwitterion اختيار التمديد الرسمي بمجرد إجراءه.
استيراد Assemblyscript متطابق تقريبًا لاستيراد javaScript أو TypeScript. الفرق الرئيسي هو أن التصدير الافتراضي لوحدة endrenclysplyscript الخاصة بك هو وظيفة تُرجع الوعد. تأخذ هذه الوظيفة كمعلمة واحدة كائن يحتوي على واردات إلى وحدة Assemblyscript.
يجب أن يكون تمرير القيم من وإلى الوظائف التي يتم تصديرها من وحدات Assemblyscript مباشرة ، ولكن هناك بعض القيود. يستخدم Zwitterion as-bind تحت غطاء محرك السيارة للوسيط من وإلى وحدات assemblyscript. انظر هناك إذا كنت بحاجة إلى مزيد من المعلومات.
يمكنك استيراد complyscript من ملفات JavaScript أو TyperScript مثل هذا:
./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 ، فأنت تقوم بإنشاء ملف بإعلانات تصدير تحدد أنواع الواردات. ثم تقوم بتمرير الواردات الخاصة بك ككائن إلى وظيفة init للوحدة 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 ، مثل ذلك:
./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 لتثبيت إصدار محلي تلقائيًا من أدوات الصدأ اللازمة عند تثبيت 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. يمكنك استيراد وات من ملفات 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 القياسية ، ويجب تأليف Assemblyscript و Rust و C و C ++ وفقًا لوثائق WebAssembly. سيتم شرح استثناءات ملحوظة في هذه الوثائق. لا يتم دعم وحدات الوحدة النمطية CommonJs (المطلوبة) أو 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 إلى العميل. يتم إجراء كل هذا التجميع من جانب الخادم ومخفي من المستخدم. للمستخدم ، إنه مجرد خادم ملفات ثابت.
