From a8d2fcde63eed1e10ab585db562efbbadc867abc Mon Sep 17 00:00:00 2001 From: Jose Osorio Date: Mon, 22 Mar 2021 09:01:37 -0500 Subject: [PATCH] EXC-68: customize react scripts --- .../template/src/index.tsx | 17 ++- .../react-scripts/config/webpack.config.js | 140 ++++-------------- packages/react-scripts/package.json | 2 + 3 files changed, 42 insertions(+), 117 deletions(-) diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx index ef2edf8ea3f..c49463741c8 100644 --- a/packages/cra-template-typescript/template/src/index.tsx +++ b/packages/cra-template-typescript/template/src/index.tsx @@ -1,8 +1,18 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import singleSpaReact from 'single-spa-react'; import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; + +const lifecycles = singleSpaReact({ + React, + ReactDOM, + rootComponent: App, + errorBoundary(err, info, props) { + // Customize the root error boundary for your microfrontend here. + return null; + }, +}); ReactDOM.render( @@ -11,7 +21,4 @@ ReactDOM.render( document.getElementById('root') ); -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +export const { bootstrap, mount, unmount } = lifecycles; diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 9530453a4cc..fc483161bcc 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -16,10 +16,7 @@ const PnpWebpackPlugin = require('pnp-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin'); -const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); -const safePostCssParser = require('postcss-safe-parser'); const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); @@ -108,16 +105,26 @@ module.exports = function (webpackEnv) { // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { + const postCssPlugins = [ + require('postcss-increase-specificity')({ + stackableRoot: '.project44-voc', + repeat: 1, + }), + require('postcss-flexbugs-fixes'), + require('postcss-preset-env')({ + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + }), + // Adds PostCSS Normalize as the reset css with default options, + // so that it honors browserslist config in package.json + // which in turn let's users customize the target behavior as per their needs. + postcssNormalize(), + ]; + const loaders = [ - isEnvDevelopment && require.resolve('style-loader'), - isEnvProduction && { - loader: MiniCssExtractPlugin.loader, - // css is located in `static/css`, use '../../' to locate index.html folder - // in production `paths.publicUrlOrPath` can be a relative path - options: paths.publicUrlOrPath.startsWith('.') - ? { publicPath: '../../' } - : {}, - }, + require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: cssOptions, @@ -128,28 +135,15 @@ module.exports = function (webpackEnv) { // package.json loader: require.resolve('postcss-loader'), options: { - postcssOptions: { - plugins: [ - require('postcss-flexbugs-fixes'), - [ - require('postcss-preset-env'), - { - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - }, - ], - // Adds PostCSS Normalize as the reset css with default options, - // so that it honors browserslist config in package.json - // which in turn let's users customize the target behavior as per their needs. - postcssNormalize(), - ], - }, - sourceMap: isEnvProduction && shouldUseSourceMap, + // Necessary for external CSS imports to work + // https://github.com/facebook/create-react-app/issues/2677 + ident: 'postcss', + plugins: postCssPlugins, + sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, }, ].filter(Boolean); + if (preProcessor) { loaders.push( { @@ -167,6 +161,7 @@ module.exports = function (webpackEnv) { } ); } + return loaders; }; @@ -213,9 +208,8 @@ module.exports = function (webpackEnv) { pathinfo: isEnvDevelopment, // There will be one main bundle, and one file per asynchronous chunk. // In development, it does not produce real files. - filename: isEnvProduction - ? 'static/js/[name].[contenthash:8].js' - : isEnvDevelopment && 'static/js/bundle.js', + filename: 'project44-voc.js', + libraryTarget: 'system', // TODO: remove this when upgrading to webpack 5 futureEmitAssets: true, // There are also additional JS chunk files if you use code splitting. @@ -241,84 +235,6 @@ module.exports = function (webpackEnv) { // module chunks which are built will work in web workers as well. globalObject: 'this', }, - optimization: { - minimize: isEnvProduction, - minimizer: [ - // This is only used in production mode - new TerserPlugin({ - terserOptions: { - parse: { - // We want terser to parse ecma 8 code. However, we don't want it - // to apply any minification steps that turns valid ecma 5 code - // into invalid ecma 5 code. This is why the 'compress' and 'output' - // sections only apply transformations that are ecma 5 safe - // https://github.com/facebook/create-react-app/pull/4234 - ecma: 8, - }, - compress: { - ecma: 5, - warnings: false, - // Disabled because of an issue with Uglify breaking seemingly valid code: - // https://github.com/facebook/create-react-app/issues/2376 - // Pending further investigation: - // https://github.com/mishoo/UglifyJS2/issues/2011 - comparisons: false, - // Disabled because of an issue with Terser breaking valid code: - // https://github.com/facebook/create-react-app/issues/5250 - // Pending further investigation: - // https://github.com/terser-js/terser/issues/120 - inline: 2, - }, - mangle: { - safari10: true, - }, - // Added for profiling in devtools - keep_classnames: isEnvProductionProfile, - keep_fnames: isEnvProductionProfile, - output: { - ecma: 5, - comments: false, - // Turned on because emoji and regex is not minified properly using default - // https://github.com/facebook/create-react-app/issues/2488 - ascii_only: true, - }, - }, - sourceMap: shouldUseSourceMap, - }), - // This is only used in production mode - new OptimizeCSSAssetsPlugin({ - cssProcessorOptions: { - parser: safePostCssParser, - map: shouldUseSourceMap - ? { - // `inline: false` forces the sourcemap to be output into a - // separate file - inline: false, - // `annotation: true` appends the sourceMappingURL to the end of - // the css file, helping the browser find the sourcemap - annotation: true, - } - : false, - }, - cssProcessorPluginOptions: { - preset: ['default', { minifyFontValues: { removeQuotes: false } }], - }, - }), - ], - // Automatically split vendor and commons - // https://twitter.com/wSokra/status/969633336732905474 - // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366 - splitChunks: { - chunks: 'all', - name: isEnvDevelopment, - }, - // Keep the runtime chunk separated to enable long term caching - // https://twitter.com/wSokra/status/969679223278505985 - // https://github.com/facebook/create-react-app/issues/5358 - runtimeChunk: { - name: entrypoint => `runtime-${entrypoint.name}`, - }, - }, resolve: { // This allows you to set a fallback for where webpack should look for modules. // We placed these paths second because we want `node_modules` to "win" diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 29cfe9b8984..7acb6c7375e 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -67,6 +67,7 @@ "pnp-webpack-plugin": "1.6.4", "postcss": "8.2.4", "postcss-flexbugs-fixes": "5.0.2", + "postcss-increase-specificity": "^0.6.0", "postcss-loader": "4.2.0", "postcss-normalize": "9.0.0", "postcss-preset-env": "6.7.0", @@ -79,6 +80,7 @@ "resolve-url-loader": "^3.1.2", "sass-loader": "^10.0.5", "semver": "7.3.2", + "single-spa-react": "^4.1.1", "style-loader": "1.3.0", "terser-webpack-plugin": "4.2.3", "ts-pnp": "1.2.0",