এটি একটি দীর্ঘ দীর্ঘ উত্তর কারণ এই প্রশ্নটি একটি দীর্ঘ দীর্ঘ এবং বিস্তারিত উত্তরের দাবি রাখে কারণ "সেরা অনুশীলন" উপায়টি কয়েকটি লাইন প্রতিক্রিয়া অপেক্ষা আরও জটিল।
আইভি'আর সেই সময়ের 3.5+ বছরের জন্য আমাদের বাড়ির পাঠাগারগুলিতে বজায় রেখেছি I আমার মনে হয় লাইব্রেরিগুলি আপনার গ্রন্থাগারটি কতটা বড় হবে তার উপর নির্ভর করে এবং ব্যক্তিগতভাবে আমরা উভয় উপায়ে উভয় উপসাগরকে সন্তুষ্ট করার জন্য দুটি উপায় সংকলন করি তার উপর নির্ভর করে বাণিজ্য গ্রন্থগুলি বান্ডিল করা উচিত ways ভোক্তাদের।
পদ্ধতি 1: আপনি যে এক্সপোজেট এক্সপোর্ট এক্সপোর্ট করতে চান তার সবকিছু দিয়ে একটি ইনডেক্স.টস ফাইল তৈরি করুন এবং এর ইনপুট হিসাবে এই ফাইলটিতে টার্গেট রোলআপ করুন। আপনার সম্পূর্ণ লাইব্রেরিটিকে একটি একক সূচি.জেএস ফাইল এবং সূচি কোডএসএস ফাইলে বান্ডিল করুন; গ্রাহক প্রকল্পের গ্রাহক প্রকল্পের সদৃশতা এড়াতে বাহ্যিক নির্ভরতার উত্তরাধিকার সূত্রে। (উদাহরণের কনফিগারেশনের নীচে সংক্ষিপ্তসার অন্তর্ভুক্ত)
- পেশাদাররা: প্রকল্প গ্রাহকরা রুট আপেক্ষিক লাইব্রেরি পথ থেকে সবকিছু আমদানি করতে পারবেন বলে গ্রাস করা সহজ
import { Foo, Bar } from "library"
- কনস: এটি কখনই গাছ কাঁপানো যাবে না; এবং লোকেরা ইএসএম দিয়ে এটি করার আগে এটি বৃক্ষরোপণযোগ্য হবে। নেক্সটজেএস এই বর্তমান পর্যায়ে ইএসএম সমর্থন করে না এবং প্রজেক্ট সেটআপগুলিও প্রচুর পরিমাণে করে না এজন্যই এই বিল্ডটি কেবল সিজেএসে সংকলন করার জন্য এটি এখনও ভাল ধারণা। যদি কেউ আপনার 1 টি উপাদান আমদানি করে তবে তারা আপনার সমস্ত উপাদানগুলির জন্য সমস্ত CSS এবং সমস্ত জাভাস্ক্রিপ্ট পাবেন।
পদ্ধতি 2: এটি উন্নত ব্যবহারকারীদের জন্য: প্রতিটি রফতানির জন্য একটি নতুন ফাইল তৈরি করুন এবং "প্রিজারমডিউলস: সত্য" বিকল্পটি সহ রোলআপ-প্লাগইন-মাল্টি-ইনপুট ব্যবহার করুন এটি নিশ্চিত করে আপনার কী সিএসএস সিস্টেম ব্যবহার করছেন তাও নির্ভর করে আপনার সিএসএস একটি একক ফাইলে মার্জ করা হয়নি তবে প্রতিটি সিএসএস ফাইলের ("। সিএসএস") বিবৃতি রোলআপের পরে আউটপুট ফাইলের ভিতরে রেখে দেওয়া হয় এবং সেই সিএসএস ফাইল উপস্থিত থাকে।
- পেশাদাররা: যখন ব্যবহারকারীরা "লাইব্রেরি / ডিস্ট / ফু" থেকে {Foo import আমদানি করেন তারা কেবল ফু জন্য কোড এবং Foo এর জন্য সিএসএস এবং আরও কিছু পাবেন না।
- কনস: এই সেটআপটিতে নোড_মডিউলগুলি হ্যান্ডেল করতে হবে জড়িতদের ("। সিএসএস") তাদের বিল্ড কনফিগারেশনে নেক্সটজেএস-এর সাথে এনটিএম
next-transpile-modulesপ্যাকেজ দিয়ে করা হয়।
- ক্যাভিয়েট: আমরা আমাদের নিজস্ব বাবেল প্লাগইন ব্যবহার করতে পারি যা আপনি এখানে পেতে পারেন: https://www.npmjs.com/package/babel-plugin-qubic লোককে যেতে দেয়
import { Foo,Bar } from "library"এবং তারপরে বাবেলের সাথে এটি রূপান্তর করতে পারে ...
import { Foo } from "library/dist/export/foo"
import { Bar } from "library/dist/export/bar"
আমাদের একাধিক রোলআপ কনফিগারেশন রয়েছে যেখানে আমরা দুটি পদ্ধতিই ব্যবহার করি; সুতরাং লাইব্রেরি গ্রাহকরা যারা গাছ কাঁপানোর জন্য যত্ন "Foo from "library"নেন না তারা কেবল সিঙ্গল সিএসএস ফাইল আমদানি করতে এবং আমদানি করতে পারেন ; এবং লাইব্রেরি গ্রাহকদের জন্য যারা গাছ কাঁপুন এবং কেবল সমালোচনামূলক সিএসএস ব্যবহারের জন্য যত্ন নেন তারা কেবল আমাদের বাবেল প্লাগইন চালু করতে পারে।
সেরা অনুশীলনের জন্য রোলআপ গাইড:
আপনি টাইপ "rollup-plugin-babel": "5.0.0-alpha.1"
স্ক্রিপ্ট ব্যবহার করছেন বা সর্বদা তৈরি না করে তা নিশ্চিত করুন যে আপনার .belrc এর মত দেখাচ্ছে।
{
"presets": [
["@babel/preset-env", {
"targets": {"chrome": "58", "ie": "11"},
"useBuiltIns": false
}],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
["@babel/plugin-transform-runtime", {
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false,
"version": "^7.8.3"
}],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-classes",
["@babel/plugin-proposal-optional-chaining", {
"loose": true
}]
]
}
এবং রোলআপে ব্যাবেল প্লাগইনটির সাথে এটির মতো দেখাচ্ছে ...
babel({
babelHelpers: "runtime",
extensions,
include: ["src/**/*"],
exclude: "node_modules/**",
babelrc: true
}),
এবং আপনার প্যাকেজ.জসন এটির মতো নিখরচায় খুঁজছেন:
"dependencies": {
"@babel/runtime": "^7.8.3",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"regenerator-runtime": "^0.13.3"
},
"peerDependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
}
এবং অবশেষে রোলআপে আপনার বাহ্যিকগুলি এটির মতো সন্ধান করছে।
const makeExternalPredicate = externalArr => {
if (externalArr.length === 0) return () => false;
return id => new RegExp(`^(${externalArr.join('|')})($|/)`).test(id);
};
//... rest of rollup config above external.
external: makeExternalPredicate(Object.keys(pkg.peerDependencies || {}).concat(Object.keys(pkg.dependencies || {}))),
// rest of rollup config below external.
কেন?
- প্রতিক্রিয়া / প্রতিক্রিয়া-ডোম এবং গ্রাহক প্রকল্প থেকে আপনার অন্যান্য পিয়ার / বাহ্যিক নির্ভরতার উত্তরাধিকারী হওয়ার জন্য এটি আপনার বিষ্ঠাটিকে বান্ডিল করবে যার অর্থ তারা আপনার বান্ডলে নকল হবে না।
- এটি ES5 এ বান্ডিল হবে
- এতে অবজেক্টস্প্রেড, ক্লাস ইত্যাদির জন্য সমস্ত ব্যাবেল সহায়ক ফাংশনগুলির জন্য স্বয়ংক্রিয়ভাবে ("..") প্রয়োজন হবে যা আপনার বান্ডিল আকার থেকে আরও 15-25KB মুছবে এবং এর অর্থ হ'ল অবজেক্টস্প্রেডের জন্য সহায়ক ফাংশনগুলি আপনার লাইব্রেরিতে নকল হবে না আউটপুট + গ্রাহক প্রকল্পগুলি আউটপুট বান্ডিল করে।
- অ্যাসিঙ্ক ফাংশনগুলি এখনও কাজ করবে
- বাহ্যিকগুলি সেই পিয়ার-নির্ভরতা প্রত্যয় অর্থাত্ ব্যাবেল-সহায়করা বাবেল-সহায়ক / সহায়তাকারী / অবজেক্ট-স্প্রেডের সাথে বাইরের সাথে মিলবে এমন কোনও কিছু মিলবে will
অবশেষে এখানে একক উদাহরণের একক সূচি দেওয়া হয়েছে single একক index.js ফাইল আউটপুট রোলআপ কনফিগার ফাইল।
https://gist.github.com/ShanonJackson/deb65ebf5b2094b3eac6141b9c25a0e3
যেখানে লক্ষ্য src / এক্সপোর্ট / সূচক.এর মতো দেখায় ...
export { Button } from "../components/Button/Button";
export * from "../components/Button/Button.styles";
export { Checkbox } from "../components/Checkbox/Checkbox";
export * from "../components/Checkbox/Checkbox.styles";
export { DatePicker } from "../components/DateTimePicker/DatePicker/DatePicker";
export { TimePicker } from "../components/DateTimePicker/TimePicker/TimePicker";
export { DayPicker } from "../components/DayPicker/DayPicker";
// etc etc etc
আপনার যদি বাবেল, রোলআপ, বা বান্ডিলিং / লাইব্রেরি সম্পর্কে কোনও প্রশ্ন থাকে তবে আমাকে জানান।
importedযা কোডের মধ্যে ছিল এইভাবে বান্ডেলের আকার হ্রাস পাচ্ছে ।