simplify implementation and let user manage included dependencies

viankakrisna · viankakrisna · commit 44d0f7f79a72 · 2017-03-01T19:08:59.000+07:00
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
@@ -17,7 +17,7 @@ var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 var getClientEnvironment = require('./env');
 var paths = require('./paths');
-var vendorManifestId = require('../utils/vendorManifestId')
+var vendorHash = require('../utils/vendorHash')
 // @remove-on-eject-begin
 // `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174
 var path = require('path');
@@ -211,7 +211,7 @@ module.exports = {
   plugins: [
     new webpack.DllReferencePlugin({
       context: '.',
-      manifest: require(path.join(paths.vendorPath, 'manifest.' + vendorManifestId + '.json'))
+      manifest: require(path.join(paths.vendorPath, vendorHash + '.json'))
     }),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
@@ -15,7 +15,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var ManifestPlugin = require('webpack-manifest-plugin');
 var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-var vendorManifestId = require('../utils/vendorManifestId');
+var vendorHash = require('../utils/vendorHash');
 var paths = require('./paths');
 var getClientEnvironment = require('./env');
 
@@ -225,7 +225,7 @@ module.exports = {
   plugins: [
     new webpack.DllReferencePlugin({
       context: '.',
-      manifest: require(path.join(paths.vendorPath, 'manifest.' + vendorManifestId + '.json'))
+      manifest: require(path.join(paths.vendorPath, vendorHash + '.json'))
     }),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
diff --git a/packages/react-scripts/config/webpack.config.vendor.js b/packages/react-scripts/config/webpack.config.vendor.js
@@ -3,36 +3,23 @@ var paths = require('../config/paths');
 var path = require('path');
 var packageJson = require(paths.appPackageJson);
 var environment = process.env.NODE_ENV;
-var vendorManifestId = require('../utils/vendorManifestId');
+var vendorHash = require('../utils/vendorHash');
 var dependencies = packageJson.dependencies;
 var getClientEnvironment = require('./env');
 var publicPath = paths.servedPath;
 var publicUrl = publicPath.slice(0, -1);
 var env = getClientEnvironment(publicUrl);
 var fs = require('fs');
-var reactScriptsPath = path.resolve('node_modules/react-scripts');
-var reactScriptsLinked = fs.existsSync(reactScriptsPath) &&
-  fs.lstatSync(reactScriptsPath).isSymbolicLink();
-
-// config before publish: we're in ./packages/react-scripts/config/
-if (
-  !reactScriptsLinked &&
-  __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1
-) {
-  dependencies = packageJson.devDependencies;
-}
-
-console.log('Current dependencies :');
-Object.keys(dependencies).forEach(dependency => console.log(dependency));
-
+var vendorGlobalName = '[name]' + vendorHash.replace(/\./g,'')
 module.exports = {
+  cache: true,
   entry: {
-    vendor: Object.keys(dependencies)
+    vendor: [paths.vendorPath]
   },
   output: {
-    filename: '[name].' + vendorManifestId + '.js',
+    filename: vendorHash + '.js',
     path: paths.vendorPath,
-    library: '[name]_' + vendorManifestId
+    library: vendorGlobalName
   },
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
@@ -70,12 +57,12 @@ module.exports = {
       // within that bundle
       path: path.join(
         paths.vendorPath,
-        'manifest.' + vendorManifestId + '.json'
+        vendorHash + '.json'
       ),
       // The name of the global variable which the library's
       // require function has been assigned to. This must match the
       // output.library option above
-      name: '[name]_' + vendorManifestId
+      name: vendorGlobalName
     }),
     environment === 'production'
       ? new webpack.DefinePlugin(env.stringified)
diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js
@@ -63,7 +63,7 @@ prompt(
     path.join('utils', 'bundleVendorIfStale.js'),
     path.join('utils', 'packageJsonMd5.js'),
     path.join('utils', 'printErrors.js'),
-    path.join('utils', 'vendorManifestId.js'),
+    path.join('utils', 'vendorHash.js'),
   ];
 
   // Ensure that the app folder is clean and we won't override any files
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
@@ -30,8 +30,8 @@ var getProcessForPort = require('react-dev-utils/getProcessForPort');
 var openBrowser = require('react-dev-utils/openBrowser');
 var prompt = require('react-dev-utils/prompt');
 var fs = require('fs');
-var config = require('../config/webpack.config.dev');
 var paths = require('../config/paths');
+var bundleVendorIfStale = require('../utils/bundleVendorIfStale')
 
 var useYarn = fs.existsSync(paths.yarnLockFile);
 var cli = useYarn ? 'yarn' : 'npm';
@@ -41,7 +41,8 @@ var isInteractive = process.stdout.isTTY;
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
 }
-
+bundleVendorIfStale(()=>{
+var config = require('../config/webpack.config.dev');
 // Tools like Cloud9 rely on this.
 var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 var compiler;
@@ -334,3 +335,4 @@ detect(DEFAULT_PORT).then(port => {
     console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
   }
 });
+})
diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html
@@ -27,6 +27,6 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-    <script src="vendor/vendor.%REACT_APP_VENDOR_MANIFEST_ID%.js"></script>
+    <script src="vendor/%REACT_APP_VENDOR_HASH%.js"></script>
   </body>
 </html>
diff --git a/packages/react-scripts/template/public/vendor/index.js b/packages/react-scripts/template/public/vendor/index.js
@@ -0,0 +1,3 @@
+require("react");
+require("react-dom");
+require("lodash");
diff --git a/packages/react-scripts/utils/bundleVendorIfStale.js b/packages/react-scripts/utils/bundleVendorIfStale.js
@@ -1,78 +1,77 @@
-var fs = require('fs-extra');
-var path = require('path');
-var webpack = require('webpack');
-var paths = require('../config/paths');
-var config = require('../config/webpack.config.vendor');
-var clearConsole = require('react-dev-utils/clearConsole');
-var os = require('os');
-var chalk = require('chalk');
-var printErrors = require('../utils/printErrors');
+var fs = require("fs-extra");
+var path = require("path");
+var webpack = require("webpack");
+var paths = require("../config/paths");
+var config = require("../config/webpack.config.vendor");
+var clearConsole = require("react-dev-utils/clearConsole");
+var os = require("os");
+var chalk = require("chalk");
+var printErrors = require("../utils/printErrors");
 var environment = process.env.NODE_ENV;
-var hashFilePrefix = 'REACT_APP_PACKAGE_JSON_MD5_';
-var vendorManifestId = require('../utils/vendorManifestId');
+var vendorHash = require("../utils/vendorHash");
 
 module.exports = (callback, args) => {
   if (shouldManifestUpdate()) {
-    fs.emptyDirSync(paths.vendorPath);
-    var compiler = webpack(config);
-    console.log('Bundling vendor files for faster rebuilds...');
-    return compiler.run((err, stats) => {
-      if (err) {
-        printErrors('Failed to compile.', [err]);
-        process.exit(1);
+    // fs.emptyDirSync(paths.vendorPath);
+    return fs.readdir(paths.vendorPath, (err, files) => {
+      try {
+        files.filter(file => !file.indexOf(environment)).forEach(file => {
+          fs.unlinkSync(path.join(paths.vendorPath, file));
+        });
+      } catch (e) {
       }
+      var compiler = webpack(config);
+      console.log("Bundling vendor files for faster rebuilds...");
+      compiler.run((err, stats) => {
+        if (err) {
+          printErrors("Failed to compile.", [err]);
+          process.exit(1);
+        }
 
-      if (stats.compilation.errors.length) {
-        printErrors('Failed to compile.', stats.compilation.errors);
-        process.exit(1);
-      }
+        if (stats.compilation.errors.length) {
+          printErrors("Failed to compile.", stats.compilation.errors);
+          process.exit(1);
+        }
 
-      if (process.env.CI && stats.compilation.warnings.length) {
-        printErrors(
-          'Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.',
-          stats.compilation.warnings
-        );
-        process.exit(1);
-      }
+        if (process.env.CI && stats.compilation.warnings.length) {
+          printErrors(
+            "Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.",
+            stats.compilation.warnings
+          );
+          process.exit(1);
+        }
 
-      console.log(chalk.green('Vendor compiled successfully.'));
-      console.log();
-      fs.writeFileSync(
-        path.join(os.tmpdir(), hashFilePrefix + vendorManifestId)
-      );
-      callback();
+        console.log(chalk.green("Vendor compiled successfully."));
+        console.log();
+        callback();
+      });
     });
   }
-  console.log('Vendor file is up to date! No need to rebuild it');
+  console.log("Vendor file is up to date! No need to rebuild it");
   return callback();
 };
 
 function manifestExists() {
-  return fs.existsSync(
-    path.join(paths.vendorPath, 'manifest.' + vendorManifestId + '.json')
-  );
+  return fs.existsSync(path.join(paths.vendorPath, vendorHash + ".json"));
 }
 
 function manifestStale() {
-  if (md5Exists(vendorManifestId)) {
+  if (vendorHash) {
     return false;
   }
   return true;
 }
 
-function md5Exists(md5) {
-  return fs.existsSync(path.join(os.tmpdir(), hashFilePrefix + md5));
-}
-
 function shouldManifestUpdate() {
+  var isExists = manifestExists();
   clearConsole();
-  console.log('Using ' + vendorManifestId + ' vendor build');
-  if (!manifestExists()) {
-    console.log('Vendor file needs to be created...');
+  console.log("Using " + vendorHash + " vendor build");
+  if (!isExists) {
+    console.log("Vendor file needs to be created...");
     return true;
   }
-  if (manifestExists() && manifestStale()) {
-    console.log('Vendor file needs to be updated...');
+  if (isExists && manifestStale()) {
+    console.log("Vendor file needs to be updated...");
     return true;
   }
   return false;
diff --git a/packages/react-scripts/utils/packageJsonMd5.js b/packages/react-scripts/utils/packageJsonMd5.js
diff --git a/packages/react-scripts/utils/vendorHash.js b/packages/react-scripts/utils/vendorHash.js
@@ -0,0 +1,13 @@
+var crypto = require('crypto');
+var fs = require('fs');
+var path = require('path')
+var paths = require('../config/paths');
+var hash = crypto.createHash('md5');
+var input = fs.readFileSync(path.join(paths.vendorPath, 'index.js'));
+hash.update(input);
+
+var hashed = hash.digest('hex');
+module.exports = 
+process.env.REACT_APP_VENDOR_HASH = 
+[process.env.NODE_ENV, hashed].join('.');
+
diff --git a/packages/react-scripts/utils/vendorManifestId.js b/packages/react-scripts/utils/vendorManifestId.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+require("react");`
	`2`	`+require("react-dom");`
	`3`	`+require("lodash");`