🐷 🌉 🏴󠁧󠁢󠁥󠁮󠁧󠁿 रोलअप: आप पहले से ही एप्लिकेशन बना सकते हैं 👩‍💻 🐣 😳

रोलअप एक नई पीढ़ी का जावास्क्रिप्ट एप्लिकेशन और लाइब्रेरी बिल्डर है। कई लोग उन्हें लंबे समय से एक होनहार बिल्डर के रूप में जानते हैं जो पुस्तकालयों के निर्माण के लिए अच्छी तरह से अनुकूल है, लेकिन अनुप्रयोगों के निर्माण के लिए खराब रूप से अनुकूल है। हालांकि, जैसे-जैसे समय बीत रहा है, उत्पाद सक्रिय रूप से विकसित हो रहा है।

मैंने पहली बार 2017 की शुरुआत में इसकी कोशिश की। मुझे तुरंत ES2015, ट्रीशेकिंग, असेंबली में मॉड्यूल की कमी और निश्चित रूप से एक साधारण विन्यास में समर्थन संकलन के लिए यह पसंद आया। लेकिन तब यह एक कच्चा उत्पाद था, जिसमें बहुत कम संख्या में प्लगइन्स और बहुत सीमित कार्यक्षमता थी, और मैंने इसे बाद में छोड़ने का फैसला किया और ब्राउजर के माध्यम से निर्माण करना जारी रखा। दूसरा प्रयास 2018 में था, जब इसने पहले ही समुदाय, प्लगइन्स और कार्यक्षमता को काफी हद तक समाप्त कर दिया था, लेकिन अभी भी कुछ कार्यों में गुणवत्ता की कमी थी, जिसमें वॉकर भी शामिल था। और अंत में, 2019 की शुरुआत में, हम सुरक्षित रूप से कह सकते हैं - रोलअप की मदद से आप आसानी से और आसानी से आधुनिक अनुप्रयोगों का निर्माण कर सकते हैं।

लाभों को समझने के लिए, आइए प्रमुख विशेषताओं पर जाएं और वेबपैक के साथ तुलना करें (स्थिति ब्राउज़र के लिए समान है)।

सरल विन्यास

तुरंत जो आपकी आंख को पकड़ता है वह एक बहुत ही सरल और समझने योग्य विन्यास है:

export default [{ input: 'src/index.ts', output: [{ file: 'dist/index.min.js', format: 'iife' }], plugins: [ // todo:     ], }];

कॉसनोल में रोलअप -सी दर्ज करें और आपका बंडल इकट्ठा होना शुरू हो जाता है। निर्यात के लिए, आप असेंबली के लिए बंडलों की एक सरणी दे सकते हैं, उदाहरण के लिए, यदि आप अलग-अलग पॉलीफ़ाइल्स, कई कार्यक्रमों, श्रमिकों और इतने पर इकट्ठा करते हैं। इनपुट में, आप फ़ाइलों की एक सरणी सबमिट कर सकते हैं, फिर चंक्स एकत्र किए जाएंगे। आउटपुट में, आप आउटपुट फ़ाइलों की एक सरणी फ़ीड कर सकते हैं और उन्हें विभिन्न मॉड्यूलर सिस्टम में इकट्ठा कर सकते हैं: iife, commonjs, umd।

Iife समर्थन करते हैं

मॉड्यूल के बिना कहे जाने वाले फ़ंक्शन में कोडांतरण के लिए समर्थन। समझने के लिए, आइए सबसे प्रसिद्ध कार्यक्रम लें:

 console.log("Hello, world!");

इसे रोलअप के माध्यम से iife प्रारूप में लाएँ और परिणाम देखें:

 (function () { 'use strict'; console.log("Hello, world!"); }());

आउटपुट एक बहुत ही कॉम्पैक्ट कोड है, केवल 69 बाइट्स। यदि आप अभी भी लाभ को नहीं समझते हैं, तो Webpack / Browserify निम्नलिखित कोड संकलित करेगा:

वेबपैक का निर्माण परिणाम

 /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports) { console.log("Hello, world!"); /***/ }) /******/ ]);

जैसा कि आप देख सकते हैं, यह इस तथ्य के कारण थोड़ा अधिक निकला कि वेबपैक / ब्राउज़राइज़ केवल कॉमनजस में बनाया जा सकता है। IIFE का बड़ा फायदा इसकी कॉम्पैक्टनेस और कॉमनजस के विभिन्न संस्करणों के बीच टकराव की अनुपस्थिति है। लेकिन एक खामी है, आप विखंडू एकत्र नहीं कर सकते, उनके लिए आपको कॉमनजेस पर स्विच करना होगा।

ES2015 में संकलन

2016 में "अगली पीढ़ी के कलेक्टर" रोलअप को ES2015 में इकट्ठा करने की क्षमता के लिए नाम मिला। और 2018 के अंत तक, यह एकमात्र कलेक्टर था जो जानता था कि यह कैसे करना है।
उदाहरण के लिए, यदि आप कोड लेते हैं:

 export class TestA { getData(){return "A"} } console.log("Hello, world!", new TestB().getData());

और रोलअप के माध्यम से ड्राइव करें, फिर आउटपुट पर हमें एक ही चीज़ मिलती है। और हाँ! 2019 की शुरुआत में, पहले से ही 87% ब्राउज़र इसे मूल रूप से निष्पादित कर सकते हैं।

फिर 2016 में यह एक सफलता की तरह लग रहा था, क्योंकि बड़ी संख्या में ऐसे अनुप्रयोग थे जिन्हें पुराने ब्राउज़रों के लिए समर्थन की आवश्यकता नहीं थी: प्रवेश, कियोस्क, वेब अनुप्रयोग नहीं और उनके लिए कोई निर्माण उपकरण नहीं थे। और अब रोलअप के साथ हम एक बंडल में कई पास इकठ्ठा कर सकते हैं, es3, es5, es2015, exnext और ब्राउज़र पर निर्भर करते हुए आवश्यक डाउनलोड करें।

इसके अलावा ES2015 का एक बड़ा फायदा इसके आकार और निष्पादन की गति है। एक निचली परत तक ट्रांसप्लिंग की कमी के कारण, कोड बहुत अधिक कॉम्पैक्ट हो जाता है, और ट्रांसपिलर्स द्वारा उत्पन्न एक सहायक कोड की कमी के कारण, यह कोड 3 गुना तेजी से भी काम करता है (मेरे व्यक्तिपरक परीक्षणों के अनुसार)।

पेड़ का हिलना

यह एक रोलअप चिप है, उन्होंने इसका आविष्कार किया था! वेबपैक लगातार कई वर्षों से इसे लागू करने की कोशिश कर रहा है, लेकिन केवल संस्करण 4 के साथ ही कुछ काम करना शुरू कर दिया। Browserify बहुत खराब कर रहा है।
यह किस तरह का जानवर है? एक उदाहरण के रूप में निम्नलिखित दो फाइलें लेते हैं:

 // module.ts export class TestA { getData(){return "A"} } export class TestB { getData(){return "B"} } // index.ts import { TestB } from './module'; const test = new TestB(); console.log("Hello, world!", test.getData());

रोलअप के माध्यम से चलाएं और प्राप्त करें:

 (function () { 'use strict'; class TestB { getData() { return "B"; } } const test = new TestB(); console.log("Hello, world!", test.getData()); }());

ट्रीशेकिंग के परिणामस्वरूप, निर्भरता के समाधान के चरण में भी मृत कोड को छोड़ दिया गया था। क्या रोलअप विधानसभाओं के लिए धन्यवाद और अधिक कॉम्पैक्ट। अब देखते हैं कि वेबपैक क्या उत्पन्न करता है:

वेबपैक का निर्माण परिणाम

 /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); // CONCATENATED MODULE: ./src/module.ts class TestA { getData() { return "A"; } } class TestB { getData() { return "B"; } } // CONCATENATED MODULE: ./src/index.ts const test = new TestB(); console.log("Hello, world!", test.getData()); /***/ }) /******/ ]);

और यहाँ हम दो निष्कर्ष निकाल सकते हैं। 2018 के अंत में पहला वेबपैक अभी भी ES2015 को समझना और बनाना सीख गया। दूसरा, बिल्कुल सभी कोड असेंबली में आते हैं, लेकिन डेड कोड पहले से ही Terser minifier (फोर्क और उत्तराधिकारी UglifyES) का उपयोग करके हटा दिया जाता है। इस दृष्टिकोण के परिणामस्वरूप, रोलअप की तुलना में मोटे बंडल, पहले से ही इसके बारे में बहुत कुछ लिखा है, हम इस पर नहीं रुकेंगे।

प्लग-इन

केवल नग्न ES2015 + को रोलअप बॉक्स से इकट्ठा किया जा सकता है। उसे अतिरिक्त कार्यक्षमता सिखाने के लिए, जैसे कि कॉमनज, टाइपस्क्रिप्ट मॉड्यूल, लोडिंग html और एससीएस, इत्यादि, आपको प्लगइन्स कनेक्ट करने की आवश्यकता है।

यह बहुत सरलता से किया जाता है:

 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(), //   node commonJs(), //   commonjs postcss(), //   postcc,    scss  less html(), //  html  typeScript({tsconfig: "tsconfig.json"}), //  typescript sizeSnapshot(), //      terser(), //    ES2015+,    UglifyES visualizer() //   ] }];

इतना सरल, एक शब्द में एक प्लग-इन जुड़ा हुआ है। यह कॉन्फ़िगरेशन किसी भी जटिल एप्लिकेशन को एकत्र कर सकता है और आउटपुट पर एक बंडल विश्लेषण भी उत्पन्न कर सकता है।

परिणाम

और अब, नए ज्ञान से लैस, चलो एक ऐसा कॉन्फिगरेशन बनाते हैं जो अलग-अलग पॉलीफ़ाइल्स, पुराने और नए ब्राउज़रों के लिए एक अलग एप्लिकेशन, 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" }) }];

सभी आसान बंडलों और तेजी से वेब अनुप्रयोग!