Rollup هو تطبيق جافا سكريبت جديد وباني مكتبة. عرفه الكثير من الناس لفترة طويلة باعتباره منشئًا واعدًا مناسبًا تمامًا لبناء المكتبات ، ولكنه مناسب جدًا لبناء التطبيقات. ومع ذلك ، مع مرور الوقت ، يتطور المنتج بنشاط.
جربتها لأول مرة في أوائل عام 2017. أعجبتني على الفور لدعم تجميع في ES2015 ، الأشجار ، وعدم وجود وحدات في التجمع وبالطبع التكوين بسيط. ولكن بعد ذلك كان منتجًا خامًا ، مع وجود عدد صغير من المكونات الإضافية ووظائف محدودة للغاية ، وقررت أن أتركه لاحقًا واستمر في الإنشاء من خلال المتصفح. كانت المحاولة الثانية في عام 2018 ، ثم تجاوزت بالفعل المجتمع والإضافات والوظائف بشكل ملحوظ ، ولكن لم تكن هناك جودة كافية في بعض الوظائف ، بما في ذلك المراقب. وأخيراً ، في بداية عام 2019 ، يمكننا أن نقول بأمان - بمساعدة Rollup يمكنك ببساطة وببساطة إنشاء تطبيقات حديثة.
لفهم الفوائد ، دعنا نتعرف على الميزات الرئيسية والمقارنة مع Webpack (الموقف هو نفسه بالنسبة لـ Browserify).
التكوين بسيط
على الفور ما يلفت انتباهك هو تكوين بسيط جدا ومفهوم:
export default [{ input: 'src/index.ts', output: [{ file: 'dist/index.min.js', format: 'iife' }], plugins: [
أدخل
مجموعة التحديثات -c في cosnol وتبدأ الحزمة الخاصة بك في التجمع. للتصدير ، يمكنك إعطاء مجموعة من الحزم للتجميع ، على سبيل المثال ، إذا قمت بتجميع polyphiles بشكل منفصل ، والعديد من البرامج ، والعمال وما إلى ذلك. في المدخلات ، يمكنك إرسال مجموعة من الملفات ، ثم سيتم جمع قطع. في الإخراج ، يمكنك تغذية مجموعة من ملفات الإخراج وتجميعها في أنظمة معيارية مختلفة: iife ، commonjs ، umd.
دعم Iife
يسمى دعم التجميع في الوظيفة نفسها بدون وحدات. لفهم ، لنأخذ البرنامج الأكثر شهرة:
console.log("Hello, world!");
قيادتها من خلال Rollup إلى تنسيق iife وشاهد النتيجة:
(function () { 'use strict'; console.log("Hello, world!"); }());
الإخراج هو رمز مضغوط للغاية ، فقط 69 بايت. إذا كنت لا تزال لا تفهم الميزة ، فسوف تقوم Webpack / Browserify بتجميع التعليمات البرمجية التالية:
كما ترون ، اتضح أن الأمر قد زاد قليلاً بسبب حقيقة أنه لا يمكن بناء Webpack / Browserify إلا في CommonJS. الميزة الكبيرة لـ IIFE هي ضغطها وغياب التعارضات بين الإصدارات المختلفة من CommonJS. لكن هناك عيبًا واحدًا ، لا يمكنك جمع القطع ، فبالنسبة لهم تحتاج إلى التبديل إلى CommonJS.
تجميع في ES2015
تم استلام مجموعة التحديثات "التجميع من الجيل التالي" في عام 2016 من أجل القدرة على التجميع في ES2015. وحتى نهاية عام 2018 ، كان المجمع الوحيد الذي عرف كيف يفعل ذلك.
على سبيل المثال ، إذا كنت تأخذ الرمز:
export class TestA { getData(){return "A"} } console.log("Hello, world!", new TestB().getData());
والقيادة من خلال Rollup ، ثم في الإخراج نحصل على نفس الشيء. ونعم! في بداية عام 2019 ، يمكن بالفعل
87 ٪ من المتصفحات تنفيذها أصلا.
ثم في عام 2016 ، بدا الأمر وكأنه تقدم كبير ، لأنه كان هناك عدد كبير من التطبيقات التي لم تكن بحاجة إلى دعم للمتصفحات القديمة: المشرفين ، الأكشاك ، وليس تطبيقات الويب ، ولم تكن هناك أدوات بناء لهم. والآن مع Rollup يمكننا جمع عدة حزم في مسار واحد ، في es3 ، es5 ، es2015 ، exnext واعتمادًا على المتصفح قم بتنزيل الحزمة الضرورية.
أيضا ميزة كبيرة من ES2015 هو حجمها وسرعة تنفيذها. نظرًا لعدم وجود عملية نقل إلى طبقة أقل ، يتضح أن الشفرة تكون أكثر إحكاما ، وبسبب عدم وجود كود مساعد تم إنشاؤه بواسطة أجهزة الإرسال ، تعمل هذه الشفرة أيضًا بشكل أسرع 3 مرات (وفقًا لاختباراتي الشخصية).
شجرة تهتز
هذا هو رقاقة Rollup ، اخترع ذلك! تحاول Webpack تنفيذه لسنوات عديدة على التوالي ، لكن مع الإصدار 4 فقط بدأ شيء ما في العمل. Browserify يفعل سيئة للغاية.
أي نوع من الحيوانات هذا؟ لنأخذ الملفين التاليين كمثال:
ركض عبر Rollup واحصل على:
(function () { 'use strict'; class TestB { getData() { return "B"; } } const test = new TestB(); console.log("Hello, world!", test.getData()); }());
نتيجة ل TreeShaking ، تم تجاهل الكود الميت حتى في مرحلة حل التبعيات. بفضل ما تتحول إليه مجموعات Rollup أكثر إحكاما. الآن دعونا نرى ما يولد Webpack:
وهنا يمكننا استخلاص استنتاجين. لا يزال تعلم Webpack الأول في نهاية عام 2018 لفهم وبناء ES2015. الثاني ، تماما كل رمز يقع في التجمع ، ولكن تمت إزالة الكود الميت بالفعل باستخدام مصغر Terser (شوكة وخليفة ل UglifyES). نتيجة لهذا النهج ، فإن حزم أكثر سمكا من Rollup ، على هابر كتبت بالفعل الكثير عنها ، لن نتوقف عن ذلك.
الإضافات
يمكن تجميع ES2015 + المجردة فقط من مربع مجموعة التحديثات. لتعليمه وظائف إضافية ، مثل توصيل commonjs ، والوحدات النمطية للطباعة ، وتحميل html و scss ، وما إلى ذلك ، تحتاج إلى توصيل المكونات الإضافية.
يتم ذلك ببساطة شديدة:
import nodeResolve from 'rollup-plugin-node-resolve'; import commonJs from 'rollup-plugin-commonjs'; import typeScript from 'rollup-plugin-typescript2'; import postcss from 'rollup-plugin-postcss'; import html from 'rollup-plugin-html'; import visualizer from 'rollup-plugin-visualizer'; import {sizeSnapshot} from "rollup-plugin-size-snapshot"; import {terser} from 'rollup-plugin-terser'; export default [{ input: 'src/index.ts', output: [{ file: 'dist/index.r.min.js', format: 'iife' }], plugins: [ nodeResolve(),
بهذه البساطة ، يتم توصيل مكون إضافي بكلمة واحدة. هذا التكوين يمكن أن يجمع أي تطبيق معقد ويولد تحليل حزمة في الإخراج.
ملخص
والآن ، بعد أن تم تزويدنا بمعرفة جديدة ، فلنقم بإنشاء تهيئة تجمع بشكل منفصل polyphiles ، وتطبيق منفصل للمتصفحات القديمة والجديدة ، وموظف خدمة لـ pwa ، وموظف ويب لإجراء العمليات الحسابية المعقدة في المستودع.
import nodeResolve from 'rollup-plugin-node-resolve'; import commonJs from 'rollup-plugin-commonjs'; import typeScript from 'rollup-plugin-typescript2'; import postcss from 'rollup-plugin-postcss'; import html from 'rollup-plugin-html'; import visualizer from 'rollup-plugin-visualizer'; import { sizeSnapshot } from "rollup-plugin-size-snapshot"; import { terser } from 'rollup-plugin-terser'; const getPlugins = (options) => [ nodeResolve(), commonJs(), postcss(), html(), typeScript({ tsconfig: "tsconfig.json", tsconfigOverride: { compilerOptions: { "target": options.target } } }), sizeSnapshot(), terser(), visualizer() ]; export default [{ input: 'src/polyfills.ts', output: [{ file: 'dist/polyfills.min.js', format: 'iife' }], plugins: getPlugins({ target: "es5" }) },{ input: 'src/index.ts', output: [{ file: 'dist/index.next.min.js', format: 'iife' }], plugins: getPlugins({ target: "esnext" }) },{ input: 'src/index.ts', output: [{ file: 'dist/index.es5.min.js', format: 'iife' }], plugins: getPlugins({ target: "es5" }) },{ input: 'src/index.ts', output: [{ file: 'dist/index.es3.min.js', format: 'iife' }], plugins: getPlugins({ target: "es3" }) },{ input: 'src/serviceworker.ts', output: [{ file: 'dist/serviceworker.min.js', format: 'iife' }], plugins: getPlugins({ target: "es5" }) },{ input: 'src/webworker.ts', output: [{ file: 'dist/webworker.min.js', format: 'iife' }], plugins: getPlugins({ target: "es5" }) }];
جميع الحزم السهلة وتطبيقات الويب السريعة!