Skip to content

Commit 6757403

Browse files
authored
Merge pull request #104 from newshahn/master
polyfills and transpilers
2 parents 043f2e7 + 01a4d81 commit 6757403

File tree

1 file changed

+46
-46
lines changed

1 file changed

+46
-46
lines changed
Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,92 @@
11

2-
# Polyfills and transpilers
2+
# پلیفیل‌ها و ترنسپایلرها
33

4-
The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
4+
زبان جاوااسکریپت پیوسته در حال تکامل است. پیشنهادهایی برای بهتر شدن آن به‌طور منظم صورت می‌گیرد، این پیشنهاد‌ها بررسی می‌شوند و اگر ارزشمند باشند، به لیست <https://tc39.github.io/ecma262/> اضافه می‌شوند و سپس برای [تشخیص](http://www.ecma-international.org/publications/standards/Ecma-262.htm) پیش می‌روند.
55

6-
Teams behind JavaScript engines have their own ideas about what to implement first. They may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do.
6+
تیم‌های مسئول موتورهای جاوااسکریپت تصمیم می‌گیرند کدام یک را اول پیاده‌سازی کنند. ممکن است تصمیم بگیرند پیشنهادهایی که هنوز به‌صورت پیش‌نویس هستند را اول پیاده‌سازی کنند و پیشنهادهایی که در مرحلهٔ تشخیص هستند را به بعدتر موکول کنند، به دلیل اینکه کمتر جالب هستند و یا فقط سخت‌تر هستند.
77

8-
So it's quite common for an engine to implement only the part of the standard.
8+
پس کاملا طبیعی است که یک موتور فقط بخشی از یک استاندارد را پیاده‌سازی کند.
99

10-
A good page to see the current state of support for language features is <https://kangax.github.io/compat-table/es6/> (it's big, we have a lot to study yet).
10+
یک صفحه‌ی خوب برای این که ببینید در حال حاضر چه چیزهایی پشتیبانی می‌شود اینجاست <https://kangax.github.io/compat-table/es6/> (خیلی بزرگ است، ما چیزهای زیادی برای مطالعه داریم).
1111

12-
As programmers, we'd like to use most recent features. The more good stuff - the better!
12+
به عنوان توسعه‌دهنده، ما همیشه دوست داریم از ویژگی‌ها و امکانات جدید استفاده کنیم. هر چه جدیدتر، بهتر!
1313

14-
On the other hand, how to make our modern code work on older engines that don't understand recent features yet?
14+
از طرف دیگر، دوست داریم کدهایمان روی مرورگرهای قدیمی‌تر که امکانات جدید را نمی‌فهمند هم کار کنند. اما چطور می‌شود این کار را انجام داد؟
1515

16-
There are two tools for that:
16+
دو ابزار برای این کار وجود دارد:
1717

18-
1. Transpilers.
19-
2. Polyfills.
18+
1. ترنسپایلرها (Transpilers).
19+
2. پلیفیل‌ها (Polyfills).
2020

21-
Here, in this chapter, our purpose is to get the gist of how they work, and their place in web development.
21+
هدف ما در این فصل این است که درک کنیم این دو چگونه کار می‌کنند و جایگاه آن‌ها در توسعه وب چیست.
2222

23-
## Transpilers
23+
## ترنسپایلرها
2424

25-
A [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) is a special piece of software that can parse ("read and understand") modern code, and rewrite it using older syntax constructs, so that the result would be the same.
25+
یک [ترنسپایلر](https://en.wikipedia.org/wiki/Source-to-source_compiler) در واقع قطعه‌ای نرم‌افزار است که می‌تواند کد مدرن و جدید را parse کند ("بخواند و بفهمد") و سپس همان کد را با syntax قدیمی بازنویسی کند به‌طوری که خروجی کد یکسان باشد.
2626

27-
E.g. JavaScript before year 2020 didn't have the "nullish coalescing operator" `??`. So, if a visitor uses an outdated browser, it may fail to understand the code like `height = height ?? 100`.
27+
برای مثال جاوااسکریپت تا سال ۲۰۲۰ "nullish coalescing عملگر" `??` را نداشت. و اگر کاربری از یک مرورگر منسوخ‌شده استفاده کند، ممکن است کدی مانند `height = height ?? 100` را متوجه نشود.
2828

29-
A transpiler would analyze our code and rewrite `height ?? 100` into `(height !== undefined && height !== null) ? height : 100`.
29+
یک ترنسپایلر این کد را آنالیز می‌کند و `height ?? 100` را به‌صورت `(height !== undefined && height !== null) ? height : 100` بازنویسی می‌کند.
3030

3131
```js
32-
// before running the transpiler
32+
// قبل از اجرا شدن ترنسپایلر
3333
height = height ?? 100;
3434

35-
// after running the transpiler
36-
height = (height !== undefined && height !== null) ? height : 100;
35+
// بعد از اجرا شدن ترنسپایلر
36+
height = height !== undefined && height !== null ? height : 100;
3737
```
3838
39-
Now the rewritten code is suitable for older JavaScript engines.
39+
کد بازنویسی شده مناسب موتورهای قدیمی‌تر جاوااسکریپت است.
4040
41-
Usually, a developer runs the transpiler on their own computer, and then deploys the transpiled code to the server.
41+
معمولا توسعه‌دهنده ترنسپایلر را روی کامپیوتر خودش اجرا می‌کند و سپس کد transpileشده را روی سرور deploy می‌کند.
4242
43-
Speaking of names, [Babel](https://babeljs.io) is one of the most prominent transpilers out there.
43+
حالا که صحبتش شد، بهتر است بدانید [Babel](http://babeljs.io/) یکی از برجسته‌ترین ترنسپایلرها است.
4444
45-
Modern project build systems, such as [webpack](http://webpack.github.io/), provide means to run transpiler automatically on every code change, so it's very easy to integrate into development process.
45+
سیستم‌های build پروژه مدرن مثل [webpack](http://webpack.github.io/) این امکان را می‌دهند که بعد از هر بار تغییر کد، ترنسپایلر به‌صورت اتوماتیک اجرا شود و برای همین ادغام کردن آن در روند توسعه کار بسیار ساده‌ای است.
4646
47-
## Polyfills
47+
## پلیفیل‌ها
4848
49-
New language features may include not only syntax constructs and operators, but also built-in functions.
49+
فیچر‌ها و امکانات جدید یک زبان می‌توانند علاوه بر syntax و عملگرهای جدید، تابع‌های جدید نیز باشند.
5050
51-
For example, `Math.trunc(n)` is a function that "cuts off" the decimal part of a number, e.g `Math.trunc(1.23) = 1`.
51+
برای مثال `Math.trunc(n)` یک تابع است که بخش دهدهی یک عدد را حذف می‌کند. مانند `Math.trunc(1.23) = 1`.
5252
53-
In some (very outdated) JavaScript engines, there's no `Math.trunc`, so such code will fail.
53+
در برخی از موتورهای (خیلی قدیمی) جاوااسکریپت تابع `Math.trunc` وجود ندارد و چنین کدی اجرا نمی‌شود.
5454
55-
As we're talking about new functions, not syntax changes, there's no need to transpile anything here. We just need to declare the missing function.
55+
از آن‌جایی که داریم راجع‌به تابع‌های جدید صحبت می‌کنیم و بحث تغییر syntax نیست، اینجا چیزی برای transpile وجود ندارد. فقط باید تابع ناموجود را تعریف کنیم.
5656
57-
A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations.
57+
اسکریپتی که تابع‌های جدید آپدیت و یا اضافه می‌کند، «پلیفیل» نام دارد. در واقع جای خالی را پر می‌کند و پیاده‌سازی‌های لازم را انجام می‌دهد.
5858
59-
For this particular case, the polyfill for `Math.trunc` is a script that implements it, like this:
59+
در این مثال خاص، پلیفیلی که برای `Math.trunc` وجود دارد یک اسکریپت است که آن را پیاده‌سازی کرده است. مانند زیر:
6060
6161
```js
62-
if (!Math.trunc) { // if no such function
63-
// implement it
64-
Math.trunc = function(number) {
65-
// Math.ceil and Math.floor exist even in ancient JavaScript engines
66-
// they are covered later in the tutorial
62+
if (!Math.trunc) { // اگر چنین تابعی وجود ندارد
63+
// آن زا پیاده‌سازی کن
64+
Math.trunc = function (number) {
65+
// Math.ceil و Math.floor جتی در موتورهای قدیمی جاوااسکریپت هم حضور دارند
66+
// و در همین tutorial جلوتر آموزش داده می‌شوند
6767
return number < 0 ? Math.ceil(number) : Math.floor(number);
6868
};
6969
}
7070
```
7171
72-
JavaScript is a highly dynamic language, scripts may add/modify any functions, even including built-in ones.
72+
جاوااسکریپت یک زبان به‌شدت داینامیک است. اسکریپت‌ها می‌توانند هر تابعی را تغییر دهند یا اضافه کنند. حتی تابع‌های built-in.
7373
74-
Two interesting libraries of polyfills are:
75-
- [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features.
76-
- [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser.
74+
دو کتابخانه جالب پلیفیل‌ها:
75+
- [core js](https://github.com/zloirock/core-js) که از چیزهای زیادی پشتیبانی می‌کند و اجازه می‌دهد فقط فیچرهای مورد نیاز خود را اضافه کنید.
76+
- [polyfill.io](http://polyfill.io) سرویسی که یک اسکریپت با پلیفیل‌ها ارائه می‌دهد. بسته به فیچرها و مرورگر کاربر.
7777
7878
79-
## Summary
79+
## خلاصه
8080
81-
In this chapter we'd like to motivate you to study modern and even "bleeding-edge" language features, even if they aren't yet well-supported by JavaScript engines.
81+
در این فصل ما می‌خواهیم به شما انگیزه بدهیم تا بروید و فیچرهای جدید زبان را یاد بگیرید. حتی اگر هنوز توسط موتورهای جاوااسکریپت به‌خوبی پشتیبانی نمی‌شوند.
8282
83-
Just don't forget to use transpiler (if using modern syntax or operators) and polyfills (to add functions that may be missing). And they'll ensure that the code works.
83+
فراموش نکنید که از یک ترنسپایلر (اگر از syntax یا عملگرهای مدرن استفاده می‌کنید) و پلیفیل‌ها (برای اضافه کردن تابع‌هایی که ممکن است موجود نباشند) استفاده کنید. و با این کار مطمئن خواهید بود که کد شما کار می‌کند.
8484
85-
For example, later when you're familiar with JavaScript, you can setup a code build system based on [webpack](http://webpack.github.io/) with [babel-loader](https://github.com/babel/babel-loader) plugin.
85+
برای مثال، بعدها که با جاوااسکریپت آشنایی بیشتری پیدا کنید، می‌توانید یک سیستم build کد با [webpack](http://webpack.github.io/) و پلاگین [babel-loader](https://github.com/babel/babel-loader) راه‌اندازی کنید.
8686
87-
Good resources that show the current state of support for various features:
88-
- <https://kangax.github.io/compat-table/es6/> - for pure JavaScript.
89-
- <https://caniuse.com/> - for browser-related functions.
87+
منابع خوبی که نشان می‌دهند فیچرهای مختلف در چه حالتی از پشتیبانی قرار دارند:
88+
- <https://kangax.github.io/compat-table/es6/> - برای جاوااسکریپت.
89+
- <https://caniuse.com/> - برای تابع‌های مربوط به مرورگر.
9090
91-
P.S. Google Chrome is usually the most up-to-date with language features, try it if a tutorial demo fails. Most tutorial demos work with any modern browser though.
91+
پانوشت گوگل کروم معمولا نسبت به فیچرهای زبان به‌روزترین است. اگر دموی یک آموزش کار نکرد، آن را امتحان کنید. البته بیشتر دموهای آموزش با هر مرورگر مدرنی کار می‌کنند.
9292

0 commit comments

Comments
 (0)