[{"data":1,"prerenderedAt":2166},["ShallowReactive",2],{"post-\u002Ffr\u002Fposts\u002Fthe-simplest-method-to-create-a-vue-js-component-library":3,"post-link-fr-1fafed86-05bb-4de4-b7d0-bb0bd6abc9d2":2161},{"id":4,"title":5,"body":6,"contentId":2154,"date":2155,"description":2156,"extension":2157,"meta":2158,"navigation":163,"path":2159,"rawbody":2160,"robots":2161,"schemaOrg":2161,"seo":2162,"sitemap":2163,"stem":2164,"__hash__":2165},"posts\u002Ffr\u002Fposts\u002Fthe-simplest-method-to-create-a-vue-js-component-library.md","Créer une Bibliothèque de Composants Vue.js Simplement",{"type":7,"value":8,"toc":2143},"minimark",[9,22,28,57,2139],[10,11,12,13],"p",{},"TL;DR: ",[14,15,17,18],"git-hub-link",{"repo":16},"barbapapazes\u002Fvue-library"," ",[19,20,21],"em",{},"Continuez à lire pour comprendre le processus derrière cela et les raisons de mes choix.",[10,23,24,25],{},"Une bibliothèque de composants est une collection de morceaux réutilisables qui peuvent être utilisés dans divers projets. Elle facilite le partage de ressources entre différents projets et équipes. Ces composants peuvent être basiques et génériques comme des boutons, des champs de saisie et des modales, ou des modules plus spécifiques au métier. ",[19,26,27],{},"En fin de compte, c'est une méthode pour partager du code entre les projets, une compétence cruciale qui peut faire économiser beaucoup de temps.",[10,29,30,31,38,39,44,45,50,51,56],{},"Cependant, construire une bibliothèque de composants avec ",[32,33,37],"a",{"href":34,"rel":35},"https:\u002F\u002Fvuejs.org",[36],"nofollow","Vue.js"," est plus difficile qu'il n'y paraît en raison des ",[32,40,43],{"href":41,"rel":42},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fscaling-up\u002Fsfc.html",[36],"Single File Components"," (SFC). Dans un projet TypeScript standard, vous transpilez généralement en JavaScript et regroupez vos fichiers avec un outil comme ",[32,46,49],{"href":47,"rel":48},"https:\u002F\u002Ftsup.egoist.dev\u002F",[36],"tsup"," ou ",[32,52,55],{"href":53,"rel":54},"https:\u002F\u002Fvitejs.dev\u002F",[36],"Vite",".",[58,59,61,79,82,85,261,264,372,378,381,389,396,457,468,620,625,632,639,645,674,681,693,707,711,729,732,735,750,753,764,769,775,798,805,951,960,964,980,998,1007,1176,1183,1187,1193,1244,1250,1256,1259,1270,1274,1277,1304,1307,1319,1345,1349,1352,1362,1444,1477,1487,1493,1644,1650,1656,1669,1673,1680,1683,1686,1694,1700,1730,1736,1757,1760,1773,1784,1790,1800,1881,1884,1905,1914,1918,1921,1928,1940,1953,1971,1976,2043,2055,2066,2069,2084,2087,2091,2094,2115,2124,2132,2137],"callout-read-more",{"id":60},"1fafed86-05bb-4de4-b7d0-bb0bd6abc9d2",[62,63,64],"blockquote",{},[10,65,66,70,71,75,76],{},[67,68,69],"span",{},"!NOTE","\nN'oubliez pas de ",[72,73,74],"strong",{},"livrer le code du paquet aussi natif que possible"," et de laisser les outils de l'utilisateur gérer la transpilation et l'optimisation. C'est un principe que je garde toujours à l'esprit lorsque je crée des bibliothèques, ce qui simplifie considérablement le processus. ",[19,77,78],{},"Chaque cas est unique, mais c'est une bonne ligne directrice à suivre.",[10,80,81],{},"L'utilisation des SFC de Vue.js complique ce processus. Examinons pourquoi en explorant les défis que vous rencontrerez lors de la construction d'une bibliothèque de composants Vue.js.",[10,83,84],{},"Considérons le composant suivant :",[86,87,92],"pre",{"className":88,"code":89,"language":90,"meta":91,"style":91},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript lang=\"ts\" setup>\nimport { useUser } from '..\u002Fcomposables'\n\nconst { user } = useUser()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"user\">\n    {{ user.name }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[93,94,95,129,158,165,188,198,203,213,236,242,252],"code",{"__ignoreMap":91},[67,96,99,103,107,111,114,117,121,123,126],{"class":97,"line":98},"line",1,[67,100,102],{"class":101},"sMK4o","\u003C",[67,104,106],{"class":105},"swJcz","script",[67,108,110],{"class":109},"spNyl"," lang",[67,112,113],{"class":101},"=",[67,115,116],{"class":101},"\"",[67,118,120],{"class":119},"sfazB","ts",[67,122,116],{"class":101},[67,124,125],{"class":109}," setup",[67,127,128],{"class":101},">\n",[67,130,132,136,139,143,146,149,152,155],{"class":97,"line":131},2,[67,133,135],{"class":134},"s7zQu","import",[67,137,138],{"class":101}," {",[67,140,142],{"class":141},"sTEyZ"," useUser",[67,144,145],{"class":101}," }",[67,147,148],{"class":134}," from",[67,150,151],{"class":101}," '",[67,153,154],{"class":119},"..\u002Fcomposables",[67,156,157],{"class":101},"'\n",[67,159,161],{"class":97,"line":160},3,[67,162,164],{"emptyLinePlaceholder":163},true,"\n",[67,166,168,171,173,176,179,182,185],{"class":97,"line":167},4,[67,169,170],{"class":109},"const",[67,172,138],{"class":101},[67,174,175],{"class":141}," user ",[67,177,178],{"class":101},"}",[67,180,181],{"class":101}," =",[67,183,142],{"class":184},"s2Zo4",[67,186,187],{"class":141},"()\n",[67,189,191,194,196],{"class":97,"line":190},5,[67,192,193],{"class":101},"\u003C\u002F",[67,195,106],{"class":105},[67,197,128],{"class":101},[67,199,201],{"class":97,"line":200},6,[67,202,164],{"emptyLinePlaceholder":163},[67,204,206,208,211],{"class":97,"line":205},7,[67,207,102],{"class":101},[67,209,210],{"class":105},"template",[67,212,128],{"class":101},[67,214,216,219,222,225,227,229,232,234],{"class":97,"line":215},8,[67,217,218],{"class":101},"  \u003C",[67,220,221],{"class":105},"div",[67,223,224],{"class":109}," v-if",[67,226,113],{"class":101},[67,228,116],{"class":101},[67,230,231],{"class":119},"user",[67,233,116],{"class":101},[67,235,128],{"class":101},[67,237,239],{"class":97,"line":238},9,[67,240,241],{"class":141},"    {{ user.name }}\n",[67,243,245,248,250],{"class":97,"line":244},10,[67,246,247],{"class":101},"  \u003C\u002F",[67,249,221],{"class":105},[67,251,128],{"class":101},[67,253,255,257,259],{"class":97,"line":254},11,[67,256,193],{"class":101},[67,258,210],{"class":105},[67,260,128],{"class":101},[10,262,263],{},"Le composable est le suivant :",[86,265,268],{"className":266,"code":267,"language":120,"meta":91,"style":91},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ref } from 'vue'\n\nexport function useUser() {\n  const user = ref({ name: 'John Doe' })\n\n  return {\n    user\n  }\n}\n",[93,269,270,289,293,309,346,350,357,362,367],{"__ignoreMap":91},[67,271,272,274,276,279,281,283,285,287],{"class":97,"line":98},[67,273,135],{"class":134},[67,275,138],{"class":101},[67,277,278],{"class":141}," ref",[67,280,145],{"class":101},[67,282,148],{"class":134},[67,284,151],{"class":101},[67,286,90],{"class":119},[67,288,157],{"class":101},[67,290,291],{"class":97,"line":131},[67,292,164],{"emptyLinePlaceholder":163},[67,294,295,298,301,303,306],{"class":97,"line":160},[67,296,297],{"class":134},"export",[67,299,300],{"class":109}," function",[67,302,142],{"class":184},[67,304,305],{"class":101},"()",[67,307,308],{"class":101}," {\n",[67,310,311,314,317,319,321,324,327,330,333,335,338,341,343],{"class":97,"line":167},[67,312,313],{"class":109},"  const",[67,315,316],{"class":141}," user",[67,318,181],{"class":101},[67,320,278],{"class":184},[67,322,323],{"class":105},"(",[67,325,326],{"class":101},"{",[67,328,329],{"class":105}," name",[67,331,332],{"class":101},":",[67,334,151],{"class":101},[67,336,337],{"class":119},"John Doe",[67,339,340],{"class":101},"'",[67,342,145],{"class":101},[67,344,345],{"class":105},")\n",[67,347,348],{"class":97,"line":190},[67,349,164],{"emptyLinePlaceholder":163},[67,351,352,355],{"class":97,"line":200},[67,353,354],{"class":134},"  return",[67,356,308],{"class":101},[67,358,359],{"class":97,"line":205},[67,360,361],{"class":141},"    user\n",[67,363,364],{"class":97,"line":215},[67,365,366],{"class":101},"  }\n",[67,368,369],{"class":97,"line":238},[67,370,371],{"class":101},"}\n",[10,373,374,375],{},"Le composant utilise un composable importé d'un autre fichier. ",[19,376,377],{},"Cela peut sembler trivial, mais cela pose un problème significatif.",[10,379,380],{},"Tout cela suit l'architecture ci-dessous :",[86,382,387],{"className":383,"code":385,"language":386},[384],"language-text","src\u002F\n  components\u002F\n    User.vue\n  composables\u002F\n    useUser.ts\n  index.ts\n","text",[93,388,385],{"__ignoreMap":91},[10,390,391,392,395],{},"Le fichier ",[93,393,394],{},"index.ts"," sert de point d'entrée de la bibliothèque et ressemble à ceci :",[86,397,399],{"className":266,"code":398,"language":120,"meta":91,"style":91},"import User from '.\u002Fcomponents\u002FUser.vue'\n\nexport { User }\n\nexport { useUser } from '.\u002Fcomposables\u002FuseUser'\n",[93,400,401,418,422,434,438],{"__ignoreMap":91},[67,402,403,405,408,411,413,416],{"class":97,"line":98},[67,404,135],{"class":134},[67,406,407],{"class":141}," User ",[67,409,410],{"class":134},"from",[67,412,151],{"class":101},[67,414,415],{"class":119},".\u002Fcomponents\u002FUser.vue",[67,417,157],{"class":101},[67,419,420],{"class":97,"line":131},[67,421,164],{"emptyLinePlaceholder":163},[67,423,424,426,428,431],{"class":97,"line":160},[67,425,297],{"class":134},[67,427,138],{"class":101},[67,429,430],{"class":141}," User",[67,432,433],{"class":101}," }\n",[67,435,436],{"class":97,"line":167},[67,437,164],{"emptyLinePlaceholder":163},[67,439,440,442,444,446,448,450,452,455],{"class":97,"line":190},[67,441,297],{"class":134},[67,443,138],{"class":101},[67,445,142],{"class":141},[67,447,145],{"class":101},[67,449,148],{"class":134},[67,451,151],{"class":101},[67,453,454],{"class":119},".\u002Fcomposables\u002FuseUser",[67,456,157],{"class":101},[10,458,459,460,463,464,467],{},"De plus, le ",[93,461,462],{},"package.json"," inclut quelques ",[93,465,466],{},"exports"," :",[86,469,473],{"className":470,"code":471,"language":472,"meta":91,"style":91},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"type\": \"module\",\n  \"exports\": {\n    \".\": {\n      \"types\": \".\u002Fdist\u002Findex.d.ts\",\n      \"import\": \".\u002Fdist\u002Findex.mjs\"\n    }\n  },\n  \"main\": \"dist\u002Findex.mjs\",\n  \"types\": \"dist\u002Findex.d.ts\"\n}\n","json",[93,474,475,480,503,515,529,551,569,574,579,599,616],{"__ignoreMap":91},[67,476,477],{"class":97,"line":98},[67,478,479],{"class":101},"{\n",[67,481,482,485,488,490,492,495,498,500],{"class":97,"line":131},[67,483,484],{"class":101},"  \"",[67,486,487],{"class":109},"type",[67,489,116],{"class":101},[67,491,332],{"class":101},[67,493,494],{"class":101}," \"",[67,496,497],{"class":119},"module",[67,499,116],{"class":101},[67,501,502],{"class":101},",\n",[67,504,505,507,509,511,513],{"class":97,"line":160},[67,506,484],{"class":101},[67,508,466],{"class":109},[67,510,116],{"class":101},[67,512,332],{"class":101},[67,514,308],{"class":101},[67,516,517,520,523,525,527],{"class":97,"line":167},[67,518,519],{"class":101},"    \"",[67,521,56],{"class":522},"sBMFI",[67,524,116],{"class":101},[67,526,332],{"class":101},[67,528,308],{"class":101},[67,530,531,534,538,540,542,544,547,549],{"class":97,"line":190},[67,532,533],{"class":101},"      \"",[67,535,537],{"class":536},"sbssI","types",[67,539,116],{"class":101},[67,541,332],{"class":101},[67,543,494],{"class":101},[67,545,546],{"class":119},".\u002Fdist\u002Findex.d.ts",[67,548,116],{"class":101},[67,550,502],{"class":101},[67,552,553,555,557,559,561,563,566],{"class":97,"line":200},[67,554,533],{"class":101},[67,556,135],{"class":536},[67,558,116],{"class":101},[67,560,332],{"class":101},[67,562,494],{"class":101},[67,564,565],{"class":119},".\u002Fdist\u002Findex.mjs",[67,567,568],{"class":101},"\"\n",[67,570,571],{"class":97,"line":205},[67,572,573],{"class":101},"    }\n",[67,575,576],{"class":97,"line":215},[67,577,578],{"class":101},"  },\n",[67,580,581,583,586,588,590,592,595,597],{"class":97,"line":238},[67,582,484],{"class":101},[67,584,585],{"class":109},"main",[67,587,116],{"class":101},[67,589,332],{"class":101},[67,591,494],{"class":101},[67,593,594],{"class":119},"dist\u002Findex.mjs",[67,596,116],{"class":101},[67,598,502],{"class":101},[67,600,601,603,605,607,609,611,614],{"class":97,"line":244},[67,602,484],{"class":101},[67,604,537],{"class":109},[67,606,116],{"class":101},[67,608,332],{"class":101},[67,610,494],{"class":101},[67,612,613],{"class":119},"dist\u002Findex.d.ts",[67,615,568],{"class":101},[67,617,618],{"class":97,"line":254},[67,619,371],{"class":101},[621,622,624],"h2",{"id":623},"similaire-à-un-projet-typescript-standard","Similaire à un projet TypeScript standard",[62,626,627],{},[10,628,629,631],{},[67,630,69],{},"\nUn bundle est un seul fichier encapsulant tout le code de votre projet. Il optimise le chargement du projet en minimisant le nombre de fichiers à charger. Ce bundle n'est pas transpile (sauf TypeScript vers JavaScript) ni minifié lors de la création d'un package npm.",[10,633,634,635,638],{},"Maintenant, si nous tentons de regrouper ce projet, notre dossier ",[93,636,637],{},"dist"," apparaîtra comme ceci :",[86,640,643],{"className":641,"code":642,"language":386},[384],"dist\u002F\n  index.cjs\n",[93,644,642],{"__ignoreMap":91},[10,646,647,648,651,652,655,656],{},"En inspectant ",[93,649,650],{},"index.cjs",", vous trouverez une surprise : le composable ",[93,653,654],{},"useUser"," est intégré, mais le composant est complètement ignoré. ",[19,657,658,659,662,663,50,668,673],{},"S'il fonctionne, l'outil pourrait déclencher une erreur du type ",[93,660,661],{},"No loader is configured for \".vue\" files",". Essentiellement, des outils comme ",[32,664,667],{"href":665,"rel":666},"https:\u002F\u002Fesbuild.github.io",[36],"esbuild",[32,669,672],{"href":670,"rel":671},"https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fcompiler-options.html",[36],"tsc"," ne savent pas comment gérer les fichiers Vue. C'est logique, car les fichiers Vue ne sont pas des fichiers JavaScript.",[10,675,676,677,680],{},"Le problème devient évident. Nous avons besoin d'une configuration pour gérer les fichiers Vue. Jetons un coup d'œil rapide sur Internet pour quelque chose comme ",[93,678,679],{},"vue loader",", car nous utilisons des fichiers Vue et devons les transpiler en JavaScript.",[10,682,683,684,689,690],{},"Le premier résultat est ",[32,685,688],{"href":686,"rel":687},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-loader",[36],"Vue Loader",", qui est un loader Webpack. ",[19,691,692],{},"Non. Je refuse d'utiliser Webpack. Vite est maintenant un standard, et il n'y a aucune justification pour employer Webpack dans ce contexte.",[10,694,695,696,17,698,706],{},"Mais avant de plonger plus loin, rappelons-nous notre mantra : ",[72,697,74],{},[19,699,700,701],{},"et ",[32,702,705],{"href":703,"rel":704},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FKISS_principle",[36],"keep it simple, stupid!"," La transpilation des fichiers SFC Vue avec Webpack semble contraire à ce principe.",[621,708,710],{"id":709},"ignorer-les-fichiers-vue","Ignorer les fichiers Vue",[10,712,713,714,717,718,723,724,56],{},"Pour livrer des fichiers ",[93,715,716],{},".vue"," sans les transpiler, nous demandons à notre outil de les ignorer. Cela est réalisé à l'aide d'un outil appelé ",[32,719,722],{"href":720,"rel":721},"https:\u002F\u002Funbuild.unjs.io",[36],"unbuild"," provenant de l'écosystème ",[32,725,728],{"href":726,"rel":727},"https:\u002F\u002Funjs.io",[36],"UnJS",[10,730,731],{},"Unbuild est un outil simple mais hautement configurable car il est construit sur Rollup.",[10,733,734],{},"Pour notre petit projet, nous pouvons l'expérimenter directement :",[86,736,740],{"className":737,"code":738,"language":739,"meta":91,"style":91},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx unbuild\n","sh",[93,741,742],{"__ignoreMap":91},[67,743,744,747],{"class":97,"line":98},[67,745,746],{"class":522},"npx",[67,748,749],{"class":119}," unbuild\n",[10,751,752],{},"Malheureusement, cela échoue pour les mêmes raisons que précédemment :",[86,754,758],{"className":755,"code":756,"language":757,"meta":91,"style":91},"language-txt shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","src\u002Fcomponents\u002FShowGitHubUser.vue (1:0): Expression expected (Note that you need plugins to import files that are not JavaScript)\n","txt",[93,759,760],{"__ignoreMap":91},[67,761,762],{"class":97,"line":98},[67,763,756],{},[10,765,766],{},[19,767,768],{},"Mais unbuild a le potentiel pour bien plus.",[10,770,771,772,774],{},"Pour résoudre ce problème, essayons la solution évidente. Dans le fichier ",[93,773,394],{},", supprimons l'exportation du composant et exportons uniquement les fichiers TypeScript :",[86,776,778],{"className":266,"code":777,"language":120,"meta":91,"style":91},"export { useUser } from '.\u002Fcomposables\u002FuseUser'\n",[93,779,780],{"__ignoreMap":91},[67,781,782,784,786,788,790,792,794,796],{"class":97,"line":98},[67,783,297],{"class":134},[67,785,138],{"class":101},[67,787,142],{"class":141},[67,789,145],{"class":101},[67,791,148],{"class":134},[67,793,151],{"class":101},[67,795,454],{"class":119},[67,797,157],{"class":101},[10,799,800,801,804],{},"Maintenant, la commande ",[93,802,803],{},"npx unbuild"," fonctionne correctement.",[86,806,808],{"className":737,"code":807,"language":739,"meta":91,"style":91},"➜ npx unbuild\nℹ Automatically detected entries: src\u002Findex [esm] [dts]\nℹ Building vue-library\nℹ Cleaning dist directory: .\u002Fdist\n✔ Build succeeded for vue-library\n  dist\u002Findex.mjs (total size: 139 B, chunk size: 139 B, exports: useUser)\n\nΣ Total dist size (byte size): 531 B\n",[93,809,810,820,849,859,875,891,925,929],{"__ignoreMap":91},[67,811,812,815,818],{"class":97,"line":98},[67,813,814],{"class":522},"➜",[67,816,817],{"class":119}," npx",[67,819,749],{"class":119},[67,821,822,825,828,831,834,837,840,843,846],{"class":97,"line":131},[67,823,824],{"class":522},"ℹ",[67,826,827],{"class":119}," Automatically",[67,829,830],{"class":119}," detected",[67,832,833],{"class":119}," entries:",[67,835,836],{"class":119}," src\u002Findex",[67,838,839],{"class":141}," [esm] ",[67,841,842],{"class":101},"[",[67,844,845],{"class":141},"dts",[67,847,848],{"class":101},"]\n",[67,850,851,853,856],{"class":97,"line":160},[67,852,824],{"class":522},[67,854,855],{"class":119}," Building",[67,857,858],{"class":119}," vue-library\n",[67,860,861,863,866,869,872],{"class":97,"line":167},[67,862,824],{"class":522},[67,864,865],{"class":119}," Cleaning",[67,867,868],{"class":119}," dist",[67,870,871],{"class":119}," directory:",[67,873,874],{"class":119}," .\u002Fdist\n",[67,876,877,880,883,886,889],{"class":97,"line":190},[67,878,879],{"class":522},"✔",[67,881,882],{"class":119}," Build",[67,884,885],{"class":119}," succeeded",[67,887,888],{"class":119}," for",[67,890,858],{"class":119},[67,892,893,896,899,902,905,908,911,914,916,918,921,923],{"class":97,"line":200},[67,894,895],{"class":522},"  dist\u002Findex.mjs",[67,897,898],{"class":141}," (total ",[67,900,901],{"class":119},"size:",[67,903,904],{"class":536}," 139",[67,906,907],{"class":119}," B,",[67,909,910],{"class":119}," chunk",[67,912,913],{"class":119}," size:",[67,915,904],{"class":536},[67,917,907],{"class":119},[67,919,920],{"class":119}," exports:",[67,922,142],{"class":119},[67,924,345],{"class":141},[67,926,927],{"class":97,"line":205},[67,928,164],{"emptyLinePlaceholder":163},[67,930,931,934,937,939,942,945,948],{"class":97,"line":215},[67,932,933],{"class":522},"Σ",[67,935,936],{"class":119}," Total",[67,938,868],{"class":119},[67,940,941],{"class":119}," size",[67,943,944],{"class":141}," (byte ",[67,946,947],{"class":119},"size",[67,949,950],{"class":141},"): 531 B\n",[10,952,953,954,957,958,56],{},"C'est un bon début, mais nos composants restent dans le dossier ",[93,955,956],{},"src"," et peu importe combien vous cherchez ardemment, ils sont absents du dossier ",[93,959,637],{},[621,961,963],{"id":962},"copier-les-fichiers-vue","Copier les fichiers Vue",[10,965,966,967,970,971,973,974,976,977,56],{},"Maintenant que les fichiers ",[93,968,969],{},".ts"," sont traités correctement, nous pouvons tenter de copier les fichiers ",[93,972,716],{}," dans le dossier ",[93,975,637],{}," avec une simple commande ",[93,978,979],{},"cp",[86,981,983],{"className":737,"code":982,"language":739,"meta":91,"style":91},"cp -r src\u002Fcomponents\u002F dist\u002Fcomponents\u002F\n",[93,984,985],{"__ignoreMap":91},[67,986,987,989,992,995],{"class":97,"line":98},[67,988,979],{"class":522},[67,990,991],{"class":119}," -r",[67,993,994],{"class":119}," src\u002Fcomponents\u002F",[67,996,997],{"class":119}," dist\u002Fcomponents\u002F\n",[10,999,1000,1001,1003,1004,1006],{},"Ensuite, nous ajoutons un champ ",[93,1002,466],{}," dans le ",[93,1005,462],{}," pour informer l'utilisateur où localiser les composants :",[86,1008,1010],{"className":470,"code":1009,"language":472,"meta":91,"style":91},"{\n  \"type\": \"module\",\n  \"exports\": {\n    \".\": {\n      \"types\": \".\u002Fdist\u002Findex.d.ts\",\n      \"import\": \".\u002Fdist\u002Findex.mjs\"\n    },\n    \".\u002Fcomponents\u002F*\": {\n      \"import\": \".\u002Fdist\u002Fcomponents\u002F*.vue\"\n    }\n  },\n  \"main\": \"dist\u002Findex.mjs\",\n  \"types\": \"dist\u002Findex.d.ts\"\n}\n",[93,1011,1012,1016,1034,1046,1058,1076,1092,1097,1110,1127,1131,1135,1154,1171],{"__ignoreMap":91},[67,1013,1014],{"class":97,"line":98},[67,1015,479],{"class":101},[67,1017,1018,1020,1022,1024,1026,1028,1030,1032],{"class":97,"line":131},[67,1019,484],{"class":101},[67,1021,487],{"class":109},[67,1023,116],{"class":101},[67,1025,332],{"class":101},[67,1027,494],{"class":101},[67,1029,497],{"class":119},[67,1031,116],{"class":101},[67,1033,502],{"class":101},[67,1035,1036,1038,1040,1042,1044],{"class":97,"line":160},[67,1037,484],{"class":101},[67,1039,466],{"class":109},[67,1041,116],{"class":101},[67,1043,332],{"class":101},[67,1045,308],{"class":101},[67,1047,1048,1050,1052,1054,1056],{"class":97,"line":167},[67,1049,519],{"class":101},[67,1051,56],{"class":522},[67,1053,116],{"class":101},[67,1055,332],{"class":101},[67,1057,308],{"class":101},[67,1059,1060,1062,1064,1066,1068,1070,1072,1074],{"class":97,"line":190},[67,1061,533],{"class":101},[67,1063,537],{"class":536},[67,1065,116],{"class":101},[67,1067,332],{"class":101},[67,1069,494],{"class":101},[67,1071,546],{"class":119},[67,1073,116],{"class":101},[67,1075,502],{"class":101},[67,1077,1078,1080,1082,1084,1086,1088,1090],{"class":97,"line":200},[67,1079,533],{"class":101},[67,1081,135],{"class":536},[67,1083,116],{"class":101},[67,1085,332],{"class":101},[67,1087,494],{"class":101},[67,1089,565],{"class":119},[67,1091,568],{"class":101},[67,1093,1094],{"class":97,"line":205},[67,1095,1096],{"class":101},"    },\n",[67,1098,1099,1101,1104,1106,1108],{"class":97,"line":215},[67,1100,519],{"class":101},[67,1102,1103],{"class":522},".\u002Fcomponents\u002F*",[67,1105,116],{"class":101},[67,1107,332],{"class":101},[67,1109,308],{"class":101},[67,1111,1112,1114,1116,1118,1120,1122,1125],{"class":97,"line":238},[67,1113,533],{"class":101},[67,1115,135],{"class":536},[67,1117,116],{"class":101},[67,1119,332],{"class":101},[67,1121,494],{"class":101},[67,1123,1124],{"class":119},".\u002Fdist\u002Fcomponents\u002F*.vue",[67,1126,568],{"class":101},[67,1128,1129],{"class":97,"line":244},[67,1130,573],{"class":101},[67,1132,1133],{"class":97,"line":254},[67,1134,578],{"class":101},[67,1136,1138,1140,1142,1144,1146,1148,1150,1152],{"class":97,"line":1137},12,[67,1139,484],{"class":101},[67,1141,585],{"class":109},[67,1143,116],{"class":101},[67,1145,332],{"class":101},[67,1147,494],{"class":101},[67,1149,594],{"class":119},[67,1151,116],{"class":101},[67,1153,502],{"class":101},[67,1155,1157,1159,1161,1163,1165,1167,1169],{"class":97,"line":1156},13,[67,1158,484],{"class":101},[67,1160,537],{"class":109},[67,1162,116],{"class":101},[67,1164,332],{"class":101},[67,1166,494],{"class":101},[67,1168,613],{"class":119},[67,1170,568],{"class":101},[67,1172,1174],{"class":97,"line":1173},14,[67,1175,371],{"class":101},[10,1177,1178,1179,1182],{},"Ça a l'air prometteur, n'est-ce pas ? ",[19,1180,1181],{},"Mais ce n'est pas le cas."," 😔",[621,1184,1186],{"id":1185},"le-dilemme-du-chemin-dimportation","Le dilemme du chemin d'importation",[10,1188,1189,1190,1192],{},"Dans notre composant Vue, le composable ",[93,1191,654],{}," est importé comme ceci :",[86,1194,1196],{"className":88,"code":1195,"language":90,"meta":91,"style":91},"\u003Cscript lang=\"ts\" setup>\nimport { useUser } from '..\u002Fcomposables'\n\u003C\u002Fscript>\n",[93,1197,1198,1218,1236],{"__ignoreMap":91},[67,1199,1200,1202,1204,1206,1208,1210,1212,1214,1216],{"class":97,"line":98},[67,1201,102],{"class":101},[67,1203,106],{"class":105},[67,1205,110],{"class":109},[67,1207,113],{"class":101},[67,1209,116],{"class":101},[67,1211,120],{"class":119},[67,1213,116],{"class":101},[67,1215,125],{"class":109},[67,1217,128],{"class":101},[67,1219,1220,1222,1224,1226,1228,1230,1232,1234],{"class":97,"line":131},[67,1221,135],{"class":134},[67,1223,138],{"class":101},[67,1225,142],{"class":141},[67,1227,145],{"class":101},[67,1229,148],{"class":134},[67,1231,151],{"class":101},[67,1233,154],{"class":119},[67,1235,157],{"class":101},[67,1237,1238,1240,1242],{"class":97,"line":160},[67,1239,193],{"class":101},[67,1241,106],{"class":105},[67,1243,128],{"class":101},[10,1245,1246,1247,1249],{},"Pendant ce temps, notre dossier ",[93,1248,637],{}," est structuré comme suit :",[86,1251,1254],{"className":1252,"code":1253,"language":386},[384],"dist\u002F\n  components\u002F\n    User.vue\n  index.d.mts\n  index.d.ts\n  index.mjs\n",[93,1255,1253],{"__ignoreMap":91},[10,1257,1258],{},"Pouvez-vous identifier le problème ? 👀",[10,1260,1261,1262,1265,1266,1269],{},"Le composant est inutilisable et produira une erreur du type ",[93,1263,1264],{},"Cannot find module '..\u002Fcomposables' or its corresponding type declarations",", car le chemin mène nulle part. Nous avons regroupé tous nos fichiers TypeScript dans un seul fichier ",[93,1267,1268],{},"index.mjs",", perdant complètement la structure du projet.",[621,1271,1273],{"id":1272},"regrouper-ou-ne-pas-regrouper","Regrouper ou ne pas regrouper ?",[10,1275,1276],{},"À partir de là, nous avons deux choix :",[1278,1279,1280,1292],"ol",{},[1281,1282,1283,1286,1287,1291],"li",{},[72,1284,1285],{},"Regrouper les fichiers Vue"," en utilisant ",[32,1288,55],{"href":1289,"rel":1290},"https:\u002F\u002Fvitejs.dev",[36],", des plugins et une configuration extensive.",[1281,1293,1294,1297,1298,1303],{},[72,1295,1296],{},"Conserver la structure de répertoires"," et utiliser un outil comme ",[32,1299,1302],{"href":1300,"rel":1301},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fmkdist",[36],"mkdist"," pour une transpilation fichier à fichier (construction sans bundle) sur les fichiers TypeScript.",[10,1305,1306],{},"La décision dépendra largement de vos besoins spécifiques, mais je suis convaincu que la simplicité est la meilleure approche. Donc, explorons la deuxième option.",[10,1308,1309,1310,973,1312,1314,1315,1318],{},"L'objectif est de transformer les fichiers TypeScript en fichiers JavaScript, tout en préservant la structure d'origine du dossier ",[93,1311,956],{},[93,1313,637],{}," et en ",[19,1316,1317],{},"ignorant"," les fichiers Vue.",[62,1320,1321],{},[10,1322,1323,1325,1326,1329,1330,1333,1334,1339,1340,56],{},[67,1324,69],{},"\nEn utilisant un bloc ",[93,1327,1328],{},"\u003Cscript setup lang=\"ts\">",", mkdist ignorera les fichiers Vue pour permettre au compilateur Vue de générer des props d'exécution. Sinon, il générera un fichier ",[93,1331,1332],{},".vue.d.ts"," pour offrir des types pour le composant Vue. Rappelez-vous que le ",[32,1335,1338],{"href":1336,"rel":1337},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite-plugin-vue\u002Ftree\u002Fmain\u002Fpackages\u002Fplugin-vue",[36],"@vitejs\u002Fplugin-vue"," et Vite comprennent intrinsèquement les blocs de script TypeScript. Pour plus de détails, consultez ",[32,1341,1344],{"href":1342,"rel":1343},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fmkdist\u002Fissues\u002F14",[36],"issue mkdist#14",[621,1346,1348],{"id":1347},"configurer-unbuild","Configurer Unbuild",[10,1350,1351],{},"Oui, nous allons configurer unbuild car il intègre mkdist, ce qui le rend aggréable à utiliser.",[10,1353,1354,1355,1358,1359,1361],{},"Commencez par créer un fichier ",[93,1356,1357],{},"build.config.ts"," à la racine du projet. Unbuild lira ce fichier de configuration pour comprendre comment traiter le projet. Il suppose des valeurs par défaut et infère de nombreux aspects à partir du ",[93,1360,462],{},", mais nous devons lui dire d'utiliser mkdist.",[86,1363,1365],{"className":266,"code":1364,"language":120,"meta":91,"style":91},"import { defineBuildConfig } from 'unbuild'\n\nexport default defineBuildConfig({\n  entries: ['.\u002Fsrc\u002F'],\n  declaration: true,\n})\n",[93,1366,1367,1386,1390,1403,1425,1438],{"__ignoreMap":91},[67,1368,1369,1371,1373,1376,1378,1380,1382,1384],{"class":97,"line":98},[67,1370,135],{"class":134},[67,1372,138],{"class":101},[67,1374,1375],{"class":141}," defineBuildConfig",[67,1377,145],{"class":101},[67,1379,148],{"class":134},[67,1381,151],{"class":101},[67,1383,722],{"class":119},[67,1385,157],{"class":101},[67,1387,1388],{"class":97,"line":131},[67,1389,164],{"emptyLinePlaceholder":163},[67,1391,1392,1394,1397,1399,1401],{"class":97,"line":160},[67,1393,297],{"class":134},[67,1395,1396],{"class":134}," default",[67,1398,1375],{"class":184},[67,1400,323],{"class":141},[67,1402,479],{"class":101},[67,1404,1405,1408,1410,1413,1415,1418,1420,1423],{"class":97,"line":167},[67,1406,1407],{"class":105},"  entries",[67,1409,332],{"class":101},[67,1411,1412],{"class":141}," [",[67,1414,340],{"class":101},[67,1416,1417],{"class":119},".\u002Fsrc\u002F",[67,1419,340],{"class":101},[67,1421,1422],{"class":141},"]",[67,1424,502],{"class":101},[67,1426,1427,1430,1432,1436],{"class":97,"line":190},[67,1428,1429],{"class":105},"  declaration",[67,1431,332],{"class":101},[67,1433,1435],{"class":1434},"sfNiH"," true",[67,1437,502],{"class":101},[67,1439,1440,1442],{"class":97,"line":200},[67,1441,178],{"class":101},[67,1443,345],{"class":141},[10,1445,1446,1447,1450,1451,1454,1455,1457,1458,1461,1462,1465,1466,1468,1469,1472,1473,1476],{},"C'est un fichier de configuration très simple. ",[19,1448,1449],{},"Et je l'adore."," La clé ",[93,1452,1453],{},"entries"," informe unbuild du fichier initial à commencer à transpiler. Cependant, ",[93,1456,1417],{}," est un répertoire, indiqué par le ",[93,1459,1460],{},"\u002F"," à la fin. Avec cet indice, unbuild contourne le regroupement par défaut ",[93,1463,1464],{},"rollup"," en faveur de ",[93,1467,1302],{},". La clé ",[93,1470,1471],{},"declaration"," incite unbuild à créer des fichiers de déclaration TypeScript (",[93,1474,1475],{},".d.ts",").",[10,1478,1479,1480,1003,1482,1484,1485,56],{},"Nous pouvons également supprimer le champ ",[93,1481,466],{},[93,1483,462],{}," puisque nous ne regrouperons plus les fichiers et restaurer l'exportation du composant dans le fichier ",[93,1486,394],{},[10,1488,1489,1490,1492],{},"Relaçons la commande ",[93,1491,803],{}," et magie :",[86,1494,1496],{"className":737,"code":1495,"language":739,"meta":91,"style":91},"➜ npx unbuild\nℹ Building vue-library\nℹ Cleaning dist directory: .\u002Fdist\n✔ Build succeeded for vue-library\n  dist (total size: 600 B)\n  └─ dist\u002Findex.d.ts (108 B)\n  └─ dist\u002Findex.mjs (112 B)\n  └─ dist\u002Fcomposables\u002FuseUser.d.ts (79 B)\n  └─ dist\u002Fcomposables\u002FuseUser.mjs (124 B)\n  └─ dist\u002Fcomponents\u002FUser.vue (177 B)\nΣ Total dist size (byte size): 600 B\n",[93,1497,1498,1506,1514,1526,1538,1555,1571,1585,1599,1613,1627],{"__ignoreMap":91},[67,1499,1500,1502,1504],{"class":97,"line":98},[67,1501,814],{"class":522},[67,1503,817],{"class":119},[67,1505,749],{"class":119},[67,1507,1508,1510,1512],{"class":97,"line":131},[67,1509,824],{"class":522},[67,1511,855],{"class":119},[67,1513,858],{"class":119},[67,1515,1516,1518,1520,1522,1524],{"class":97,"line":160},[67,1517,824],{"class":522},[67,1519,865],{"class":119},[67,1521,868],{"class":119},[67,1523,871],{"class":119},[67,1525,874],{"class":119},[67,1527,1528,1530,1532,1534,1536],{"class":97,"line":167},[67,1529,879],{"class":522},[67,1531,882],{"class":119},[67,1533,885],{"class":119},[67,1535,888],{"class":119},[67,1537,858],{"class":119},[67,1539,1540,1543,1545,1547,1550,1553],{"class":97,"line":190},[67,1541,1542],{"class":522},"  dist",[67,1544,898],{"class":141},[67,1546,901],{"class":119},[67,1548,1549],{"class":536}," 600",[67,1551,1552],{"class":119}," B",[67,1554,345],{"class":141},[67,1556,1557,1560,1563,1566,1569],{"class":97,"line":200},[67,1558,1559],{"class":522},"  └─",[67,1561,1562],{"class":119}," dist\u002Findex.d.ts",[67,1564,1565],{"class":141}," (108 ",[67,1567,1568],{"class":119},"B",[67,1570,345],{"class":141},[67,1572,1573,1575,1578,1581,1583],{"class":97,"line":205},[67,1574,1559],{"class":522},[67,1576,1577],{"class":119}," dist\u002Findex.mjs",[67,1579,1580],{"class":141}," (112 ",[67,1582,1568],{"class":119},[67,1584,345],{"class":141},[67,1586,1587,1589,1592,1595,1597],{"class":97,"line":215},[67,1588,1559],{"class":522},[67,1590,1591],{"class":119}," dist\u002Fcomposables\u002FuseUser.d.ts",[67,1593,1594],{"class":141}," (79 ",[67,1596,1568],{"class":119},[67,1598,345],{"class":141},[67,1600,1601,1603,1606,1609,1611],{"class":97,"line":238},[67,1602,1559],{"class":522},[67,1604,1605],{"class":119}," dist\u002Fcomposables\u002FuseUser.mjs",[67,1607,1608],{"class":141}," (124 ",[67,1610,1568],{"class":119},[67,1612,345],{"class":141},[67,1614,1615,1617,1620,1623,1625],{"class":97,"line":244},[67,1616,1559],{"class":522},[67,1618,1619],{"class":119}," dist\u002Fcomponents\u002FUser.vue",[67,1621,1622],{"class":141}," (177 ",[67,1624,1568],{"class":119},[67,1626,345],{"class":141},[67,1628,1629,1631,1633,1635,1637,1639,1641],{"class":97,"line":254},[67,1630,933],{"class":522},[67,1632,936],{"class":119},[67,1634,868],{"class":119},[67,1636,941],{"class":119},[67,1638,944],{"class":141},[67,1640,947],{"class":119},[67,1642,1643],{"class":141},"): 600 B\n",[10,1645,1646,1647,1649],{},"Maintenant, le dossier ",[93,1648,637],{}," apparaît comme ceci :",[86,1651,1654],{"className":1652,"code":1653,"language":386},[384],"dist\u002F\n  components\u002F\n    User.vue\n  composables\u002F\n    useUser.d.ts\n    useUser.mjs\n  index.d.ts\n  index.mjs\n",[93,1655,1653],{"__ignoreMap":91},[10,1657,1658,1659,1661,1662,1665,1666,1668],{},"Cela reflète la structure du dossier ",[93,1660,956],{},", et le composant ",[93,1663,1664],{},"User.vue"," est maintenant utilisable dans le dossier ",[93,1667,637],{},". Le chemin d'importation relatif reste intact, et le composant peut être utilisé dans n'importe quel projet Vue. :partying_face:",[621,1670,1672],{"id":1671},"développement-local","Développement local",[10,1674,1675,1676,1679],{},"De nombreux tutoriels s'arrêtent ici, suggérant que vous êtes prêt à publier votre package sur npm. Mais comment pouvez-vous créer une bibliothèque complexe si vous ne pouvez pas ",[72,1677,1678],{},"voir le résultat de votre travail"," ? Si vous ne pouvez pas la tester tout en la construisant ?",[10,1681,1682],{},"Vous ne pouvez pas.",[10,1684,1685],{},"Examinons comment utiliser la bibliothèque dans un projet local, au sein du même dépôt pour plus de simplicité.",[10,1687,1688,1689,56],{},"Je vais expliquer la méthode la plus simple en utilisant un ",[32,1690,1693],{"href":1691,"rel":1692},"https:\u002F\u002Fpnpm.io\u002F",[36],"pnpm workspace",[10,1695,1354,1696,1699],{},[93,1697,1698],{},"pnpm-workspace.yaml"," à la racine du projet :",[86,1701,1705],{"className":1702,"code":1703,"language":1704,"meta":91,"style":91},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","packages:\n  - .\n  - playground\n","yaml",[93,1706,1707,1715,1723],{"__ignoreMap":91},[67,1708,1709,1712],{"class":97,"line":98},[67,1710,1711],{"class":105},"packages",[67,1713,1714],{"class":101},":\n",[67,1716,1717,1720],{"class":97,"line":131},[67,1718,1719],{"class":101},"  -",[67,1721,1722],{"class":536}," .\n",[67,1724,1725,1727],{"class":97,"line":160},[67,1726,1719],{"class":101},[67,1728,1729],{"class":119}," playground\n",[10,1731,1732,1733,467],{},"Ensuite, créez un nouveau projet Vite dans un dossier ",[93,1734,1735],{},"playground",[86,1737,1739],{"className":737,"code":1738,"language":739,"meta":91,"style":91},"npx create-vite playground --template vue-ts\n",[93,1740,1741],{"__ignoreMap":91},[67,1742,1743,1745,1748,1751,1754],{"class":97,"line":98},[67,1744,746],{"class":522},[67,1746,1747],{"class":119}," create-vite",[67,1749,1750],{"class":119}," playground",[67,1752,1753],{"class":119}," --template",[67,1755,1756],{"class":119}," vue-ts\n",[10,1758,1759],{},"Puisque nous utilisons un pnpm workspace, installez les dépendances à partir de la racine du projet :",[86,1761,1763],{"className":737,"code":1762,"language":739,"meta":91,"style":91},"pnpm install\n",[93,1764,1765],{"__ignoreMap":91},[67,1766,1767,1770],{"class":97,"line":98},[67,1768,1769],{"class":522},"pnpm",[67,1771,1772],{"class":119}," install\n",[62,1774,1775],{},[10,1776,1777,1779,1780,1783],{},[67,1778,69],{},"\nCette étape n'est pas obligatoire. Vous pouvez créer un nouveau projet Vite et installer les dépendances à l'intérieur. Pnpm simplifie cela en installant les dépendances pour tous les espaces de travail à la racine. Une simple commande ",[93,1781,1782],{},"pnpm install"," installera les dépendances de tous les espaces de travail.",[10,1785,1786,1787,1789],{},"Maintenant, nous pouvons utiliser cette bibliothèque ",[93,1788,1735],{}," dans un projet \"réel\" pour tester notre bibliothèque.",[10,1791,1792,1793,1796,1797,467],{},"Par exemple, ouvrez le fichier ",[93,1794,1795],{},"src\u002FApp.vue"," et importez le composant ",[93,1798,1799],{},"User",[86,1801,1803],{"className":88,"code":1802,"language":90,"meta":91,"style":91},"\u003Cscript setup lang=\"ts\">\nimport { User } from '..\u002F..\u002Fsrc'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUser \u002F>\n\u003C\u002Ftemplate>\n",[93,1804,1805,1825,1844,1852,1856,1864,1873],{"__ignoreMap":91},[67,1806,1807,1809,1811,1813,1815,1817,1819,1821,1823],{"class":97,"line":98},[67,1808,102],{"class":101},[67,1810,106],{"class":105},[67,1812,125],{"class":109},[67,1814,110],{"class":109},[67,1816,113],{"class":101},[67,1818,116],{"class":101},[67,1820,120],{"class":119},[67,1822,116],{"class":101},[67,1824,128],{"class":101},[67,1826,1827,1829,1831,1833,1835,1837,1839,1842],{"class":97,"line":131},[67,1828,135],{"class":134},[67,1830,138],{"class":101},[67,1832,430],{"class":141},[67,1834,145],{"class":101},[67,1836,148],{"class":134},[67,1838,151],{"class":101},[67,1840,1841],{"class":119},"..\u002F..\u002Fsrc",[67,1843,157],{"class":101},[67,1845,1846,1848,1850],{"class":97,"line":160},[67,1847,193],{"class":101},[67,1849,106],{"class":105},[67,1851,128],{"class":101},[67,1853,1854],{"class":97,"line":167},[67,1855,164],{"emptyLinePlaceholder":163},[67,1857,1858,1860,1862],{"class":97,"line":190},[67,1859,102],{"class":101},[67,1861,210],{"class":105},[67,1863,128],{"class":101},[67,1865,1866,1868,1870],{"class":97,"line":200},[67,1867,218],{"class":101},[67,1869,1799],{"class":105},[67,1871,1872],{"class":101}," \u002F>\n",[67,1874,1875,1877,1879],{"class":97,"line":205},[67,1876,193],{"class":101},[67,1878,210],{"class":105},[67,1880,128],{"class":101},[10,1882,1883],{},"Et exécutez le projet :",[86,1885,1887],{"className":737,"code":1886,"language":739,"meta":91,"style":91},"cd playground && pnpm dev\n",[93,1888,1889],{"__ignoreMap":91},[67,1890,1891,1894,1896,1899,1902],{"class":97,"line":98},[67,1892,1893],{"class":184},"cd",[67,1895,1750],{"class":119},[67,1897,1898],{"class":101}," &&",[67,1900,1901],{"class":522}," pnpm",[67,1903,1904],{"class":119}," dev\n",[10,1906,1907,1908,1910,1911],{},"Vous verrez le composant ",[93,1909,1799],{}," s'afficher dans le navigateur. 🎉 Si simple, mais si puissant. ",[19,1912,1913],{},"J'utilise cette méthode pour presque toutes les bibliothèques que je construis, et cela fonctionne parfaitement.",[621,1915,1917],{"id":1916},"publication-sur-npm","Publication sur npm",[10,1919,1920],{},"Cette partie est simple une fois que vous avez compris le flux de travail.",[10,1922,1923,1924,1927],{},"Commencez par nommer votre bibliothèque. J'utiliserai ",[93,1925,1926],{},"@barbapapazes\u002Fvue-library"," pour cet exemple.",[10,1929,1930,1931,1936,1937,56],{},"Ensuite, créez un compte sur ",[32,1932,1935],{"href":1933,"rel":1934},"https:\u002F\u002Fwww.npmjs.com",[36],"npm"," et connectez-vous en utilisant la commande ",[93,1938,1939],{},"npm login",[10,1941,1942,1943,1948,1949,1952],{},"Puis, installez ",[32,1944,1947],{"href":1945,"rel":1946},"https:\u002F\u002Fchangelogen.unjs.io",[36],"changelogen"," pour générer un changelog, mettre à jour le numéro de version selon la gestion sémantique des versions et les ",[19,1950,1951],{},"conventional commits",", et pré-remplir la version sur GitHub.",[86,1954,1956],{"className":737,"code":1955,"language":739,"meta":91,"style":91},"pnpm i -D changelogen\n",[93,1957,1958],{"__ignoreMap":91},[67,1959,1960,1962,1965,1968],{"class":97,"line":98},[67,1961,1769],{"class":522},[67,1963,1964],{"class":119}," i",[67,1966,1967],{"class":119}," -D",[67,1969,1970],{"class":119}," changelogen\n",[10,1972,1973,1974,467],{},"Ensuite, ajoutez deux scripts à votre ",[93,1975,462],{},[86,1977,1979],{"className":470,"code":1978,"language":472,"meta":91,"style":91},"{\n  \"scripts\": {\n    \"prepack\": \"unbuild\",\n    \"release\": \"changelogen --release && npm publish --access public && git push --follow-tags\"\n  }\n}\n",[93,1980,1981,1985,1998,2017,2035,2039],{"__ignoreMap":91},[67,1982,1983],{"class":97,"line":98},[67,1984,479],{"class":101},[67,1986,1987,1989,1992,1994,1996],{"class":97,"line":131},[67,1988,484],{"class":101},[67,1990,1991],{"class":109},"scripts",[67,1993,116],{"class":101},[67,1995,332],{"class":101},[67,1997,308],{"class":101},[67,1999,2000,2002,2005,2007,2009,2011,2013,2015],{"class":97,"line":160},[67,2001,519],{"class":101},[67,2003,2004],{"class":522},"prepack",[67,2006,116],{"class":101},[67,2008,332],{"class":101},[67,2010,494],{"class":101},[67,2012,722],{"class":119},[67,2014,116],{"class":101},[67,2016,502],{"class":101},[67,2018,2019,2021,2024,2026,2028,2030,2033],{"class":97,"line":167},[67,2020,519],{"class":101},[67,2022,2023],{"class":522},"release",[67,2025,116],{"class":101},[67,2027,332],{"class":101},[67,2029,494],{"class":101},[67,2031,2032],{"class":119},"changelogen --release && npm publish --access public && git push --follow-tags",[67,2034,568],{"class":101},[67,2036,2037],{"class":97,"line":190},[67,2038,366],{"class":101},[67,2040,2041],{"class":97,"line":200},[67,2042,371],{"class":101},[10,2044,2045,2046,2048,2049,2051,2052,2054],{},"Le script ",[93,2047,2004],{}," exécute la commande ",[93,2050,722],{}," avant de publier le package sur npm. Le script ",[93,2053,2023],{}," génère un changelog, publie le package sur npm, et pousse les tags sur GitHub.",[62,2056,2057],{},[10,2058,2059,2061,2062,2065],{},[67,2060,69],{},"\nVotre projet doit être sur GitHub pour que l'option ",[93,2063,2064],{},"--release"," fonctionne. Sinon, omettez-là et créez la version manuellement sur votre dépôt.",[10,2067,2068],{},"Maintenant, publiez votre package sur npm en utilisant la commande suivante :",[86,2070,2072],{"className":737,"code":2071,"language":739,"meta":91,"style":91},"npm run release\n",[93,2073,2074],{"__ignoreMap":91},[67,2075,2076,2078,2081],{"class":97,"line":98},[67,2077,1935],{"class":522},[67,2079,2080],{"class":119}," run",[67,2082,2083],{"class":119}," release\n",[10,2085,2086],{},"Et c'est tout ! Vous venez de publier votre première bibliothèque de composants Vue.js sur npm. 🚀",[621,2088,2090],{"id":2089},"tout-est-prêt","Tout est prêt",[10,2092,2093],{},"Nous avons terminé pour aujourd'hui. Nous avons couvert de nombreux sujets :",[2095,2096,2097,2100,2103,2106,2109,2112],"ul",{},[1281,2098,2099],{},"Comment construire une bibliothèque de composants Vue.js avec TypeScript.",[1281,2101,2102],{},"Comment gérer les fichiers Vue dans un projet TypeScript.",[1281,2104,2105],{},"Comment utiliser unbuild pour transpiler les fichiers TypeScript sans regrouper les fichiers Vue.",[1281,2107,2108],{},"Comment tirer parti de mkdist pour maintenir la structure du projet.",[1281,2110,2111],{},"Comment utiliser un pnpm workspace pour tester la bibliothèque dans un projet local.",[1281,2113,2114],{},"Comment publier la bibliothèque sur npm.",[10,2116,2117,2118],{},"Pour un exemple plus détaillé et complexe, consultez GitHub : ",[14,2119,2120,2121,56],{"repo":16}," mais tout ce qui a été expliqué ici provient de ",[72,2122,2123],{},"mon expérience dans le monde réel",[10,2125,2126,2127,56],{},"J'espère que vous avez apprécié ce tutoriel et qu'il vous aidera à construire votre propre bibliothèque de composants Vue.js. Si vous avez des questions, n'hésitez pas à me contacter sur ",[32,2128,2131],{"href":2129,"rel":2130},"https:\u002F\u002Fx.com\u002Fsoubiran_",[36],"X (Twitter)",[10,2133,2134],{},[19,2135,2136],{},"Vous pouvez aller encore plus loin en utilisant Vite pour construire votre bibliothèque de composants :",[58,2138],{"id":60},[2140,2141,2142],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":91,"searchDepth":131,"depth":131,"links":2144},[2145,2146,2147,2148,2149,2150,2151,2152,2153],{"id":623,"depth":131,"text":624},{"id":709,"depth":131,"text":710},{"id":962,"depth":131,"text":963},{"id":1185,"depth":131,"text":1186},{"id":1272,"depth":131,"text":1273},{"id":1347,"depth":131,"text":1348},{"id":1671,"depth":131,"text":1672},{"id":1916,"depth":131,"text":1917},{"id":2089,"depth":131,"text":2090},"75df6bff-de40-4056-af23-fae2401cd21a","2024-09-24","Gérer les complexités des SFC de Vue avec des outils puissants comme unbuild et mkdist pour créer une bibliothèque de composants.","md",{},"\u002Ffr\u002Fposts\u002Fthe-simplest-method-to-create-a-vue-js-component-library","---\ncontentId: 75df6bff-de40-4056-af23-fae2401cd21a\ntitle: Créer une Bibliothèque de Composants Vue.js Simplement\ndescription: Gérer les complexités des SFC de Vue avec des outils puissants comme unbuild et mkdist pour créer une bibliothèque de composants.\ndate: 2024-09-24\n---\n\nTL;DR: \u003CGitHubLink repo=\"barbapapazes\u002Fvue-library\" \u002F> _Continuez à lire pour comprendre le processus derrière cela et les raisons de mes choix._\n\nUne bibliothèque de composants est une collection de morceaux réutilisables qui peuvent être utilisés dans divers projets. Elle facilite le partage de ressources entre différents projets et équipes. Ces composants peuvent être basiques et génériques comme des boutons, des champs de saisie et des modales, ou des modules plus spécifiques au métier. _En fin de compte, c'est une méthode pour partager du code entre les projets, une compétence cruciale qui peut faire économiser beaucoup de temps._\n\nCependant, construire une bibliothèque de composants avec [Vue.js](https:\u002F\u002Fvuejs.org) est plus difficile qu'il n'y paraît en raison des [Single File Components](https:\u002F\u002Fvuejs.org\u002Fguide\u002Fscaling-up\u002Fsfc.html) (SFC). Dans un projet TypeScript standard, vous transpilez généralement en JavaScript et regroupez vos fichiers avec un outil comme [tsup](https:\u002F\u002Ftsup.egoist.dev\u002F) ou [Vite](https:\u002F\u002Fvitejs.dev\u002F).\n\n\u003CCalloutReadMore id=\"1fafed86-05bb-4de4-b7d0-bb0bd6abc9d2\" \u002F>\n\n> [!NOTE]\n> N'oubliez pas de **livrer le code du paquet aussi natif que possible** et de laisser les outils de l'utilisateur gérer la transpilation et l'optimisation. C'est un principe que je garde toujours à l'esprit lorsque je crée des bibliothèques, ce qui simplifie considérablement le processus. _Chaque cas est unique, mais c'est une bonne ligne directrice à suivre._\n\nL'utilisation des SFC de Vue.js complique ce processus. Examinons pourquoi en explorant les défis que vous rencontrerez lors de la construction d'une bibliothèque de composants Vue.js.\n\nConsidérons le composant suivant :\n\n```vue\n\u003Cscript lang=\"ts\" setup>\nimport { useUser } from '..\u002Fcomposables'\n\nconst { user } = useUser()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"user\">\n    {{ user.name }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nLe composable est le suivant :\n\n```ts\nimport { ref } from 'vue'\n\nexport function useUser() {\n  const user = ref({ name: 'John Doe' })\n\n  return {\n    user\n  }\n}\n```\n\nLe composant utilise un composable importé d'un autre fichier. _Cela peut sembler trivial, mais cela pose un problème significatif._\n\nTout cela suit l'architecture ci-dessous :\n\n```\nsrc\u002F\n  components\u002F\n    User.vue\n  composables\u002F\n    useUser.ts\n  index.ts\n```\n\nLe fichier `index.ts` sert de point d'entrée de la bibliothèque et ressemble à ceci :\n\n```ts\nimport User from '.\u002Fcomponents\u002FUser.vue'\n\nexport { User }\n\nexport { useUser } from '.\u002Fcomposables\u002FuseUser'\n```\n\nDe plus, le `package.json` inclut quelques `exports` :\n\n```json\n{\n  \"type\": \"module\",\n  \"exports\": {\n    \".\": {\n      \"types\": \".\u002Fdist\u002Findex.d.ts\",\n      \"import\": \".\u002Fdist\u002Findex.mjs\"\n    }\n  },\n  \"main\": \"dist\u002Findex.mjs\",\n  \"types\": \"dist\u002Findex.d.ts\"\n}\n```\n\n## Similaire à un projet TypeScript standard\n\n> [!NOTE]\n> Un bundle est un seul fichier encapsulant tout le code de votre projet. Il optimise le chargement du projet en minimisant le nombre de fichiers à charger. Ce bundle n'est pas transpile (sauf TypeScript vers JavaScript) ni minifié lors de la création d'un package npm.\n\nMaintenant, si nous tentons de regrouper ce projet, notre dossier `dist` apparaîtra comme ceci :\n\n```\ndist\u002F\n  index.cjs\n```\n\nEn inspectant `index.cjs`, vous trouverez une surprise : le composable `useUser` est intégré, mais le composant est complètement ignoré. _S'il fonctionne, l'outil pourrait déclencher une erreur du type `No loader is configured for \".vue\" files`. Essentiellement, des outils comme [esbuild](https:\u002F\u002Fesbuild.github.io) ou [tsc](https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fcompiler-options.html) ne savent pas comment gérer les fichiers Vue. C'est logique, car les fichiers Vue ne sont pas des fichiers JavaScript._\n\nLe problème devient évident. Nous avons besoin d'une configuration pour gérer les fichiers Vue. Jetons un coup d'œil rapide sur Internet pour quelque chose comme `vue loader`, car nous utilisons des fichiers Vue et devons les transpiler en JavaScript.\n\nLe premier résultat est [Vue Loader](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-loader), qui est un loader Webpack. _Non. Je refuse d'utiliser Webpack. Vite est maintenant un standard, et il n'y a aucune justification pour employer Webpack dans ce contexte._\n\nMais avant de plonger plus loin, rappelons-nous notre mantra : **livrer le code du paquet aussi natif que possible** _et [keep it simple, stupid!](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FKISS_principle)_ La transpilation des fichiers SFC Vue avec Webpack semble contraire à ce principe.\n\n## Ignorer les fichiers Vue\n\nPour livrer des fichiers `.vue` sans les transpiler, nous demandons à notre outil de les ignorer. Cela est réalisé à l'aide d'un outil appelé [unbuild](https:\u002F\u002Funbuild.unjs.io) provenant de l'écosystème [UnJS](https:\u002F\u002Funjs.io).\n\nUnbuild est un outil simple mais hautement configurable car il est construit sur Rollup.\n\nPour notre petit projet, nous pouvons l'expérimenter directement :\n\n```sh\nnpx unbuild\n```\n\nMalheureusement, cela échoue pour les mêmes raisons que précédemment :\n\n```txt\nsrc\u002Fcomponents\u002FShowGitHubUser.vue (1:0): Expression expected (Note that you need plugins to import files that are not JavaScript)\n```\n\n_Mais unbuild a le potentiel pour bien plus._\n\nPour résoudre ce problème, essayons la solution évidente. Dans le fichier `index.ts`, supprimons l'exportation du composant et exportons uniquement les fichiers TypeScript :\n\n```ts\nexport { useUser } from '.\u002Fcomposables\u002FuseUser'\n```\n\nMaintenant, la commande `npx unbuild` fonctionne correctement.\n\n```sh\n➜ npx unbuild\nℹ Automatically detected entries: src\u002Findex [esm] [dts]\nℹ Building vue-library\nℹ Cleaning dist directory: .\u002Fdist\n✔ Build succeeded for vue-library\n  dist\u002Findex.mjs (total size: 139 B, chunk size: 139 B, exports: useUser)\n\nΣ Total dist size (byte size): 531 B\n```\n\nC'est un bon début, mais nos composants restent dans le dossier `src` et peu importe combien vous cherchez ardemment, ils sont absents du dossier `dist`.\n\n## Copier les fichiers Vue\n\nMaintenant que les fichiers `.ts` sont traités correctement, nous pouvons tenter de copier les fichiers `.vue` dans le dossier `dist` avec une simple commande `cp`.\n\n```sh\ncp -r src\u002Fcomponents\u002F dist\u002Fcomponents\u002F\n```\n\nEnsuite, nous ajoutons un champ `exports` dans le `package.json` pour informer l'utilisateur où localiser les composants :\n\n```json\n{\n  \"type\": \"module\",\n  \"exports\": {\n    \".\": {\n      \"types\": \".\u002Fdist\u002Findex.d.ts\",\n      \"import\": \".\u002Fdist\u002Findex.mjs\"\n    },\n    \".\u002Fcomponents\u002F*\": {\n      \"import\": \".\u002Fdist\u002Fcomponents\u002F*.vue\"\n    }\n  },\n  \"main\": \"dist\u002Findex.mjs\",\n  \"types\": \"dist\u002Findex.d.ts\"\n}\n```\n\nÇa a l'air prometteur, n'est-ce pas ? _Mais ce n'est pas le cas._ :pensive:\n\n## Le dilemme du chemin d'importation\n\nDans notre composant Vue, le composable `useUser` est importé comme ceci :\n\n```vue\n\u003Cscript lang=\"ts\" setup>\nimport { useUser } from '..\u002Fcomposables'\n\u003C\u002Fscript>\n```\n\nPendant ce temps, notre dossier `dist` est structuré comme suit :\n\n```\ndist\u002F\n  components\u002F\n    User.vue\n  index.d.mts\n  index.d.ts\n  index.mjs\n```\n\nPouvez-vous identifier le problème ? :eyes:\n\nLe composant est inutilisable et produira une erreur du type `Cannot find module '..\u002Fcomposables' or its corresponding type declarations`, car le chemin mène nulle part. Nous avons regroupé tous nos fichiers TypeScript dans un seul fichier `index.mjs`, perdant complètement la structure du projet.\n\n## Regrouper ou ne pas regrouper ?\n\nÀ partir de là, nous avons deux choix :\n\n1. **Regrouper les fichiers Vue** en utilisant [Vite](https:\u002F\u002Fvitejs.dev), des plugins et une configuration extensive.\n2. **Conserver la structure de répertoires** et utiliser un outil comme [mkdist](https:\u002F\u002Fgithub.com\u002Funjs\u002Fmkdist) pour une transpilation fichier à fichier (construction sans bundle) sur les fichiers TypeScript.\n\nLa décision dépendra largement de vos besoins spécifiques, mais je suis convaincu que la simplicité est la meilleure approche. Donc, explorons la deuxième option.\n\nL'objectif est de transformer les fichiers TypeScript en fichiers JavaScript, tout en préservant la structure d'origine du dossier `src` dans le dossier `dist` et en _ignorant_ les fichiers Vue.\n\n> [!NOTE]\n> En utilisant un bloc `\u003Cscript setup lang=\"ts\">`, mkdist ignorera les fichiers Vue pour permettre au compilateur Vue de générer des props d'exécution. Sinon, il générera un fichier `.vue.d.ts` pour offrir des types pour le composant Vue. Rappelez-vous que le [@vitejs\u002Fplugin-vue](https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite-plugin-vue\u002Ftree\u002Fmain\u002Fpackages\u002Fplugin-vue) et Vite comprennent intrinsèquement les blocs de script TypeScript. Pour plus de détails, consultez [issue mkdist#14](https:\u002F\u002Fgithub.com\u002Funjs\u002Fmkdist\u002Fissues\u002F14).\n\n## Configurer Unbuild\n\nOui, nous allons configurer unbuild car il intègre mkdist, ce qui le rend aggréable à utiliser.\n\nCommencez par créer un fichier `build.config.ts` à la racine du projet. Unbuild lira ce fichier de configuration pour comprendre comment traiter le projet. Il suppose des valeurs par défaut et infère de nombreux aspects à partir du `package.json`, mais nous devons lui dire d'utiliser mkdist.\n\n```ts\nimport { defineBuildConfig } from 'unbuild'\n\nexport default defineBuildConfig({\n  entries: ['.\u002Fsrc\u002F'],\n  declaration: true,\n})\n```\n\nC'est un fichier de configuration très simple. _Et je l'adore._ La clé `entries` informe unbuild du fichier initial à commencer à transpiler. Cependant, `.\u002Fsrc\u002F` est un répertoire, indiqué par le `\u002F` à la fin. Avec cet indice, unbuild contourne le regroupement par défaut `rollup` en faveur de `mkdist`. La clé `declaration` incite unbuild à créer des fichiers de déclaration TypeScript (`.d.ts`).\n\nNous pouvons également supprimer le champ `exports` dans le `package.json` puisque nous ne regrouperons plus les fichiers et restaurer l'exportation du composant dans le fichier `index.ts`.\n\nRelaçons la commande `npx unbuild` et magie :\n\n```sh\n➜ npx unbuild\nℹ Building vue-library\nℹ Cleaning dist directory: .\u002Fdist\n✔ Build succeeded for vue-library\n  dist (total size: 600 B)\n  └─ dist\u002Findex.d.ts (108 B)\n  └─ dist\u002Findex.mjs (112 B)\n  └─ dist\u002Fcomposables\u002FuseUser.d.ts (79 B)\n  └─ dist\u002Fcomposables\u002FuseUser.mjs (124 B)\n  └─ dist\u002Fcomponents\u002FUser.vue (177 B)\nΣ Total dist size (byte size): 600 B\n```\n\nMaintenant, le dossier `dist` apparaît comme ceci :\n\n```\ndist\u002F\n  components\u002F\n    User.vue\n  composables\u002F\n    useUser.d.ts\n    useUser.mjs\n  index.d.ts\n  index.mjs\n```\n\nCela reflète la structure du dossier `src`, et le composant `User.vue` est maintenant utilisable dans le dossier `dist`. Le chemin d'importation relatif reste intact, et le composant peut être utilisé dans n'importe quel projet Vue. :partying_face:\n\n## Développement local\n\nDe nombreux tutoriels s'arrêtent ici, suggérant que vous êtes prêt à publier votre package sur npm. Mais comment pouvez-vous créer une bibliothèque complexe si vous ne pouvez pas **voir le résultat de votre travail** ? Si vous ne pouvez pas la tester tout en la construisant ?\n\nVous ne pouvez pas.\n\nExaminons comment utiliser la bibliothèque dans un projet local, au sein du même dépôt pour plus de simplicité.\n\nJe vais expliquer la méthode la plus simple en utilisant un [pnpm workspace](https:\u002F\u002Fpnpm.io\u002F).\n\nCommencez par créer un fichier `pnpm-workspace.yaml` à la racine du projet :\n\n```yaml\npackages:\n  - .\n  - playground\n```\n\nEnsuite, créez un nouveau projet Vite dans un dossier `playground` :\n\n```sh\nnpx create-vite playground --template vue-ts\n```\n\nPuisque nous utilisons un pnpm workspace, installez les dépendances à partir de la racine du projet :\n\n```sh\npnpm install\n```\n\n> [!NOTE]\n> Cette étape n'est pas obligatoire. Vous pouvez créer un nouveau projet Vite et installer les dépendances à l'intérieur. Pnpm simplifie cela en installant les dépendances pour tous les espaces de travail à la racine. Une simple commande `pnpm install` installera les dépendances de tous les espaces de travail.\n\nMaintenant, nous pouvons utiliser cette bibliothèque `playground` dans un projet \"réel\" pour tester notre bibliothèque.\n\nPar exemple, ouvrez le fichier `src\u002FApp.vue` et importez le composant `User` :\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { User } from '..\u002F..\u002Fsrc'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUser \u002F>\n\u003C\u002Ftemplate>\n```\n\nEt exécutez le projet :\n\n```sh\ncd playground && pnpm dev\n```\n\nVous verrez le composant `User` s'afficher dans le navigateur. :tada: Si simple, mais si puissant. _J'utilise cette méthode pour presque toutes les bibliothèques que je construis, et cela fonctionne parfaitement._\n\n## Publication sur npm\n\nCette partie est simple une fois que vous avez compris le flux de travail.\n\nCommencez par nommer votre bibliothèque. J'utiliserai `@barbapapazes\u002Fvue-library` pour cet exemple.\n\nEnsuite, créez un compte sur [npm](https:\u002F\u002Fwww.npmjs.com) et connectez-vous en utilisant la commande `npm login`.\n\nPuis, installez [changelogen](https:\u002F\u002Fchangelogen.unjs.io) pour générer un changelog, mettre à jour le numéro de version selon la gestion sémantique des versions et les _conventional commits_, et pré-remplir la version sur GitHub.\n\n```sh\npnpm i -D changelogen\n```\n\nEnsuite, ajoutez deux scripts à votre `package.json` :\n\n```json\n{\n  \"scripts\": {\n    \"prepack\": \"unbuild\",\n    \"release\": \"changelogen --release && npm publish --access public && git push --follow-tags\"\n  }\n}\n```\n\nLe script `prepack` exécute la commande `unbuild` avant de publier le package sur npm. Le script `release` génère un changelog, publie le package sur npm, et pousse les tags sur GitHub.\n\n> [!NOTE]\n> Votre projet doit être sur GitHub pour que l'option `--release` fonctionne. Sinon, omettez-là et créez la version manuellement sur votre dépôt.\n\nMaintenant, publiez votre package sur npm en utilisant la commande suivante :\n\n```sh\nnpm run release\n```\n\nEt c'est tout ! Vous venez de publier votre première bibliothèque de composants Vue.js sur npm. :rocket:\n\n## Tout est prêt\n\nNous avons terminé pour aujourd'hui. Nous avons couvert de nombreux sujets :\n\n- Comment construire une bibliothèque de composants Vue.js avec TypeScript.\n- Comment gérer les fichiers Vue dans un projet TypeScript.\n- Comment utiliser unbuild pour transpiler les fichiers TypeScript sans regrouper les fichiers Vue.\n- Comment tirer parti de mkdist pour maintenir la structure du projet.\n- Comment utiliser un pnpm workspace pour tester la bibliothèque dans un projet local.\n- Comment publier la bibliothèque sur npm.\n\nPour un exemple plus détaillé et complexe, consultez GitHub : \u003CGitHubLink repo=\"barbapapazes\u002Fvue-library\" \u002F> mais tout ce qui a été expliqué ici provient de **mon expérience dans le monde réel**.\n\nJ'espère que vous avez apprécié ce tutoriel et qu'il vous aidera à construire votre propre bibliothèque de composants Vue.js. Si vous avez des questions, n'hésitez pas à me contacter sur [X (Twitter)](https:\u002F\u002Fx.com\u002Fsoubiran_).\n\n_Vous pouvez aller encore plus loin en utilisant Vite pour construire votre bibliothèque de composants :_\n\n\u003CCalloutReadMore id=\"1fafed86-05bb-4de4-b7d0-bb0bd6abc9d2\" \u002F>\n",null,{"title":5,"description":2156},{"loc":2159},"fr\u002Fposts\u002Fthe-simplest-method-to-create-a-vue-js-component-library","leiu4ugGnVZbNxLN54wTrqoPqm1ZAPeO0Ix356BJhgc",1790086904009]