TypeScript के साथ Rollup
In this page:
// rollup.config.js
import typescript from "@rollup/plugin-typescript";
export default {
input: "src/index.ts",
output: { file: "dist/bundle.js", format: "esm" },
plugins: [typescript()],
};Core Concept
Rollup एक bundler है जो small, tree-shaken output produce करने पर focused है — खासकर libraries के लिए — और ES modules natively समझता है, bundle step के दौरान .ts source files compile करने के लिए @rollup/plugin-typescript के साथ pairing करते हुए।
उदाहरण: Core Concept
// rollup.config.js uses @rollup/plugin-typescript to compile .ts sources
console.log("Rollup focuses on small, tree-shaken output for libraries");Basic Setup
एक basic setup rollup.config.js (या .mjs) में plugins array में @rollup/plugin-typescript add करता है, इसे आपके tsconfig.json पर point करते हुए ताकि Rollup आपके project के existing compiler options उपयोग करके TypeScript compile करे।
उदाहरण: Basic Setup
// import typescript from "@rollup/plugin-typescript";
// export default { plugins: [typescript()] };
console.log("plugin-typescript compiles using your existing tsconfig.json");Typed Example
Rollup एक single config में एक typed source tree से कई typed output formats (ESM, CJS, UMD) emit कर सकता है, उपयोगी जब एक library publish कर रहे हों जिसे modern bundlers और older CommonJS consumers दोनों support करना हो।
उदाहरण: Typed Example
// output: [{ format: "esm" }, { format: "cjs" }, { format: "umd", name: "MyLib" }]
console.log("Rollup can emit multiple typed output formats from one source tree");Project Usage
एक असली project में, Rollup की aggressive tree-shaking मतलब है कि सिर्फ एक consumer द्वारा असल में imported typed exports उनके bundle में आते हैं, जो यही कारण है कि यह typed npm libraries publish करने के लिए standard choice है।
उदाहरण: Project Usage
// Only imported, used exports end up in the consumer's final bundle
console.log("Aggressive tree-shaking makes Rollup common for npm libraries");Best Practices
अपने bundle के साथ .d.ts declaration files emit करें (tsc --emitDeclarationOnly या rollup-plugin-dts के through) इसलिए आपकी published library के consumers को पूरी type information मिलती है, सिर्फ compiled JavaScript नहीं।
उदाहरण: Best Practices
// tsc --emitDeclarationOnly (or rollup-plugin-dts)
console.log("Emit .d.ts files alongside the bundle for library consumers");@rollup/plugin-node-resolveभूल जाना, इसलिएnode_modulesसे imports resolve नहीं होते।tsconfigमेंdeclarationset न करना, इसलिए एक library.d.tsfiles के बिना publish होती है।- एक
tsconfigmodulesetting उपयोग करना जोESNextनहीं है, जो Rollup को tree shaking से रोकता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: