From 6767c5660beb8d24e3041fb73ac63af8c1ef8d28 Mon Sep 17 00:00:00 2001 From: Christopher Berkompas Date: Thu, 30 Mar 2023 11:37:14 -0700 Subject: [PATCH] Support multiple entry points from src/entries/* Based on https://github.com/facebook/create-react-app/commit/fd9952cc87883ba92d6fa625fbcf319717b1cc40 Other changes: 1. Allow customizing the path to node_modules using ENV var 2. Added instructions for updating this fork 3. Attempt to minimize MaterialUI bundle size 4. Fix "path is undefined" error in webpackDevServer 5. Support multiple entrypoints in ManifestPlugin output --- CONTRIBUTING.md | 2 +- UPDATING.md | 53 +++++++++ .../template/src/{ => entries}/index.js | 6 +- packages/react-scripts/config/paths.js | 22 ++-- .../react-scripts/config/webpack.config.js | 101 ++++++++++++------ .../config/webpackDevServer.config.js | 4 + packages/react-scripts/package.json | 14 ++- packages/react-scripts/scripts/build.js | 2 +- packages/react-scripts/scripts/start.js | 2 +- 9 files changed, 153 insertions(+), 53 deletions(-) create mode 100644 UPDATING.md rename packages/cra-template/template/src/{ => entries}/index.js (80%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index cf94d0dbdac..d437bfa381c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -17,7 +17,7 @@ Here are a few examples of them in action. -Instead of letting the user specify the entry filename, we always assume it to be `src/index.js`. Rather than letting the user specify the output bundle name, we generate it, but make sure to include the content hash in it. Whenever possible, we want to leverage convention to make good choices for the user, especially in cases where it’s easy to misconfigure something. +We accept one or more entry points in `src/entries/*.js`. Rather than letting the user specify the output bundle name, we generate it, but make sure to include the content hash in it. Whenever possible, we want to leverage convention to make good choices for the user, especially in cases where it’s easy to misconfigure something. ### Heuristics diff --git a/UPDATING.md b/UPDATING.md new file mode 100644 index 00000000000..8fdacfc0e5c --- /dev/null +++ b/UPDATING.md @@ -0,0 +1,53 @@ +# Instructions for Updating this Fork + +[Based on this article](https://medium.com/@denis.zhbankov/maintaining-a-fork-of-create-react-app-as-an-alternative-to-ejecting-c555e8eb2b63) + +```sh +# Indicate the version we're on now, and which one we're upgrading to: +VERSION_FROM="3.3.1" +VERSION_TO="3.4.4" + +# In Github, first sync our fork with the parent facebook/create-react-app repository + +# Clone down our fork if you haven't already +git clone git@github.com:LeadSimple/create-react-app.git +# Might not be necessary: +git remote add upstream git@github.com/facebook/create-react-app.git + +# Pull upstream changes into main (master) branch +git checkout main +git pull upstream main + +# Check out the last custom branch we updated (ex custom-react-scripts-3.1.1) +git checkout custom-react-scripts-$VERSION_FROM +# Create a new branch from it +git checkout -b custom-react-scripts-$VERSION_TO + +# Rebase our custom branch onto the desired tag from the main branch +# During the rebase, edit packages/react-scripts/package.json to have an rc version, like 3.3.1-rc.1 +git rebase --onto v$VERSION_TO main + +# TODO: find out how to test the package at this point, before publishing rc to NPM + +# Publish package to NPM +cd packages/react-scripts +npm publish --access public + +# Update package.json in main app, and test locally +# Once we confirm everything is working, we could update this package's version to drop the -rc.1, but that isn't really necessary + +# If something is not working: +# 1. Debug and fix, updating the package version to a new rc. +# 2. Commit and tag +# 3. Publish to NPM +# 4. Test again + +# Tag our local branch with the new version +git tag -a v$VERSION_TO-rc1 -m "Customized v$VERSION_TO" + +# IMPORTANT: Make sure everything is working first, then: +# Push our rebased branch up to Github +cd ../.. +git status +git push origin +``` \ No newline at end of file diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/entries/index.js similarity index 80% rename from packages/cra-template/template/src/index.js rename to packages/cra-template/template/src/entries/index.js index f5185c1ec7a..970c8acad8b 100644 --- a/packages/cra-template/template/src/index.js +++ b/packages/cra-template/template/src/entries/index.js @@ -1,8 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import '../index.css'; +import App from '../App'; +import * as serviceWorker from '../serviceWorker'; ReactDOM.render( diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 11d81b7f5a7..fd3d83de567 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -10,6 +10,7 @@ const path = require('path'); const fs = require('fs'); +const globby = require('globby'); const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath'); // Make sure any symlinks in the project folder are resolved: @@ -17,6 +18,9 @@ const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath'); const appDirectory = fs.realpathSync(process.cwd()); const resolveApp = relativePath => path.resolve(appDirectory, relativePath); +const envBuildPath = process.env.BUILD_PATH; // expecting relative path +const nodeModulesPath = process.env.NODE_MODULES_PATH; // expecting absolute path + // We use `PUBLIC_URL` environment variable or "homepage" field to infer // "public path" at which the app is served. // webpack needs to know it to put the right