ساخت یک پروژه با Rollup ، Typecript و Babel برای سازگاری ES5

در چشم انداز توسعه وب مدرن ، توسعه دهندگان اغلب از آخرین ویژگی های JavaScript (ES6+) و TypeScript برای ساخت برنامه های قوی و قابل حفظ استفاده می کنند. با این حال ، همه محیط ها از این ویژگی های مدرن پشتیبانی نمی کنند. دستگاه های قدیمی تر ، مانند تلویزیون های هوشمند ، اغلب به موتورهای JavaScript منسوخ که فقط از آنها پشتیبانی می کنند متکی هستند ES5 (Ecmascript 2009). این یک چالش برای توسعه دهندگان که باید اطمینان حاصل کنند که برنامه های کاربردی آنها به راحتی در این دستگاه ها اجرا می شود ، ایجاد می کند. در این مقاله ، ما نحوه ساخت یک پروژه را با استفاده از آن بررسی خواهیم کرد غلتکبا شرحوت بنگل برای پشتیبانی از ES5 ، به طور خاص محیط های تلویزیون هوشمند قدیمی را هدف قرار دهید.

چرا از ES5 پشتیبانی می کنیم؟

1 دستگاه های میراث و تلویزیون های هوشمند

بسیاری از تلویزیون های هوشمند قدیمی ، کنسول های بازی و سیستم های تعبیه شده بر روی مرورگرهایی با قابلیت JavaScript محدود اجرا می شوند. این دستگاه ها اغلب از موتورهای مرورگر منسوخ (به عنوان مثال ، WebKit یا نسخه های قدیمی تر کروم) استفاده می کنند که فقط از آنها پشتیبانی می کنند ES5بشر ویژگی های جاوا اسکریپت مدرن مانند letبا const، توابع فلش ، و Promise در این محیط ها در دسترس نیستند.

به عنوان مثال:

• تلویزیون های هوشمند سامسونگ (2012-2015): بسیاری از این تلویزیون ها از مرورگر Tizen استفاده می کنند که دارای پشتیبانی ES6+ محدود است.
• تلویزیون های هوشمند ال جی: مدل های قدیمی تر از مرورگرهای Netcast یا WebOS 1.0-2.0 استفاده می کنند ، که همچنین فاقد ویژگی های مدرن JavaScript هستند.
• سایر دستگاه ها: کنسول های بازی مانند PlayStation 3 یا Xbox 360 و همچنین تلفن های هوشمند کم مصرف ، اغلب محدودیت های مشابهی دارند.

اگر برنامه شما این دستگاه ها را هدف قرار دهد ، عدم پشتیبانی از ES5 منجر به عملکرد شکسته یا تصادفات آشکار خواهد شد.

2 مخاطبان گسترده تر به

با پشتیبانی از ES5 ، اطمینان حاصل می کنید که برنامه شما می تواند در طیف وسیعی از دستگاه ها از جمله دستگاه های قدیمی تر اجرا شود. این امر به ویژه برای برنامه های کاربردی مانند سرویس های پخش ، که معمولاً در تلویزیون های هوشمند استفاده می شوند ، بسیار مهم است. نادیده گرفتن سازگاری ES5 می تواند بخش قابل توجهی از پایگاه کاربر شما را بیگانه کند.

3 ضد آینده

در حالی که دستگاه های مدرن رواج بیشتری پیدا می کنند ، دستگاه های قدیمی هنوز در حال استفاده هستند. با ایجاد برنامه خود با سازگاری ES5 در ذهن ، آن را برای محیط هایی که جاوا اسکریپت مدرن گزینه ای نیست ، ضد آینده می کنید.

نحوه ساخت یک پروژه برای سازگاری ES5

برای پشتیبانی از ES5 ، ما باید از ابزارهایی استفاده کنیم که بتوانند JavaScript مدرن (ES6+) و TypeScript را به کد سازگار با ES5 منتقل کنند. در اینجا نحوه انجام آن با استفاده از آن آورده شده است غلتکبا شرحوت بنگلبشر

مرحله 1: پروژه را تنظیم کنید

با شروع یک پروژه جدید و نصب وابستگی های لازم شروع کنید.

mkdir my-project
cd my-project
npm init -y

مرحله 2: وابستگی ها را نصب کنید

نصب Rollup ، Typscript ، Babel و افزونه های مورد نیاز ، از جمله core-js برای polyfills.

npm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-typescript @rollup/plugin-node-resolve @rollup/plugin-commonjs typescript tslib @babel/core @babel/preset-env @babel/preset-typescript core-js

مرحله 3: پیکربندی TypeScript

ایجاد a tsconfig.json پرونده برای پیکربندی TypeScript. این پرونده به TypeScript می گوید که کد شما را به ES6 کامپایل کند (بابل از طریق انتقال ES5 استفاده می کند).

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "lib": ["DOM", "ES6"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src/**/*"]
}

مرحله 4: بابل را پیکربندی کنید

ایجاد a .babelrc پرونده برای پیکربندی بابل. این پرونده به بابل می گوید کد شما را به ES5 منتقل کرده و از آن استفاده کند core-js برای polyfills.

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": "IE 11" // Target ES5 for older environments
      },
      "useBuiltIns": "usage", // Automatically include required polyfills
      "corejs": 3 // Use core-js version 3
    }],
    "@babel/preset-typescript"
  ]
}

مرحله 5: پیکربندی Rollup

ایجاد a rollup.config.js پرونده برای پیکربندی Rollup. این پرونده کد شما را بسته و TypeScript و Babel را ادغام می کند.

import babel from '@rollup/plugin-babel';
import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.ts', // Entry point
  output: {
    file: 'dist/bundle.js', // Output file
    format: 'iife', // Immediately Invoked Function Expression for older environments
    name: 'MyApp', // Global variable name
    sourcemap: true // Generate source maps
  },
  plugins: [
    resolve(), // Resolve third-party modules
    commonjs(), // Convert CommonJS modules to ES6
    typescript(), // Compile TypeScript
    babel({ // Transpile to ES5
      babelHelpers: 'bundled',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      exclude: 'node_modules/**'
    })
  ]
};

مرحله ششم: کد خود را بنویسید

ایجاد a src دایرکتوری را اضافه کنید. به عنوان مثال:

// src/index.ts
const message: string = "Hello, Smart TV!";
console.log(message);

اگر کد شما به ویژگی های مدرن مانند متکی است Promise یا fetch، شما می توانید وارد کنید core-js Polyfills در بالای پرونده ورود شما:

import 'core-js/stable'; // Polyfill modern JavaScript features
import 'regenerator-runtime/runtime'; // Polyfill async/await

const message: string = "Hello, Smart TV!";
console.log(message);

مرحله 7: پروژه را بسازید

Rollup را اجرا کنید تا بسته نرم افزاری کنید و کد خود را تغییر دهید.

npx rollup -c

این باعث ایجاد a خواهد شد dist/bundle.js پرونده ای که سازگار با ES5 و برای تلویزیون های هوشمند قدیمی تر است.

مرحله 8: خروجی را آزمایش کنید

تولید شده را آزمایش کنید dist/bundle.js پرونده در محیط مورد نظر خود (به عنوان مثال ، یک تلویزیون هوشمند قدیمی یا یک شبیه ساز).

مرحله 9: بهینه سازی برای تولید

برای تولید ، خروجی را با استفاده از یک افزونه مانند کوچک کنید rollup-plugin-terser:

npm install --save-dev rollup-plugin-terser

سپس ، خود را به روز کنید rollup.config.js:

import { terser } from 'rollup-plugin-terser';

export default {
  // ... other config
  plugins: [
    // ... other plugins
    terser() // Minify the output
  ]
};

چرا core-js مهم است

ویژگی های مدرن چندگانه

محیط های قدیمی تر مانند تلویزیون های هوشمند اغلب فاقد پشتیبانی از ویژگی های مدرن JavaScript هستند. به عنوان مثال:

• Promise: برای عملیات ناهمزمان استفاده می شود.
• fetch: برای ایجاد درخواست های شبکه استفاده می شود.
• Array.prototype.includes: برای بررسی اینکه آیا یک آرایه حاوی یک مقدار خاص است ، استفاده می شود.

core-js Polyfills را برای این ویژگی ها فراهم می کند ، اطمینان حاصل می کند که برنامه شما حتی در محیط هایی که این ویژگی ها به طور بومی پشتیبانی نمی شوند ، کار می کند.

پایان

پشتیبانی از ES5 برای اطمینان از سازگاری با دستگاه های قدیمی تر مانند تلویزیون های هوشمند ، که اغلب فاقد قابلیت های مدرن جاوا اسکریپت هستند ، ضروری است. با استفاده از غلتکبا شرحوت بنگل، همراه با core-js برای Polyfills ، می توانید برنامه هایی بسازید که هم مدرن و هم به عقب سازگار هستند. این رویکرد نه تنها مخاطبان شما را گسترده می کند بلکه تجربه کاربری یکپارچه را در طیف گسترده ای از دستگاه ها نیز تضمین می کند.

این که آیا شما در حال ساخت یک برنامه پخش ، یک بازی یا هر برنامه مبتنی بر وب هستید ، به دنبال این راهنما به شما کمک می کند تا محصولی قوی و فراگیر را ایجاد کنید که در همه جا کار کند-حتی در تلویزیون های هوشمند قدیمی. برنامه نویسی مبارک! 🚀