output library to lib folder and improve lib script

Author: albertstill

packages/react-scripts/config/paths.js

@@ -50,6 +50,7 @@ function getServedPath(appPackageJson) {
 module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('build'),
+ appLib: resolveApp('lib'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('demo/index.html'),
  appIndexJs: resolveApp('src/index.jsx'),
@@ -72,6 +73,7 @@ module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
+ appLib: resolveApp('lib'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('demo/index.html'),
  appIndexJs: resolveApp('src/index.jsx'),
@@ -104,6 +106,7 @@ if (
  dotenv: resolveOwn('template/.env'),
  appPath: resolveApp('.'),
  appBuild: resolveOwn('../../build'),
+ appLib: resolveOwn('../../lib'),
  appPublic: resolveOwn('template/public'),
  appHtml: resolveOwn('template/demo/index.html'),
  appIndexJs: resolveOwn('template/src/index.jsx'),

packages/react-scripts/config/webpack.config.library.js

@@ -23,8 +23,6 @@ const publicPath = paths.servedPath;
 // Some apps do not use client-side routing with pushState.
 // For these, "homepage" can be set to "." to enable relative asset paths.
 const shouldUseRelativeAssetPaths = publicPath === './';
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
@@ -39,7 +37,7 @@ if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 }
 
 // Note: defined here because it will be used more than once.
-const cssFilename = 'static/css/[name].[contenthash:8].css';
+const cssFilename = 'styles.css';
 
 // ExtractTextPlugin expects the build output to be flat.
 // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
@@ -81,13 +79,13 @@ module.exports = {
  bail: true,
  // We generate sourcemaps in production. This is slow but gives good results.
  // You can exclude the *.map files from the build during deployment.
- devtool: shouldUseSourceMap ? 'source-map' : false,
+ devtool: false,
  // In production, we only want to load the polyfills and the app code.
  entry: [paths.appIndexJs],
  target: 'node',
  output: {
  // The build folder.
- path: paths.appBuild,
+ path: paths.appLib,
  // Generated JS file names (with nested folders).
  // There will be one main bundle, and one file per asynchronous chunk.
  // We don't currently advertise code splitting but Webpack supports it.
@@ -184,7 +182,7 @@ module.exports = {
  loader: require.resolve('url-loader'),
  options: {
  limit: 10000,
- name: 'static/media/[name].[hash:8].[ext]',
+ name: 'media/[name].[hash:8].[ext]',
  },
  },
  // Process JS with Babel.
@@ -223,7 +221,6 @@ module.exports = {
  options: {
  importLoaders: 1,
  minimize: true,
- sourceMap: shouldUseSourceMap,
  },
  },
  {
@@ -275,7 +272,7 @@ module.exports = {
  // by webpacks internal loaders.
  exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
  options: {
- name: 'static/media/[name].[hash:8].[ext]',
+ name: 'media/[name].[hash:8].[ext]',
  },
  },
  // ** STOP ** Are you adding a new loader?

packages/react-scripts/scripts/build-library.js

@@ -22,22 +22,19 @@ process.on('unhandledRejection', err => {
 // Ensure environment variables are read.
 require('../config/env');
 
-const path = require('path');
 const chalk = require('chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
 const config = require('../config/webpack.config.library');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
 
 const measureFileSizesBeforeBuild =
  FileSizeReporter.measureFileSizesBeforeBuild;
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
 
 // These sizes are pretty large. We'll warn for bundles exceeding them.
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
@@ -50,11 +47,11 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
-measureFileSizesBeforeBuild(paths.appBuild)
+measureFileSizesBeforeBuild(paths.appLib)
  .then(previousFileSizes => {
  // Remove all content but keep the directory so that
  // if you're in it, you don't end up in Trash
- fs.emptyDirSync(paths.appBuild);
+ fs.emptyDirSync(paths.appLib);
  // Start the webpack build
  return build(previousFileSizes);
  })
@@ -81,23 +78,10 @@ measureFileSizesBeforeBuild(paths.appBuild)
  printFileSizesAfterBuild(
  stats,
  previousFileSizes,
- paths.appBuild,
+ paths.appLib,
  WARN_AFTER_BUNDLE_GZIP_SIZE,
  WARN_AFTER_CHUNK_GZIP_SIZE
  );
- console.log();
-
- const appPackage = require(paths.appPackageJson);
- const publicUrl = paths.publicUrl;
- const publicPath = config.output.publicPath;
- const buildFolder = path.relative(process.cwd(), paths.appBuild);
- printHostingInstructions(
- appPackage,
- publicUrl,
- publicPath,
- buildFolder,
- useYarn
- );
  },
  err => {
  console.log(chalk.red('Failed to compile.\n'));

packages/react-scripts/scripts/init.js

@@ -43,6 +43,9 @@ module.exports = function(
  test: 'domain-react-scripts test --env=jsdom',
  };
 
+ // so the result of domain-react-scripts build:library can be required
+ appPackage.main = 'lib';
+
  fs.writeFileSync(
  path.join(appPath, 'package.json'),
  JSON.stringify(appPackage, null, 2)