مقدمه ای بر بسته نرم افزاری جاوا اسکریپت Rollup.js

Rollup.js یک بسته نرم افزاری ماژول جاوا اسکریپت نسل بعدی از ریچ هریس ، نویسنده Svelte است. این چندین پرونده منبع را در یک بسته واحد جمع می کند.

این مزایا شامل موارد زیر است:

• هنگام استفاده از پرونده های منبع کوچکتر و خودمختار ، مدیریت توسعه آسان تر است
• منبع را می توان در هنگام بسته بندی رنگ آمیزی ، زیبا و بررسی کرد
• درخت لرزه توابع استفاده نشده را حذف می کند
• انتقال به ES5 برای سازگاری به عقب امکان پذیر است
• چندین پرونده خروجی می تواند تولید شود – به عنوان مثال ، کتابخانه شما می تواند در ماژول های ES5 ، ES6 و CommonJS سازگار با Node.js ارائه شود
• بسته های تولید را می توان کوچک کرد و ورود به سیستم را حذف کرد

سایر گزینه های بسته نرم افزاری ، مانند بسته وب، کیسه برفی، و بسته، سعی کنید به طرز جادویی همه چیز را مدیریت کنید: الگو برداری از HTML ، بهینه سازی تصویر ، پردازش CSS ، بسته بندی جاوا اسکریپت و موارد دیگر. وقتی از تنظیمات پیش فرض راضی باشید این کار به خوبی انجام می شود ، اما تنظیمات سفارشی ممکن است دشوار باشد و پردازش آن کندتر است.

Rollup.js در درجه اول روی JavaScript متمرکز است (اگرچه پلاگین هایی برای الگوهای HTML و CSS وجود دارد). این یک تعداد گزینه دلهره آور است ، اما شروع آن آسان است و بسته بندی سریع است. این آموزش توضیح می دهد که چگونه از پیکربندی های معمولی در پروژه های خود استفاده کنید.

Rollup.js را نصب کنید

Rollup.js به Node.js v8.0.0 یا بالاتر نیاز دارد و می تواند به صورت جهانی با موارد زیر نصب شود:

npm install rollup --global

این اجازه می دهد rollup فرمان برای اجرا در هر فهرست پروژه حاوی فایلهای JavaScript – مانند PHP ، WordPress ، Python ، Ruby یا پروژه دیگر.

با این حال ، اگر در ایجاد یک پروژه Node.js در تیم بزرگتری هستید ، بهتر است Rollup.js را به صورت محلی نصب کنید تا اطمینان حاصل کنید که همه توسعه دهندگان از نسخه مشابه استفاده می کنند. با فرض اینکه شما یک Node.js موجود دارید package.json پرونده موجود در پوشه پروژه را اجرا کنید:

npm install rollup --save-dev

شما قادر به اجرای آن نخواهید بود rollup مستقیماً فرمان دهید ، اما npx rollup میتواند مورد استفاده قرار گیرد. متناوبا، از سوی دیگر، rollup دستورات را می توان به package.json "scripts" بخش. مثلا:

"scripts": {
  "watch": "rollup ./src/main.js --file ./build/bundle.js --format es --watch",
  "build": "rollup ./src/main.js --file ./build/bundle.js --format es",
  "help": "rollup --help"
},

این اسکریپت ها را می توان با استفاده از npm run <scriptname> – مثلا، npm run watch.

مثالهای زیر به طور خاص استفاده می شود npx rollup، از آنجا که بدون در نظر گرفتن اینکه آیا کار خواهد کرد rollup به صورت محلی یا جهانی نصب شده است.

نمونه پرونده ها

نمونه پرونده ها و پیکربندی های Rollup.js را می توانید از اینجا بارگیری کنید GitHub. این یک پروژه Node.js است ، بنابراین اجرا کنید npm install پس از شبیه سازی و بررسی README.md پرونده برای دستورالعمل. توجه داشته باشید که Rollup.js و همه افزونه ها به صورت محلی نصب شده اند.

همچنین می توانید پس از مقداردهی اولیه یک پروژه جدید Node.js ، فایلهای منبع را به صورت دستی ایجاد کنید npm init. ماژول های ES6 زیر یک ساعت دیجیتالی در زمان واقعی ایجاد می کنند که برای نشان دادن پردازش Rollup.js استفاده می شود.

src/main.js اسکریپت اصلی ورودی است. این یک عنصر DOM را پیدا می کند و هر ثانیه تابعی را اجرا می کند که محتوای آن را بر روی زمان فعلی تنظیم می کند:

import * as dom from './lib/dom.js';
import { formatHMS } from './lib/time.js';

// get clock element
const clock = dom.get('.clock');

if (clock) {

  console.log('initializing clock');

  // update clock every second
  setInterval(() => {

    clock.textContent = formatHMS();

  }, 1000);

}

src/lib/dom.js یک کتابخانه کمکی DOM است:

// DOM libary

// fetch first node from selector
export function get(selector, doc = document) {
  return doc.querySelector(selector);
}

// fetch all nodes from selector
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}

و src/lib/time.js توابع قالب بندی زمان را فراهم می کند:

// time formatting

// return 2-digit value
function timePad(n) {
  return String(n).padStart(2, '0');
}

// return time in HH:MM format
export function formatHM(d = new Date()) {
  return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
}

// return time in HH:MM:SS format
export function formatHMS(d = new Date()) {
  return formatHM(d) + ':' + timePad(d.getSeconds());
}

کد ساعت را می توان با ایجاد یک عنصر HTML با a به یک صفحه وب اضافه کرد clock کلاس و بارگذاری اسکریپت به عنوان یک ماژول ES6:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rollup.js testing</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="module" src="./src/main.js"></script>
</head>
<body>

  <h1>Clock</h1>

  <time class="clock"></time>

</body>
</html>

Rollup.js گزینه هایی را برای بهینه سازی فایلهای منبع JavaScript فراهم می کند.

Rollup.js شروع سریع

دستور زیر را می توان از ریشه پوشه پروژه برای پردازش اجرا کرد src/main.js و وابستگی های آن:

npx rollup ./src/main.js --file ./build/bundle.js --format iife

یک اسکریپت واحد در build/bundle.js خروجی است این شامل همه کدها است ، اما توجه داشته باشید که وابستگی های استفاده نشده مانند getAll() عملکرد در src/lib/dom.js حذف شده اند:

(function () {
  'use strict';

  // DOM libary

  // fetch first node from selector
  function get(selector, doc = document) {
    return doc.querySelector(selector);
  }

  // time library

  // return 2-digit value
  function timePad(n) {
    return String(n).padStart(2, '0');
  }

  // return time in HH:MM format
  function formatHM(d = new Date()) {
    return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
  }

  // return time in HH:MM:SS format
  function formatHMS(d = new Date()) {
    return formatHM(d) + ':' + timePad(d.getSeconds());
  }

  // get clock element
  const clock = get('.clock');

  if (clock) {

    console.log('initializing clock');

    setInterval(() => {

      clock.textContent = formatHMS();

    }, 1000);

  }

}());

HTML <script> اکنون می توان برای ارجاع به پرونده همراه تغییر کرد:

<script type="module" src="./build/bundle.js"></script>

توجه داشته باشید: type="module" دیگر لازم نیست ، بنابراین اسکریپت باید در مرورگرهای قدیمی که از اجرای اولیه ES6 پشتیبانی می کنند ، کار کند. همچنین باید a اضافه کنید defer ویژگی برای اطمینان از اجرای اسکریپت پس از آماده شدن DOM (این امر به طور پیش فرض در ماژول های ES6 رخ می دهد).

Rollup.js پیشنهاد می دهد پرچم های متعدد خط فرمان. بخشهای زیر مفیدترین گزینه ها را توصیف می کنند.

Rollup.js راهنما

گزینه های خط فرمان Rollup را می توان با --help یا -h پرچم:

npx rollup --help

نسخه Rollup.js را می توان با --version یا -v:

npx rollup --version

فایل خروجی

--file (یا -o) flag پرونده بسته خروجی را تعیین می کند که روی آن تنظیم شده است ./build/bundle.js در بالا. اگر هیچ پرونده ای مشخص نشده باشد ، بسته نرم افزاری حاصل به ارسال می شود stdout.

قالب بندی جاوا اسکریپت

Rollup.js چندین مورد را فراهم می کند --format (یا -f) گزینه هایی برای پیکربندی بسته حاصل:

گزینه	شرح
iife	کد را در یک عبارت عملکرد بلافاصله فراخوانی کنید (function () { ... }()); مسدود می کند بنابراین نمی تواند با کتابخانه های دیگر در تضاد باشد
es6	استاندارد ES6
cjs	CommonJS برای Node.js
umd	تعریف جهانی ماژول برای استفاده در کلاینت و سرور
amd	تعریف ماژول ناهمزمان
system	ماژول های SystemJS

مگر اینکه از سیستم ماژول خاصی استفاده کنید ، iife بهترین گزینه برای JavaScript سمت مشتری خواهد بود. es6 بسته نرم افزاری کمی کوچکتر تولید می کند ، اما مراقب متغیرها و توابع جهانی باشید که می تواند با کتابخانه های دیگر در تضاد باشد.

یک نقشه منبع تولید کنید

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

با افزودن a می توان نقشه منبع خارجی ایجاد کرد --sourcemap پرچم به rollup دستور:

npx rollup ./src/main.js --file ./build/bundle.js --format iife --sourcemap

این یک مورد اضافی ایجاد می کند ./build/bundle.js.map فایل. می توانید آن را مشاهده کنید ، گرچه بیشتر جنبه چرک دارد و برای مصرف انسان درنظر گرفته نشده است! نقشه در پایان به عنوان نظر ارجاع داده می شود ./build/bundle.js:

//# sourceMappingURL=bundle.js.map

متناوباً ، می توانید یک نقشه منبع داخلی با ایجاد کنید --sourcemap inline. به جای تولید یک پرونده اضافی ، یک نسخه منبع کد شده با پایگاه 64 به نقشه پیوست شده است ./build/bundle.js:

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY...etc...

پس از تولید نقشه منبع ، می توانید یک صفحه مثال را که به اسکریپت ارجاع می دهد بارگذاری کنید. ابزارهای توسعه دهنده خود را باز کنید و به قسمت منابع برگه در مرورگرهای مبتنی بر Chrome یا رفع اشکال برگه در Firefox. اصل را خواهید دید src شماره کد و خط.

فایلها و بسته خودکار را تماشا کنید

--watch (یا -w) flag پرونده های منبع شما را برای تغییرات کنترل می کند و به صورت خودکار بسته را ایجاد می کند. صفحه ترمینال در هر بار اجرا پاک می شود ، اما می توانید با این کار غیرفعال کنید --no-watch.clearScreen:

npx rollup ./src/main.js --file ./build/bundle.js --format iife --watch --no-watch.clearScreen

یک فایل پیکربندی ایجاد کنید

پرچم های خط فرمان می توانند به سرعت غیر فعال شوند. مثالهای بالا طولانی است و شما شروع به افزودن پلاگین نکرده اید!

Rollup.js می تواند از a استفاده کند فایل پیکربندی JavaScript برای تعریف گزینه های بسته بندی نام پیش فرض است rollup.config.js و باید در ریشه پروژه شما قرار گیرد (به طور معمول ، دایرکتوری که در آن اجرا می کنید) rollup از جانب).

این پرونده یک ماژول ES است که یک شی default پیش فرض را که گزینه های Rollup.js را تنظیم می کند ، صادر می کند. کد زیر دستورات استفاده شده در بالا را تکرار می کند:

// rollup.config.js

export default {

  input: './src/main.js',

  output: {
    file: './build/bundle.js',
    format: 'iife',
    sourcemap: true
  }

}

توجه داشته باشید: sourcemap: true یک نقشه منبع خارجی تعریف می کند. استفاده کنید sourcemap: 'inline' برای یک نقشه منبع داخلی.

هنگام اجرا می توانید از این فایل پیکربندی استفاده کنید rollup با تنظیم --config (یا -c) پرچم:

npx rollup --config

اگر نام پیکربندی را غیر از این بگذارید ، یک نام پرونده قابل عبور است rollup.config.js. این موارد زمانی می توانند عملی باشند که چندین پیکربندی داشته باشید که ممکن است در یک کشور واقع شده باشد config فهرست راهنما. مثلا:

npx rollup --config ./config/rollup.simple.js

ادامه مطالعه مقدمه ای بر بسته نرم افزاری JavaScript Rollup.js در SitePoint.