Bu son derece uzun bir cevaptır, çünkü bu soru son derece uzun ve ayrıntılı bir cevabı hak eder çünkü “en iyi uygulama” yolu sadece birkaç satır yanıtından daha karmaşıktır.
Iv'e, ev kütüphanelerimizi 3.5+ yıl boyunca sürdürdüğümüzde, o zaman iv'e kütüphanelerin bir araya getirilmesi gerektiğini düşündüğüm iki yol üzerine yerleştik. tüketicilerin.
Yöntem 1: dışa aktarılmasını istediğiniz her şeyi içeren bir index.ts dosyası oluşturun. Kitaplığınızın tamamını tek bir index.js dosyası ve index.css dosyasına ekleyin; Harici bağımlılık ile kütüphane kodunun çoğaltılmasını önlemek için tüketici projesinden miras. (örnek yapılandırmanın altına gist dahil edilmiştir)
- Artıları: Proje tüketicileri kök göreli kütüphane yolundan her şeyi içe aktarabildiğinden, kullanımı kolay
import { Foo, Bar } from "library"
- Eksileri: Bu asla ağaç sarsılmaz olmayacak; ve insanlar bunu ESM ile yapmadan önce ve ağaçlar değişebilir olacak. NextJS şu anki aşamada ESM'yi desteklemiyor ve proje kurulumlarının birçoğu da bu nedenle bu yapıyı sadece CJS'ye derlemek için hala iyi bir fikir. Birisi bileşenlerinizi 1 içe aktarırsa, tüm bileşenleriniz için tüm css ve tüm javascript'leri alır.
Yöntem 2: Bu, ileri düzey kullanıcılar içindir: Her dışa aktarma için yeni bir dosya oluşturun ve kullandığınız css sistemini nasıl kullandığınıza bağlı olarak "preserveModules: true" seçeneğiyle birlikte rollup-plugin-multi-input kullanın. css'iniz tek bir dosyada birleştirilmez, ancak her css dosyasının gerektirdiği (". css") ifadesinin toplandıktan sonra çıktı dosyasının içinde bırakıldığını ve bu css dosyası bulunduğunu unutmayın.
- Artıları: Kullanıcılar "Foo} dosyasını" library / dist / foo "'dan içe aktardıklarında yalnızca Foo için kod ve Foo için css ve başka bir şey almazlar.
- Eksileri: Bu kurulum, node_modules requirment (". Css") ifadelerini NextJS ile derleme yapılandırmalarında işlemek zorunda olan tüketiciyi içerir, bu
next-transpile-modulesnpm paketi ile yapılır .
- Dikkat: Burada bulabileceğiniz kendi babel eklentimizi kullanıyoruz: https://www.npmjs.com/package/babel-plugin-qubic insanların
import { Foo,Bar } from "library"babel ile dönüştürmek ve daha sonra babel ile dönüştürmek için ...
import { Foo } from "library/dist/export/foo"
import { Bar } from "library/dist/export/bar"
Her iki yöntemi de kullandığımız çoklu toplama yapılandırmalarımız var; ağaç sallama umurumda olmayan kütüphane tüketicileri için sadece "Foo from "library"tek css dosyasını yapabilir ve alabilirsiniz; ve ağaç sallamaya özen gösteren kütüphane tüketicileri için ve sadece kritik css kullanarak babil eklentimizi açabilirler.
En iyi uygulama için toplama kılavuzu:
typescript kullanıp kullanmadığınızı ALWAYS ile "rollup-plugin-babel": "5.0.0-alpha.1"
yapıp yapmadığınızı .babelrc dosyanızın böyle göründüğünden emin olun.
{
"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
}]
]
}
Ve rollup babel eklentisi böyle görünüyor ...
babel({
babelHelpers: "runtime",
extensions,
include: ["src/**/*"],
exclude: "node_modules/**",
babelrc: true
}),
Ve senin paket.json böyle ATLEAST görünümlü:
"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",
}
Ve son olarak toparlanmada ATLEAST gibi dış görünüşleriniz böyle.
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.
Neden?
- Bu, tepki / tepki-dom'u ve diğer eş / dış bağımlılıklarınızı tüketici projesinden devralmak için bokunuzu paketleyecek, yani paketinizde çoğaltılmayacak.
- Bu ES5 ile paketlenecek
- Bu, paket projenizden başka bir 15-25KB silecek ve objectSpread için yardımcı işlevlerin kitaplığınızda çoğaltılmayacağı anlamına gelen tüketici projesinden objectSpread, sınıflar vb. çıktı + tüketen projeler birlikte çıktı.
- Zaman uyumsuz işlevler çalışmaya devam eder
- Haricilar bu bağımlı bağımlılık ekiyle başlayan herhangi bir şeyle eşleşecek, yani babil yardımcıları babil yardımcıları / yardımcıları / nesne yayılımı için harici ile eşleşecek
Son olarak, örnek tek bir index.js dosyası çıktı toplama yapılandırma dosyası için bir özgeçmiş.
https://gist.github.com/ShanonJackson/deb65ebf5b2094b3eac6141b9c25a0e3
Hedef src / export / index.ts nerede böyle görünüyor ...
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
Babil, toplanma ile ilgili herhangi bir sorun yaşarsanız veya gruplama / kitaplıklar hakkında herhangi bir sorunuz varsa bana bildirin.
importedve böylece paket boyutunu azaltır.