From 853642676e3336d6e86c537c35c7d82912f86c96 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 28 Jun 2017 14:04:26 +0100 Subject: [PATCH] Put react-scripts in dependencies, not devDependencies (#2657) * Put react-scripts in dependencies, not devDependencies * Sort dependencies on eject * Remove CI check --- packages/create-react-app/createReactApp.js | 21 +++++--------------- packages/react-scripts/scripts/eject.js | 22 +++++++++++++++------ packages/react-scripts/scripts/init.js | 1 - tasks/e2e-installs.sh | 9 --------- 4 files changed, 21 insertions(+), 32 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 93bb9ab6e..74b121689 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -276,11 +276,7 @@ function run( }) .then(packageName => { checkNodeVersion(packageName); - - // Since react-scripts has been installed with --save - // we need to move it into devDependencies and rewrite package.json - // also ensure react dependencies have caret version range - fixDependencies(packageName); + setCaretRangeForRuntimeDeps(packageName); const scriptsPath = path.resolve( process.cwd(), @@ -497,16 +493,14 @@ function checkAppName(appName) { } // TODO: there should be a single place that holds the dependencies - const dependencies = ['react', 'react-dom']; - const devDependencies = ['react-scripts']; - const allDependencies = dependencies.concat(devDependencies).sort(); - if (allDependencies.indexOf(appName) >= 0) { + const dependencies = ['react', 'react-dom', 'react-scripts'].sort(); + if (dependencies.indexOf(appName) >= 0) { console.error( chalk.red( `We cannot create a project called ${chalk.green(appName)} because a dependency with the same name exists.\n` + `Due to the way npm works, the following names are not allowed:\n\n` ) + - chalk.cyan(allDependencies.map(depName => ` ${depName}`).join('\n')) + + chalk.cyan(dependencies.map(depName => ` ${depName}`).join('\n')) + chalk.red('\n\nPlease choose a different project name.') ); process.exit(1); @@ -533,7 +527,7 @@ function makeCaretRange(dependencies, name) { dependencies[name] = patchedVersion; } -function fixDependencies(packageName) { +function setCaretRangeForRuntimeDeps(packageName) { const packagePath = path.join(process.cwd(), 'package.json'); const packageJson = require(packagePath); @@ -543,16 +537,11 @@ function fixDependencies(packageName) { } const packageVersion = packageJson.dependencies[packageName]; - if (typeof packageVersion === 'undefined') { console.error(chalk.red(`Unable to find ${packageName} in package.json`)); process.exit(1); } - packageJson.devDependencies = packageJson.devDependencies || {}; - packageJson.devDependencies[packageName] = packageVersion; - delete packageJson.dependencies[packageName]; - makeCaretRange(packageJson.dependencies, 'react'); makeCaretRange(packageJson.dependencies, 'react-dom'); diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 7d9409d0f..265511860 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -146,24 +146,34 @@ inquirer console.log(cyan('Updating the dependencies')); const ownPackageName = ownPackage.name; - if (appPackage.devDependencies[ownPackageName]) { - console.log(` Removing ${cyan(ownPackageName)} from devDependencies`); - delete appPackage.devDependencies[ownPackageName]; + if (appPackage.devDependencies) { + // We used to put react-scripts in devDependencies + if (appPackage.devDependencies[ownPackageName]) { + console.log(` Removing ${cyan(ownPackageName)} from devDependencies`); + delete appPackage.devDependencies[ownPackageName]; + } } + appPackage.dependencies = appPackage.dependencies || {}; if (appPackage.dependencies[ownPackageName]) { console.log(` Removing ${cyan(ownPackageName)} from dependencies`); delete appPackage.dependencies[ownPackageName]; } - Object.keys(ownPackage.dependencies).forEach(key => { // For some reason optionalDependencies end up in dependencies after install if (ownPackage.optionalDependencies[key]) { return; } - console.log(` Adding ${cyan(key)} to devDependencies`); - appPackage.devDependencies[key] = ownPackage.dependencies[key]; + console.log(` Adding ${cyan(key)} to dependencies`); + appPackage.dependencies[key] = ownPackage.dependencies[key]; + }); + // Sort the deps + const unsortedDependencies = appPackage.dependencies; + appPackage.dependencies = {}; + Object.keys(unsortedDependencies).sort().forEach(key => { + appPackage.dependencies[key] = unsortedDependencies[key]; }); console.log(); + console.log(cyan('Updating the scripts')); delete appPackage.scripts['eject']; Object.keys(appPackage.scripts).forEach(key => { diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index de8ab085e..64efdf529 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -39,7 +39,6 @@ module.exports = function( // Copy over some of the devDependencies appPackage.dependencies = appPackage.dependencies || {}; - appPackage.devDependencies = appPackage.devDependencies || {}; // Setup the script rules appPackage.scripts = { diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 8f4789ff0..7ea70fac6 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -55,15 +55,6 @@ function checkDependencies { echo "There are extraneous dependencies in package.json" exit 1 fi - - - if ! awk '/"devDependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \ - grep -v -q -E '^\s*"react(-dom|-scripts)?"'; then - echo "Dev Dependencies are correct" - else - echo "There are extraneous devDependencies in package.json" - exit 1 - fi } function create_react_app {