Unroll indirection in paths (#191)

Author: gaearon

config/paths.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+// TODO: we can split this file into several files (pre-eject, post-eject, test)
+// and use those instead. This way we don't need to branch here.
+
+var path = require('path');
+
+// True when used as a dependency, false after ejecting
+var isInNodeModules = (
+  'node_modules' ===
+  path.basename(path.resolve(path.join(__dirname, '..', '..')))
+);
+
+// Are we developing create-react-app locally?
+var isInCreateReactAppSource = (
+  process.argv.some(arg => arg.indexOf('--debug-template') > -1)
+);
+
+function resolve(relativePath) {
+  return path.resolve(__dirname, relativePath);
+}
+
+if (isInCreateReactAppSource) {
+  // create-react-app development: we're in ./config/
+  module.exports = {
+    appBuild: resolve('../build'),
+    appHtml: resolve('../template/index.html'),
+    appFavicon: resolve('../template/favicon.ico'),
+    appPackageJson: resolve('../package.json'),
+    appSrc: resolve('../template/src'),
+    appNodeModules: resolve('../node_modules'),
+    ownNodeModules: resolve('../node_modules')
+  };
+} else if (isInNodeModules) {
+  // before eject: we're in ./node_modules/react-scripts/config/
+  module.exports = {
+    appBuild: resolve('../../../build'),
+    appHtml: resolve('../../../index.html'),
+    appFavicon: resolve('../../../favicon.ico'),
+    appPackageJson: resolve('../../../package.json'),
+    appSrc: resolve('../../../src'),
+    appNodeModules: resolve('../..'),
+    // this is empty with npm3 but node resolution searches higher anyway:
+    ownNodeModules: resolve('../node_modules')
+  };
+} else {
+  // after eject: we're in ./config/
+  module.exports = {
+    appBuild: resolve('../build'),
+    appHtml: resolve('../index.html'),
+    appFavicon: resolve('../favicon.ico'),
+    appPackageJson: resolve('../package.json'),
+    appSrc: resolve('../src'),
+    appNodeModules: resolve('../node_modules'),
+    ownNodeModules: resolve('../node_modules')
+  };
+}

config/webpack.config.dev.js

@@ -11,35 +11,18 @@ var path = require('path');
 var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
-
-// TODO: hide this behind a flag and eliminate dead code on eject.
-// This shouldn't be exposed to the user.
-var isInNodeModules = 'node_modules' ===
-  path.basename(path.resolve(path.join(__dirname, '..', '..')));
-var relativePath = isInNodeModules ? '../../..' : '..';
-var isInDebugMode = process.argv.some(arg =>
-  arg.indexOf('--debug-template') > -1
-);
-if (isInDebugMode) {
-  relativePath = '../template';
-}
-var srcPath = path.resolve(__dirname, relativePath, 'src');
-var rootNodeModulesPath = path.resolve(__dirname, relativePath, 'node_modules');
-var nodeModulesPath = path.join(__dirname, '..', 'node_modules');
-var indexHtmlPath = path.resolve(__dirname, relativePath, 'index.html');
-var faviconPath = path.resolve(__dirname, relativePath, 'favicon.ico');
-var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build');
+var paths = require('./paths');
 
 module.exports = {
   devtool: 'eval',
   entry: [
     require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
     require.resolve('webpack/hot/dev-server'),
-    path.join(srcPath, 'index')
+    path.join(paths.appSrc, 'index')
   ],
   output: {
     // Next line is not used in dev but WebpackDevServer crashes without it:
-    path: buildPath,
+    path: paths.appBuild,
     pathinfo: true,
     filename: 'bundle.js',
     publicPath: '/'
@@ -48,39 +31,42 @@ module.exports = {
     extensions: ['', '.js'],
   },
   resolveLoader: {
-    root: nodeModulesPath,
+    root: paths.ownNodeModules,
     moduleTemplates: ['*-loader']
   },
   module: {
     preLoaders: [
       {
         test: /\.js$/,
         loader: 'eslint',
-        include: srcPath,
+        include: paths.appSrc,
       }
     ],
     loaders: [
       {
         test: /\.js$/,
-        include: srcPath,
+        include: paths.appSrc,
         loader: 'babel',
         query: require('./babel.dev')
       },
       {
         test: /\.css$/,
-        include: [srcPath, rootNodeModulesPath],
+        include: [paths.appSrc, paths.appNodeModules],
         loader: 'style!css!postcss'
       },
       {
         test: /\.json$/,
+        include: [paths.appSrc, paths.appNodeModules],
         loader: 'json'
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
+        include: [paths.appSrc, paths.appNodeModules],
         loader: 'file',
       },
       {
         test: /\.(mp4|webm)$/,
+        include: [paths.appSrc, paths.appNodeModules],
         loader: 'url?limit=10000'
       }
     ]
@@ -95,8 +81,8 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       inject: true,
-      template: indexHtmlPath,
-      favicon: faviconPath,
+      template: paths.appHtml,
+      favicon: paths.appFavicon,
     }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
     // Note: only CSS is currently hot reloaded

config/webpack.config.prod.js

@@ -13,22 +13,9 @@ var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var url = require('url');
+var paths = require('./paths');
 
-// TODO: hide this behind a flag and eliminate dead code on eject.
-// This shouldn't be exposed to the user.
-var isInNodeModules = 'node_modules' ===
-  path.basename(path.resolve(path.join(__dirname, '..', '..')));
-var relativePath = isInNodeModules ? '../../..' : '..';
-if (process.argv[2] === '--debug-template') {
-  relativePath = '../template';
-}
-var srcPath = path.resolve(__dirname, relativePath, 'src');
-var rootNodeModulesPath = path.resolve(__dirname, relativePath, 'node_modules');
-var nodeModulesPath = path.join(__dirname, '..', 'node_modules');
-var indexHtmlPath = path.resolve(__dirname, relativePath, 'index.html');
-var faviconPath = path.resolve(__dirname, relativePath, 'favicon.ico');
-var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build');
-var homepagePath = require(path.resolve(__dirname, relativePath, 'package.json')).homepage;
+var homepagePath = require(paths.appPackageJson).homepage;
 var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
 if (!publicPath.endsWith('/')) {
   // Prevents incorrect paths in file-loader
@@ -38,9 +25,9 @@ if (!publicPath.endsWith('/')) {
 module.exports = {
   bail: true,
   devtool: 'source-map',
-  entry: path.join(srcPath, 'index'),
+  entry: path.join(paths.appSrc, 'index'),
   output: {
-    path: buildPath,
+    path: paths.appBuild,
     filename: '[name].[chunkhash].js',
     chunkFilename: '[name].[chunkhash].chunk.js',
     publicPath: publicPath
@@ -49,42 +36,45 @@ module.exports = {
     extensions: ['', '.js'],
   },
   resolveLoader: {
-    root: nodeModulesPath,
+    root: paths.ownNodeModules,
     moduleTemplates: ['*-loader']
   },
   module: {
     preLoaders: [
       {
         test: /\.js$/,
         loader: 'eslint',
-        include: srcPath
+        include: paths.appSrc
       }
     ],
     loaders: [
       {
         test: /\.js$/,
-        include: srcPath,
+        include: paths.appSrc,
         loader: 'babel',
         query: require('./babel.prod')
       },
       {
         test: /\.css$/,
-        include: [srcPath, rootNodeModulesPath],
+        include: [paths.appSrc, paths.appNodeModules],
         // Disable autoprefixer in css-loader itself:
         // https://github.com/webpack/css-loader/issues/281
         // We already have it thanks to postcss.
         loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
       },
       {
         test: /\.json$/,
+        include: [paths.appSrc, paths.appNodeModules],
         loader: 'json'
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
+        include: [paths.appSrc, paths.appNodeModules],
         loader: 'file',
       },
       {
         test: /\.(mp4|webm)$/,
+        include: [paths.appSrc, paths.appNodeModules],
         loader: 'url?limit=10000'
       }
     ]
@@ -101,8 +91,8 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       inject: true,
-      template: indexHtmlPath,
-      favicon: faviconPath,
+      template: paths.appHtml,
+      favicon: paths.appFavicon,
       minify: {
         removeComments: true,
         collapseWhitespace: true,

scripts/build.js

@@ -9,20 +9,12 @@
 
 process.env.NODE_ENV = 'production';
 
-var path = require('path');
 var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
 var config = require('../config/webpack.config.prod');
+var paths = require('../config/paths');
 
-var isInNodeModules = 'node_modules' ===
-  path.basename(path.resolve(path.join(__dirname, '..', '..')));
-var relative = isInNodeModules ? '../../..' : '..';
-if (process.argv[2] === '--debug-template') {
-  relative = '../template';
-}
-var packageJsonPath = path.join(__dirname, relative, 'package.json');
-var buildPath = path.join(__dirname, relative, 'build');
-rimrafSync(buildPath);
+rimrafSync(paths.appBuild);
 
 webpack(config).run(function(err, stats) {
   if (err) {
@@ -32,7 +24,7 @@ webpack(config).run(function(err, stats) {
   }
 
   var openCommand = process.platform === 'win32' ? 'start' : 'open';
-  var homepagePath = require(packageJsonPath).homepage;
+  var homepagePath = require(paths.appPackageJson).homepage;
   console.log('Successfully generated a bundle in the build folder!');
   if (homepagePath) {
     console.log('You can now deploy it to ' + homepagePath + '.');