https://a5h.dev/component---src-templates-blog-post-js-content-fil…pendencies-index-md-5d04cbc24636537b091c.js

1"use strict";(self.webpackChunkgatsby_starter_i18n_blog=self.webpackChunkgatsby_starter_i18n_blog||[]).push([[178],{8853:function(e,n,t){t.r(n),t.d(n,{SidbarBox:function(){return d},default:function(){return h}});var l=t(1151),a=t(7294);function r(e){const n=Object.assign({p:"p",code:"code",ul:"ul",li:"li",h2:"h2",a:"a",span:"span",pre:"pre",em:"em",strong:"strong"},(0,l.ah)(),e.components);return a.createElement(a.Fragment,null,a.createElement(n.p,null,"If you work with JS/TS then you are going to be very familiar with ",a.createElement(n.code,null,"dependencies"),"/",a.createElement(n.code,null,"devDependencies")," in your ",a.createElement(n.code,null,"package.json"),"."),"\n",a.createElement(n.p,null,"As a quick reminder:"),"\n",a.createElement(n.ul,null,"\n",a.createElement(n.li,null,'"dependencies" are packages which are required by your application in production to run.'),"\n",a.createElement(n.li,null,'"devDependencies" are other packages are only needed for local development (and testing)'),"\n"),"\n",a.createElement(n.p,null,"But there are more than just dep/devDeps... In this page I'm going to quickly go over the less commonly used ones. They're not super obscure (especially peer dependencies), so you probably know about them. But anyway... here we go..."),"\n",a.createElement(n.h2,{id:"peerdependencies",style:{position:"relative"}},a.createElement(n.a,{href:"#peerdependencies","aria-label":"peerdependencies permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"peerDependencies"),"\n",a.createElement(n.p,null,"Use ",a.createElement(n.code,null,"peepDependencies")," when there are certain packages that your module requires, but aren't installed directly by your module."),"\n",a.createElement(n.p,null,"Since npm v3, if they're not already installed (elsewhere in your app), it would give a warning message. ",a.createElement(n.a,{href:"https://github.blog/2021-02-02-npm-7-is-now-generally-available/",target:"_blank",rel:"nofollow"},"Since v7")," they're now automatically installed (in most cases)"),"\n",a.createElement(n.pre,null,a.createElement(n.code,{className:"language-json"},'{\n  "name": "some-framework-plugin",\n  "version": "2.3.4",\n  "peerDependencies": {\n    "some-framework": "2.x"\n  }\n}\n')),"\n",a.createElement(n.p,null,"This is useful if you have a plugin for a framework. Its going to assume the framework is installed, and you can add it as a peer dependency."),"\n",a.createElement(n.p,null,"The benefit of this is that anything in peerDependencies don't need to be bundled in your package, but you can still specify a specific dependency (and version) that your module requires."),"\n",a.createElement(n.p,null,"You can also use the ",a.createElement(n.code,null,"peerDepen

1denciesMeta")," option to mark some peer dependencies as optional."),"\n",a.createElement(n.h2,{id:"optionaldependencies",style:{position:"relative"}},a.createElement(n.a,{href:"#optionaldependencies","aria-label":"optionaldependencies permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"optionalDependencies"),"\n",a.createElement(n.p,null,"This is like the name implies - its an optional dependency. If your package ",a.createElement(n.em,null,"can")," use a dependency, but runs ok without it, then you can add it here."),"\n",a.createElement(n.p,null,"If an optional dependency fails to install (e.g. if its just for certain operating systems), then the installation of the package will still continue without an error."),"\n",a.createElement(n.p,null,"You can install packages in NPM ",a.createElement(n.em,null,"without")," any of the optional deps with ",a.createElement(n.code,null,"npm install --omit=optional")),"\n",a.createElement(n.h2,{id:"bundledependencies",style:{position:"relative"}},a.createElement(n.a,{href:"#bundledependencies","aria-label":"bundledependencies permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"bundleDependencies"),"\n",a.createElement(n.p,null,"You can use this to list which packages are bundled with your package when you publish it."),"\n",a.createElement(n.p,null,"A typical use case for ",a.createElement(n.code,null,"bundleDependencies")," is if you are publishing a package that includes a package not available on the npm registry."),"\n",a.createElement(n.p,null,"Then when a user installs your package, NPM does not need to go and download the packages included in the ",a.createElement(n.code,null,"bundleDependencies")," list. You can also include packages in ",a.createElement(n.code,null,"bundleDependencies")," that are only required for building (and its not needed in the published package)"),"\n",a.createElement(n.p,null,"You can also set the value of ",a.createElement(n.code,null,"bundleDependencies")," to true, to bundle ",a.createElement(n.strong,null,"all")," dependencies, or  false to bundle none."),"\n",a.createElement(n.p,null,"Note: You can type it as ",a.createElement(n.code,null,"bundledDependencies")," or ",a.createElement(n.code,null,"bundleDependencies")," and it will work the same (in NPM)"),"\n",a.createElement(n.h2,{id:"versioning",style:{position:"relative"}},a.createElement(n.a,{href:"#versioning","aria-label":"versioning permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"versioning"),"\n",a.createElement(n.ul,null,"\n",a.createElement(n.li,null,a.createElement(n.code,null,"version")," Must match version exactly"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,">version")," Must be greater than version"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,">=version")," etc"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"<version")),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"<=version")),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"~version")," see section below on tilde ranges"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"^version")," See section below on carets\n1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"http://...")," pass in a url (not versioned)"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"*")," Matches any version"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,'""')," (just an empty string) Same as *"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"version1 - version2")," Same as ",a.createElement(n.code,null,">=version1 <=version2"),"."),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"range1 || range2")," Passes if either range1 or range2 are satisfied."),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"git...")," pass in a link to a git repo (not versioned like others)"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"user/repo")," for github, similar to the git one above"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"tag")," A specific version tagged and published as tag See npm dist-tag"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"path/path/path")," local paths (not versioned)"),"\n"),"\n",a.createElement(n.h2,{id:"tidle-versions",style:{position:"relative"}}

1,a.createElement(n.a,{href:"#tidle-versions","aria-label":"tidle versions permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"tidle versions"),"\n",a.createElement(n.p,null,"These are versions such as ",a.createElement(n.code,null,"~1.2.3"),"."),"\n",a.createElement(n.p,null,"Allows patch-level changes, if a minor version is specified on the version.\nAllows minor-level changes if not."),"\n",a.createElement(n.ul,null,"\n",a.createElement(n.li,null,a.createElement(n.code,null,"~1.2.3")," will match between ",a.createElement(n.code,null,">=1.2.3")," and ",a.createElement(n.code,null,"<1.3.0-0")),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"~1.2")," will match between  ",a.createElement(n.code,null,">=1.2.0")," and ",a.createElement(n.code,null,"<1.3.0-0")," (the same as ",a.createElement(n.code,null,"1.2.x"),")"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"~1")," will match between ",a.createElement(n.code,null,">=1.0.0")," and ",a.createElement(n.code,null,"<2.0.0-0")," (the same as ",a.createElement(n.code,null,"1.x"),")"),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"~0.2.3")," will match between ",a.createElement(n.code,null,">=0.2.3")," and ",a.createElement(n.code,null,"<0.3.0-0")),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"~0.2")," will match between ",a.createElement(n.code,null,">=0.2.0")," and ",a.createElement(n.code,null,"<0.3.0-0")," (the same as ",a.createElement(n.code,null,"0.2.x"),")"),"\n"),"\n",a.createElement(n.h2,{id:"caret-versions",style:{position:"relative"}},a.createElement(n.a,{href:"#caret-versions","aria-label":"caret versions permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"caret versions"),"\n",a.createElement(n.p,null,"These are versions such as e.g. ",a.createElement(n.code,null,"^1.2.3")),"\n",a.createElement(n.p,null,"Allows patch and  minor updates for versions ",a.createElement(n.code,null,"1.0.0")," and above, patch updates for\nversions ",a.createElement(n.code,null,"0.X >=0.1.0"),", and ",a.createElement(n.em,null,"no")," updates for versions ",a.createElement(n.code,null,"0.0.X"),"."),"\n",a.createElement(n.p,null,"Caret ranges are ideal when an author may make breaking changes\nbetween ",a.createElement(n.code,null,"0.2.4")," and ",a.createElement(n.code,null,"0.3.0")," releases, which is a common practice.\nHowever, it presumes that there will ",a.createElement(n.em,null,"not")," be breaking changes between\n",a.createElement(n.code,null,"0.2.4")," and ",a.createElement(n.code,null,"0.2.5"),".  It allows for changes that are presumed to be\nadditive (but non-breaking), according to commonly observed practices."),"\n",a.createElement(n.p,null,"Examples:"),"\n",a.createElement(n.ul,null,"\n",a.createElement(n.li,null,a.createElement(n.code,null,"^1.2.3")," will match verions between ",a.createElement(n.code,null,">=1.2.3")," and ",a.createElement(n.code,null,"<2.0.0-0")),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"^0.2.3")," will match verions between ",a.createElement(n.code,null,">=0.2.3")," and ",a.createElement(n.code,null,"<0.3.0-0")),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"^0.0.3")," will match verions between ",a.createElement(n.code,null,">=0.0.3")," and ",a.createElement(n.code,null,"<0.0.4-0")),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"^1.x")," will match verions between ",a.createElement(n.code,null,">=1.0.0")," and ",a.createElement(n.code,null,"<2.0.0-0")),"\n",a.createElement(n.li,null,a.createElement(n.code,null,"^0.x")," will match verions between ",a.createElement(n.code,null,">=0.0.0")," and ",a.createElement(n.code,null,"<1.0.0-0")),"\n"))}var c=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,l.ah)(),e.components);return n?a.createElement(n,e,a.createElement(r,e)):r(e)},o=t(4593),i=t(7361),s=t.n(i),u=t(6123);function d(e){return a.createElement("div",{className:"rounded-lg mb-5 w-full hidden lg:block overflow-auto",style:{minHeight:"100px"}},a.createElement("h3",{className:"text-lg m-0 mb-1 p-0"},e.title),e.children)}const m=e=>{var n;const t=e.data.mdx,{tableOfContents:l}=t,r=function(e){const{0:n,1:t}=(0,a.useState)(""),l=(0,a.useRef)();return(0,a.useEffect)((()=>

1{if(l.current=new IntersectionObserver((e=>{e.filter((e=>null==e?void 0:e.isIntersecting)).reverse().forEach((e=>t(e.target.id)))}),{rootMargin:"0% 0% -65% 0px"}),e)return null==e||e.map((e=>document.querySelector(e.url))).filter(Boolean).forEach((e=>l.current.observe(e))),()=>{var e;return null===(e=l.current)||void 0===e?void 0:e.disconnect()}}),[]),n?"#"+n:""}(l.items),c=s()(e,"data.config.frontmatter.title"),i=t.excerpt,{previous:m,next:h}=e.pageContext,p=[];return m&&p.push(m),h&&p.push(h),a.createElement(u.Z,{location:e.location,config:e.data.config},a.createElement(o.Z,{htmlAttributes:{lang:e.pageContext.language},meta:[{name:"description",content:i}],title:t.frontmatter.title+" | "+c}),a.createElement("div",{className:"columns__container"},a.createElement("div",{className:"columns__left "},a.createElement("div",null,a.createElement("div",{className:"prose contentbox mx-auto"},a.createElement("h2",{className:"text-xl mainheader mb-0  "},t.frontmatter.title),a.createElement("p",{className:"text-gray-900 no-underline text-xs m-0 text-left font-bold text-slate-700"},"Last updated on ",t.frontmatter.date)),a.createElement("div",{className:"prose contentbox"},e.children))),a.createElement("div",{className:"columns__right "},a.createElement("div",{className:"columns__sidebar"},(null===(n=l.items)||void 0===n?void 0:n.length)>=3&&a.createElement(d,{title:"Quick navigation"},a.createElement("ul",{className:"text-sm"},l.items.map((e=>a.createElement("li",{key:e.url,className:""},a.createElement("a",{href:e.url,key:e.url,className:"border-l-2 pl-2 py-1 duration-100 ease-in-out transition-colors hover:text-blue-600 flex items-center hover:no-underline hover:bg-gray-50 hover:shadow font-normal bg-white "+(r===e.url?"text-blue-700 border-blue-700 ":"text-slate-700")},e.title)))))),a.createElement("div",{id:"portal-dest"})))))};function h(e){return a.createElement(m,e,a.createElement(c,e))}}}]);
2//# sourceMappingURL=component---src-templates-blog-post-js-content-file-path-opt-build-repo-pages-npm-dependencies-index-md-5d04cbc24636537b091c.js.map