Caches the Yarn resolution for faster installs (#5270)

* Caches the Yarn resolution for faster installs

* Adds the yarn.lock.cached file to the publish list

* Removes the copied lockfile when the install fails

* Updates the release checklist

CONTRIBUTING.md

@@ -42,10 +42,12 @@ Please **ask first** if somebody else is already working on this or the core dev
 Please also provide a **test plan**, i.e. specify how you verified that your addition works.
 
 ## Folder Structure of Create React App
+
 `create-react-app` is a monorepo, meaning it is divided into independent sub-packages.<br>
 These packages can be found in the [`packages/`](https://github.com/facebook/create-react-app/tree/master/packages) directory.
 
 ### Overview of directory structure
+
 ```
 packages/
   babel-preset-react-app/
@@ -54,20 +56,31 @@ packages/
   react-dev-utils/
   react-scripts/
 ```
+
 ### Package Descriptions
+
 #### [babel-preset-react-app](https://github.com/facebook/create-react-app/tree/master/packages/babel-preset-react-app)
+
 This package is a babel preset intended to be used with `react-scripts`.<br>
 It targets platforms that React is designed to support (IE 11+) and enables experimental features used heavily at Facebook.<br>
 This package is enabled by default for all `create-react-app` scaffolded applications.
+
 #### [create-react-app](https://github.com/facebook/create-react-app/tree/master/packages/create-react-app)
+
 The global CLI command code can be found in this directory, and shouldn't often be changed. It should run on Node 0.10+.
+
 #### [eslint-config-react-app](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app)
+
 This package contains a conservative set of rules focused on making errors apparent and enforces no style rules.<br>
 This package is enabled by default for all `create-react-app` scaffolded applications.
+
 #### [react-dev-utils](https://github.com/facebook/create-react-app/tree/master/packages/react-dev-utils)
+
 This package contains utilities used for `react-scripts` and sister packages.<br>
 Its main purpose is to conceal code which the user shouldn't be burdened with upon ejecting.
+
 #### [react-scripts](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts)
+
 This package is the heart of the project, which contains the scripts for setting up the development server, building production builds, configuring all software used, etc.<br>
 All functionality must be retained (and configuration given to the user) if they choose to eject.
 
@@ -96,13 +109,14 @@ More detailed information are in the dedicated [README](/packages/react-scripts/
 
 ## Tips for contributors using Windows
 
-The scripts in tasks folder and other scripts in `package.json` will not work in Windows out of the box. However, using [Bash on  windows](https://msdn.microsoft.com/en-us/commandline/wsl/about) makes it easier to use those scripts without any workarounds. The steps to do so are detailed below:
+The scripts in tasks folder and other scripts in `package.json` will not work in Windows out of the box. However, using [Bash on windows](https://msdn.microsoft.com/en-us/commandline/wsl/about) makes it easier to use those scripts without any workarounds. The steps to do so are detailed below:
 
 ### Install Bash on Ubuntu on Windows
 
 A good step by step guide can be found [here](https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/)
 
 ### Install Node.js and yarn
+
 Even if you have node and yarn installed on your windows, it would not be accessible from the bash shell. You would have to install it again. Installing via [`nvm`](https://github.com/creationix/nvm#install-script) is recommended.
 
 ### Line endings
@@ -115,18 +129,21 @@ By default git would use `CRLF` line endings which would cause the scripts to fa
 2. Close the milestone.
 3. In most releases, only `react-scripts` needs to be released. If you don’t have any changes to the `packages/create-react-app` folder, you don’t need to bump its version or publish it (the publish script will publish only changed packages).
 4. Note that files in `packages/create-react-app` should be modified with extreme caution. Since it’s a global CLI, any version of `create-react-app` (global CLI) including very old ones should work with the latest version of `react-scripts`.
-5. Create a change log entry for the release:
-  * You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
-  * Run `yarn changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`.
-  * Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code.
-  * Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped.
-6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them.
-7. Run `npm run publish`. (It has to be `npm run publish` exactly, not just `npm publish` or `yarn publish`.)
-8. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages.
-9. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration.
+5. Run `yarn compile:lockfile`. The command will generate an updated lockfile in `packages/create-react-app` that should be committed.
+6. Create a change log entry for the release:
+
+- You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
+- Run `yarn changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`.
+- Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code.
+- Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped.
+
+7. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them.
+8. Run `npm run publish`. (It has to be `npm run publish` exactly, not just `npm publish` or `yarn publish`.)
+9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages.
+10. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration.
 
 Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --tag next` instead of `npm run publish`.
 
-------------
+---
 
-*Many thanks to [h5bp](https://github.com/h5bp/html5-boilerplate/blob/master/.github/CONTRIBUTING.md) for the inspiration with this contributing guide*
+_Many thanks to [h5bp](https://github.com/h5bp/html5-boilerplate/blob/master/.github/CONTRIBUTING.md) for the inspiration with this contributing guide_

package.json

@@ -15,7 +15,8 @@
     "screencast": "node ./tasks/screencast.js",
     "screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
     "test": "cd packages/react-scripts && node bin/react-scripts.js test",
-    "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'"
+    "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
+    "compile:lockfile": "node tasks/compile-lockfile.js"
   },
   "devDependencies": {
     "async-sema": "^2.1.3",

packages/create-react-app/createReactApp.js

@@ -258,6 +258,13 @@ function createApp(name, verbose, version, useNpm, usePnp, template) {
     }
   }
 
+  if (useYarn) {
+    fs.copySync(
+      require.resolve('./yarn.lock.cached'),
+      path.join(root, 'yarn.lock')
+    );
+  }
+
   run(
     root,
     appName,
@@ -422,7 +429,7 @@ function run(
       console.log();
 
       // On 'exit' we will delete these files from target directory.
-      const knownGeneratedFiles = ['package.json', 'node_modules'];
+      const knownGeneratedFiles = ['package.json', 'yarn.lock', 'node_modules'];
       const currentFiles = fs.readdirSync(path.join(root));
       currentFiles.forEach(file => {
         knownGeneratedFiles.forEach(fileToMatch => {

packages/create-react-app/package.json

@@ -15,7 +15,8 @@
   },
   "files": [
     "index.js",
-    "createReactApp.js"
+    "createReactApp.js",
+    "yarn.lock.cached"
   ],
   "bin": {
     "create-react-app": "./index.js"

tasks/compile-lockfile.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const cprocess = require('child_process');
+const fse = require('fs-extra');
+const os = require('os');
+const path = require('path');
+
+const temp = path.join(os.tmpdir(), `cra-compile-lockfile`);
+
+try {
+  // Ensures that we start from a clean state
+  fse.removeSync(temp);
+  fse.mkdirSync(temp);
+
+  // Create an empty package.json that we'll populate
+  fse.writeFileSync(path.join(temp, 'package.json'), '{}');
+
+  // Extract the dependencies from react-scripts (which is a workspace)
+  const dependencies = require('react-scripts/package.json').dependencies;
+  const descriptors = Object.keys(dependencies).map(
+    dep => `${dep}@${dependencies[dep]}`
+  );
+
+  // Run "yarn add" with all the dependencies of react-scripts
+  cprocess.execFileSync('yarn', ['add', ...descriptors], { cwd: temp });
+
+  // Store the generated lockfile in create-react-app
+  // We can't store it inside react-scripts, because we need it even before react-scripts is installed
+  fse.copySync(
+    path.join(temp, 'yarn.lock'),
+    path.join(
+      __dirname,
+      '..',
+      'packages',
+      'create-react-app',
+      'yarn.lock.cached'
+    )
+  );
+} finally {
+  fse.removeSync(temp);
+}

tasks/publish.sh

@@ -36,4 +36,4 @@ cd packages/react-error-overlay/
 npm run build:prod
 cd ../..
 # Go!
-./node_modules/.bin/lerna publish --independent "$@"
+./node_modules/.bin/lerna publish --independent "$@"