{"id":28628,"date":"2016-12-05T20:01:14","date_gmt":"2016-12-05T12:01:14","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28628"},"modified":"2023-04-06T19:03:58","modified_gmt":"2023-04-06T11:03:58","slug":"yarn-package","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/","title":{"rendered":"Introducing Yarn: Facebook&#8217;s Latest JS Package Manager"},"content":{"rendered":"<p>Most frontend developers already know about <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/\" rel=\"noopener nofollow\">npm<\/a> which is the Node-powered package manager for JavaScript libraries, frameworks and plugins. This is the most widely used package manager by web developers, but Facebook has come up with a brand  new <strong>package manager<\/strong> named <a target=\"_blank\" href=\"https:\/\/yarnpkg.com\/\" rel=\"noopener\">Yarn<\/a> which is quickly becoming <strong>npm\u2019s hot rival<\/strong>.<\/p>\n<p>With Yarn you can still <strong>pull items from the npm repository<\/strong>, but you can also pull from other repos and <strong>manage your own custom dependencies installed across many different machines<\/strong>.<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/yarnpkg.com\/\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/yarn-package\/01-yarn-package-manager-homepage.jpg\" alt=\"yarn homepage\"><\/a><\/figure>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/\">11 Dependency Management Tools for Web Developers<\/a>\n\t\t\t\t<\/p>\n<p>The biggest benefit of Yarn is consistency for <strong>different versions of scripts<\/strong> and <strong>management for different machines<\/strong>.<\/p>\n<p>Users who rely on npm may have the latest version of jQuery on their laptop, but might switch over to their desktop and be running a slightly outdated version. This can typically be managed with an <a target=\"_blank\" href=\"https:\/\/docs.npmjs.com\/cli\/update\" rel=\"noopener\">update call<\/a> but Yarn might be easier.<\/p>\n<p>Ultimately developers use package managers to <strong>install resources called packages from a universal repository<\/strong>. These packages can be libraries, frameworks, or any type of pre-packaged code.<\/p>\n<p>When it comes to auto-updating packages, Yarn aims to make this process broader, easier and much more secure. These ideas are still coming out of Facebook\u2019s dev team but Yarn already offers some incredible benefits:<\/p>\n<ul>\n<li>Access to npm, bower, and other custom repos<\/li>\n<li>Dependencies can be installed across multiple machines<\/li>\n<li>Optimum performance based on download speeds<\/li>\n<li>Package caching, so you can download again without Internet<\/li>\n<\/ul>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/bower-package-manager\/\">How to Install, Update & Remove Web Libraries with Bower<\/a>\n\t\t\t\t<\/p>\n<p>On the Yarn <a target=\"_blank\" href=\"https:\/\/github.com\/yarnpkg\/yarn\" rel=\"noopener\">GitHub page<\/a> you\u2019ll find installation instructions for local websites or live production sites.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/yarn-package\/02-yarn-logo-package-manager.jpg\" alt=\"yarn package manager logo\"><\/figure>\n<p>If you\u2019re brand new to Yarn and want to go for a test run, do check out the <a target=\"_blank\" href=\"https:\/\/yarnpkg.com\/en\/docs\/usage\" rel=\"noopener\">usage guide<\/a> on the official website. This is one of the simplest package managers to jump into, and if you already have some experience using npm then you\u2019ll feel right at home with Yarn.<\/p>\n<p>And since this is still a fairly new project, I expect a lot of updates from Facebook in the coming months.<\/p>","protected":false},"excerpt":{"rendered":"<p>Most frontend developers already know about npm which is the Node-powered package manager for JavaScript libraries, frameworks and plugins. This is the most widely used package manager by web developers, but Facebook has come up with a brand new package manager named Yarn which is quickly becoming npm\u2019s hot rival. With Yarn you can still&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[158,3497,4117,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Introducing Yarn: Facebook&#039;s Latest JS Package Manager - Hongkiat<\/title>\n<meta name=\"description\" content=\"Most frontend developers already know about npm which is the Node-powered package manager for JavaScript libraries, frameworks and plugins. This is the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/yarn-package\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Yarn: Facebook&#039;s Latest JS Package Manager\" \/>\n<meta property=\"og:description\" content=\"Most frontend developers already know about npm which is the Node-powered package manager for JavaScript libraries, frameworks and plugins. This is the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/yarn-package\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-05T12:01:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:03:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/yarn-package\/01-yarn-package-manager-homepage.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Introducing Yarn: Facebook&#8217;s Latest JS Package Manager\",\"datePublished\":\"2016-12-05T12:01:14+00:00\",\"dateModified\":\"2023-04-06T11:03:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/\"},\"wordCount\":339,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/yarn-package\\\/01-yarn-package-manager-homepage.jpg\",\"keywords\":[\"Facebook\",\"Javascript Library\",\"Javascripts\",\"Web Developers\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/\",\"name\":\"Introducing Yarn: Facebook's Latest JS Package Manager - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/yarn-package\\\/01-yarn-package-manager-homepage.jpg\",\"datePublished\":\"2016-12-05T12:01:14+00:00\",\"dateModified\":\"2023-04-06T11:03:58+00:00\",\"description\":\"Most frontend developers already know about npm which is the Node-powered package manager for JavaScript libraries, frameworks and plugins. This is the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/yarn-package\\\/01-yarn-package-manager-homepage.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/yarn-package\\\/01-yarn-package-manager-homepage.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yarn-package\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing Yarn: Facebook&#8217;s Latest JS Package Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducing Yarn: Facebook's Latest JS Package Manager - Hongkiat","description":"Most frontend developers already know about npm which is the Node-powered package manager for JavaScript libraries, frameworks and plugins. This is the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Yarn: Facebook's Latest JS Package Manager","og_description":"Most frontend developers already know about npm which is the Node-powered package manager for JavaScript libraries, frameworks and plugins. This is the","og_url":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-12-05T12:01:14+00:00","article_modified_time":"2023-04-06T11:03:58+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/yarn-package\/01-yarn-package-manager-homepage.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Introducing Yarn: Facebook&#8217;s Latest JS Package Manager","datePublished":"2016-12-05T12:01:14+00:00","dateModified":"2023-04-06T11:03:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/"},"wordCount":339,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/yarn-package\/01-yarn-package-manager-homepage.jpg","keywords":["Facebook","Javascript Library","Javascripts","Web Developers"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/yarn-package\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/","url":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/","name":"Introducing Yarn: Facebook's Latest JS Package Manager - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/yarn-package\/01-yarn-package-manager-homepage.jpg","datePublished":"2016-12-05T12:01:14+00:00","dateModified":"2023-04-06T11:03:58+00:00","description":"Most frontend developers already know about npm which is the Node-powered package manager for JavaScript libraries, frameworks and plugins. This is the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/yarn-package\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/yarn-package\/01-yarn-package-manager-homepage.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/yarn-package\/01-yarn-package-manager-homepage.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/yarn-package\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing Yarn: Facebook&#8217;s Latest JS Package Manager"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7rK","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28628"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28628\/revisions"}],"predecessor-version":[{"id":65642,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28628\/revisions\/65642"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28628"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}