{"id":45,"date":"2016-10-18T03:58:18","date_gmt":"2016-10-18T03:58:18","guid":{"rendered":"http:\/\/iamakulov.com\/notes2\/?p=45"},"modified":"2017-06-24T19:15:31","modified_gmt":"2017-06-24T16:15:31","slug":"npm-4-prepublish","status":"publish","type":"post","link":"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/","title":{"rendered":"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d"},"content":{"rendered":"<p><em>Updated 24 Jun 2017: reflected changes in plans about npm v5..v6.<\/em><\/p>\n<p><a href=\"https:\/\/github.com\/npm\/npm\/releases\/tag\/v3.10.9\">On October 20<\/a>, npm is releasing v4.0.0. This release, apart from <a href=\"https:\/\/github.com\/npm\/npm\/milestone\/57\">the other breaking changes<\/a>, also includes one affecting a lot of packages: the <em>prepublish<\/em> npm script will be split into <em>prepublishOnly<\/em> and <em>prepare<\/em>.<\/p>\n<div class=\"bordered-highlight bordered-highlight_large\">\n&#x1f4c5; &#x1f4a5;\n<\/div>\n<h1 id=\"why\">Why<a href=\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/#why\" class=\"heading-link\" aria-label=\"Link to this section\" title=\"Link to this section\">#<\/a><\/h1>\n<p><a href=\"https:\/\/github.com\/npm\/npm\/commit\/351304d28c2afcfae93de05b4c6bcf035054de3e\">In v1.1.71<\/a>, npm made the <em>prepublish<\/em> script also execute when you run <em>npm install<\/em> without arguments. Before this, npm ran the script only before you publish a package.<\/p>\n<p>The reasoning behind this isn\u2019t clear, but as far as I\u2019ve got it\u2019s the following. You usually run <em>npm install<\/em> without arguments when you clone a package, go into its directory and try installing its dependencies. If you\u2019re doing this, you\u2019re most likely a developer, and you\u2019re going to do something with this package; therefore it\u2019ll be useful to prepare the package for using. Since the <em>prepublish<\/em> script often includes commands that build the package for publishing (= prepare it for using), npm decided to execute it in such case to do this job.<\/p>\n<p>However, this <em>prepublish<\/em> behavior <a href=\"https:\/\/github.com\/npm\/npm\/issues\/10074\">became disliked:<\/a><\/p>\n<ul>\n<li><strong>It\u2019s weird.<\/strong> <em>prepublish<\/em> is <em>pre<\/em> + <em>publish<\/em>, and <a href=\"https:\/\/github.com\/npm\/npm\/issues\/3059\">a lot of people<\/a> didn\u2019t assume it\u2019s also being run when installing dependencies. I even thought it\u2019s a bug in npm when I first discovered the way it works.<\/p>\n<\/li>\n<li>\n<p><strong>It creates problems.<\/strong> Many projects I\u2019ve seen put building and testing commands into the <em>prepublish<\/em> script. Even npm <a href=\"https:\/\/docs.npmjs.com\/misc\/scripts#common-uses\">recommends doing this<\/a>. It\u2019s convenient: it prepares the package for publishing and prevents an occasional release of broken code.<br \/>\nHowever, if you use a CI environment like Travis or Appveyor which installs a new version of the package on each build, things become worse. Your <em>build<\/em> and <em>test<\/em> tasks get executed twice, once on <em>npm install<\/em> and once on the actual <em>npm test<\/em>. And this creates you problems such as increased build time <a href=\"https:\/\/github.com\/ilyabirman\/Likely\/pull\/98\/commits\/bd5d16ccf696a5613fe4afd061f201faa306934f\">or wrong build status<\/a>.<\/p>\n<\/li>\n<\/ul>\n<div class=\"bordered-highlight\">\nCurrent behavior is disliked\n<\/div>\n<h1 id=\"whats-next\">What\u2019s next<a href=\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/#whats-next\" class=\"heading-link\" aria-label=\"Link to this section\" title=\"Link to this section\">#<\/a><\/h1>\n<p>npm 4 is splitting the <em>prepublish<\/em> script into two new: <em>prepare<\/em> and <em>prepublishOnly<\/em>.<\/p>\n<ul>\n<li><em>prepare<\/em> will have the same behavior that <em>prepublish<\/em> has now. Commands in this script will run both before publishing and on <em>npm install<\/em>.<\/p>\n<\/li>\n<li>\n<p><em>prepublishOnly<\/em>, as seen from its name, will run only before publishing the package.<\/p>\n<\/li>\n<li>\n<p>Also, <em>prepublish<\/em> will receive a warning about the changes.<\/p>\n<\/li>\n<\/ul>\n<p>npm realizes that <em>prepublishOnly<\/em> is an ugly name for a script, Therefore, there\u2019re also some other changes planned for the later releases.<\/p>\n<ul style=\"text-decoration: line-through;\">\n<li>npm 5 will un-deprecate previously deprecated <em>prepublish<\/em>, make it run only before publishing, and will deprecate <em>prepublishOnly<\/em>. In this release, <em>prepublish<\/em> will get back its expected behavior.<\/p>\n<\/li>\n<li>\n<p>npm 6 or later will remove <em>prepublishOnly<\/em> completely. After this, two scripts will remain: <em>prepublish<\/em> which will be run only before publishing, and <em>prepare<\/em> which will be executed both on before publishing and on <em>npm install<\/em>.<\/p>\n<\/li>\n<\/ul>\n<p><b>Update 24 Jun 2017:<\/b> the plan above was true at the moment of publishing, but seems like npm doesn\u2019t follow it now. See <a href=\"https:\/\/twitter.com\/maybekatz\/status\/859990874079379456\">a twitter thread with @maybekatz<\/a> for more details.<\/p>\n<div class=\"bordered-highlight\">\nThere will be changes in npm 4&#8230;6\n<\/div>\n<h1 id=\"what-to-do-when-npm-4-is-out\">What to do when npm 4 is out<a href=\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/#what-to-do-when-npm-4-is-out\" class=\"heading-link\" aria-label=\"Link to this section\" title=\"Link to this section\">#<\/a><\/h1>\n<p>Decide based on what your package needs.<\/p>\n<ul>\n<li>If your package\u2019s <em>prepublish<\/em> script contains commands that should <em>only<\/em> be run before <em>npm publish<\/em>, rename the script into <em>prepublishOnly<\/em>. Examples of such commands are <em>npm test<\/em> and <em>eslint<\/em>.<\/li>\n<li>If your package\u2019s <em>prepublish<\/em> script contains commands that should run <em>both<\/em> before <em>npm publish<\/em> and on <em>npm install<\/em>, rename the script to <em>prepare<\/em>. Examples of such commands are commands that build your package (e. g. <em>webpack<\/em> or <em>babel<\/em>).<\/li>\n<li>If you don\u2019t know, rename the script to <em>prepublishOnly<\/em> &#8211; this is the behavior most people expect. (As another option, you can leave everything as-is, but there\u2019s no point: it will just delay the decision, but not remove it.)<\/li>\n<\/ul>\n<p><small style=\"display: block; line-height: 1.5; margin-top: 24px;\">P.S. If you like this, follow me on Twitter. I tweet selected articles and my own thoughts: <a href=\"https:\/\/twitter.com\/iamakulov\">https:\/\/twitter.com\/iamakulov<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Updated 24 Jun 2017: reflected changes in plans about npm v5..v6. On October 20, npm is releasing v4.0.0. This release, apart from the other breaking changes, also includes one affecting a lot of packages: the prepublish npm script will be split into prepublishOnly and prepare. &#x1f4c5; &#x1f4a5; Why# In v1.1.71, npm made the prepublish script &hellip; <a href=\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[9],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d - Ivan Akulov\u2019s blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d - Ivan Akulov\u2019s blog\" \/>\n<meta property=\"og:description\" content=\"Updated 24 Jun 2017: reflected changes in plans about npm v5..v6. On October 20, npm is releasing v4.0.0. This release, apart from the other breaking changes, also includes one affecting a lot of packages: the prepublish npm script will be split into prepublishOnly and prepare. &#x1f4c5; &#x1f4a5; Why# In v1.1.71, npm made the prepublish script &hellip; Continue reading &quot;npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/\" \/>\n<meta property=\"og:site_name\" content=\"Ivan Akulov\u2019s blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/iamakulov.page\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-18T03:58:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-24T16:15:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/iamakulov.com\/notes2\/wp-content\/uploads\/2016\/10\/ApplicationFrameHost_2016-10-18_04-13-421.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"625\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ivan Akulov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@iamakulov\" \/>\n<meta name=\"twitter:site\" content=\"@iamakulov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ivan Akulov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/\",\"url\":\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/\",\"name\":\"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d - Ivan Akulov\u2019s blog\",\"isPartOf\":{\"@id\":\"https:\/\/iamakulov.com\/notes\/#website\"},\"datePublished\":\"2016-10-18T03:58:18+00:00\",\"dateModified\":\"2017-06-24T16:15:31+00:00\",\"author\":{\"@id\":\"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81\"},\"breadcrumb\":{\"@id\":\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/iamakulov.com\/notes\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/iamakulov.com\/notes\/#website\",\"url\":\"https:\/\/iamakulov.com\/notes\/\",\"name\":\"Ivan Akulov\u2019s blog\",\"description\":\"Ivan Akulov writes about his front-end experience, React, webpack, and performance optimizations.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/iamakulov.com\/notes\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81\",\"name\":\"Ivan Akulov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f68e4cd477cef1577c339e6f09736d3a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f68e4cd477cef1577c339e6f09736d3a?s=96&d=mm&r=g\",\"caption\":\"Ivan Akulov\"},\"description\":\"I'm a software engineer specializing in web performance, JavaScript, and React. I\u2019m also a Google Developer Expert. I work at Framer.\",\"sameAs\":[\"http:\/\/iamakulov.com\",\"https:\/\/x.com\/iamakulov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d - Ivan Akulov\u2019s blog","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:\/\/iamakulov.com\/notes\/npm-4-prepublish\/","og_locale":"en_US","og_type":"article","og_title":"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d - Ivan Akulov\u2019s blog","og_description":"Updated 24 Jun 2017: reflected changes in plans about npm v5..v6. On October 20, npm is releasing v4.0.0. This release, apart from the other breaking changes, also includes one affecting a lot of packages: the prepublish npm script will be split into prepublishOnly and prepare. &#x1f4c5; &#x1f4a5; Why# In v1.1.71, npm made the prepublish script &hellip; Continue reading \"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d\"","og_url":"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/","og_site_name":"Ivan Akulov\u2019s blog","article_publisher":"http:\/\/facebook.com\/iamakulov.page","article_published_time":"2016-10-18T03:58:18+00:00","article_modified_time":"2017-06-24T16:15:31+00:00","og_image":[{"width":1250,"height":625,"url":"https:\/\/iamakulov.com\/notes2\/wp-content\/uploads\/2016\/10\/ApplicationFrameHost_2016-10-18_04-13-421.png","type":"image\/png"}],"author":"Ivan Akulov","twitter_card":"summary_large_image","twitter_creator":"@iamakulov","twitter_site":"@iamakulov","twitter_misc":{"Written by":"Ivan Akulov","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/","url":"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/","name":"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d - Ivan Akulov\u2019s blog","isPartOf":{"@id":"https:\/\/iamakulov.com\/notes\/#website"},"datePublished":"2016-10-18T03:58:18+00:00","dateModified":"2017-06-24T16:15:31+00:00","author":{"@id":"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81"},"breadcrumb":{"@id":"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/iamakulov.com\/notes\/npm-4-prepublish\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/iamakulov.com\/notes\/"},{"@type":"ListItem","position":2,"name":"npm 4 is splitting the \u201cprepublish\u201d script into \u201cprepublishOnly\u201d and \u201cprepare\u201d"}]},{"@type":"WebSite","@id":"https:\/\/iamakulov.com\/notes\/#website","url":"https:\/\/iamakulov.com\/notes\/","name":"Ivan Akulov\u2019s blog","description":"Ivan Akulov writes about his front-end experience, React, webpack, and performance optimizations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/iamakulov.com\/notes\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81","name":"Ivan Akulov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f68e4cd477cef1577c339e6f09736d3a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f68e4cd477cef1577c339e6f09736d3a?s=96&d=mm&r=g","caption":"Ivan Akulov"},"description":"I'm a software engineer specializing in web performance, JavaScript, and React. I\u2019m also a Google Developer Expert. I work at Framer.","sameAs":["http:\/\/iamakulov.com","https:\/\/x.com\/iamakulov"]}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/posts\/45"}],"collection":[{"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":6,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":371,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/posts\/45\/revisions\/371"}],"wp:attachment":[{"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}