feat(pv-scripts): remove the "legacy" bundle

webpack won't generate a dedicated "legacy" bundle which was meant to be used for internet explorer. only one (js) bundle and one set of configuration for that will be used BREAKING CHANGE: "legacy" output is removed. only the "modern" bundle is generated, without any "module" or "modern" prefix. this also applies to all configurations (e.g. no webpack.config.module.js or no `[modern]` group in browserlist)
pro-vision · Apr 16, 2024 · 0a23007 · 0a23007
1 parent 02fd2b3
commit 0a23007
Show file tree

Hide file tree

Showing 32 changed files with 51 additions and 484 deletions.
diff --git a/examples/react-tsx/.eslintrc.json b/examples/react-tsx/.eslintrc.json
@@ -14,11 +14,11 @@
     "global-require": 0,
     "no-console": "off",
     // note you must disable the base rule as it can report incorrect errors
-    "no-use-before-define": "off",
+    "no-use-before-define": "off"
   },
   "settings":  {
     "react":  {
-      "version":  "detect"
+      "version": "detect"
     }
   }
 }
diff --git a/examples/react-tsx/pv.config.js b/examples/react-tsx/pv.config.js
@@ -1,7 +1,6 @@
 module.exports = {
   "namespace": "react-tsx-sample",
   "jsEntry": "src/js/index.tsx",
-  "jsLegacyEntry": "src/js/legacyIndex.tsx",
   "useReact": true,
   "copyStaticFiles": true,
   "cleanDest": true

diff --git a/examples/react-tsx/src/js/legacyIndex.tsx b/examples/react-tsx/src/js/legacyIndex.tsx
diff --git a/examples/react-tsx/static/index.html b/examples/react-tsx/static/index.html
@@ -7,7 +7,6 @@
 <body>
   <div id="main">Foo</div>
   <script type="module" src="/js/react-tsx-sample.app.js"></script>
-  <script nomodule src="/js/react-tsx-sample.app.legacy.js"></script>
 </body>
 
 </html>
diff --git a/packages/pv-scripts/README.md b/packages/pv-scripts/README.md
@@ -11,7 +11,7 @@ npm i @pro-vision/pv-scripts -D
 ## Usage
 
 ### Requirements
-To use the CLI, you need to create at least the two entry-files (`jsEntry`, `jsLegacyEntry`), see [Basic Configuration](#basic-configuration).
+To use the CLI, you need to create at least the entry-file (`jsEntry`), see [Basic Configuration](#basic-configuration).
 
 ### Command Line Interface
 
@@ -36,7 +36,7 @@ npx pv-scripts prod
 #### CLI flags
 
 ##### `--stats` or `--statsJson`
-Webpack build will use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) to generate an html report or json output regarding the bundle sizes and its composition. Which will be stored under `target/report_module.html | target/report_legacy.html` and `target/report_module.json | target/report_legacy.json`.
+Webpack build will use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) to generate an html report or json output regarding the bundle sizes and its composition. Which will be stored under `target/report.html` and `target/report.json`.
 
 This flag should only be used in combination with `prod` build to have a realistic information from the optimized bundles.
 
@@ -51,10 +51,8 @@ Basic Configuration can be done in a `pv.config.js` file in the npm project root
 | devServerPort             | number  | 8616                 | set `webpack-dev-server` port                                                                                   |
 | srcPath                   | string  | "src"                | defines the working directory                                                                                   |
 | destPath                  | string  | "target"             | defines where to put bundled files                                                                              |
-| namespace                 | string  | ""                   | this controls the name-prefix on your bundled files following this pattern `[namespace].app.[?legacy].(js|css)` |
+| namespace                 | string  | ""                   | this controls the name-prefix on your bundled files following this pattern `[namespace].app.(js|css)`           |
 | jsEntry                   | string  | "src/index.ts"       | defines path of your (JS\|TS\|JSX\|TSX) entry file                                                              |
-| jsLegacyEntry             | string  | "src/legacyIndex.ts" | defines path of your (JS\|TS\|JSX\|TSX) legacy entry file                                                       |
-| disableLegacyBuild        | boolean  | false               | disables legacy build                                                     |
 | cssEntry                  | string  | "src/index.scss"     | defines path of your SCSS entry file. If `src/index.scss` does not exist, no error is thrown but the css generation is simply skipped|
 | useTS                     | boolean | true                 | defines whether you want to use Typescript                                                                      |
 | useReact                  | boolean | false                | defines whether you want to use React                                                                           |
@@ -67,15 +65,15 @@ Basic Configuration can be done in a `pv.config.js` file in the npm project root
 | resourcesSrc    | string  | "resources"           | defines resources folder which is copied to target/resources                                                   |
 | autoConsoleClear | boolean  | false              | defines whether the console should be cleared automatically in dev-mode                                        |
 | enableContentHash | boolean  | false              | defines whether generated js and css files should contain a content hash in their names                                         |
-##### Example:
+
+##### Example
 
 ```js
 // pv.config.js
 module.exports = {
   devServerPort: 8616,
   destPath: "target",
   jsEntry: "src/index.js",
-  jsLegacyEntry: "src/legacyIndex.js",
   cssEntry: "src/index.scss",
   useTS: false,
   useReact: false,
@@ -90,33 +88,15 @@ For further customization of the webpack-config, specific config-files can be ad
 **webpack.config.js:**
 Valid webpack.config file which will be merged with both (dev/prod) default configs.
 
-**webpack.config.module.js:**
-Valid webpack.config file which will be merged with the module build of both (dev/prod) default configs.
-
-**webpack.config.legacy.js:**
-Valid webpack.config file which will be merged with the legacy build of both (dev/prod) default configs.
-
 **webpack.config.dev.js:**
 Valid webpack.config file which will be merged with the dev default config.
 
-**webpack.config.dev.module.js:**
-Valid webpack.config file which will be merged with the module build of the dev default config.
-
-**webpack.config.dev.legacy.js:**
-Valid webpack.config file which will be merged with the legacy build of the dev default config.
-
 **webpack.config.prod.js:**
 Valid webpack.config file which will be merged with the prod default config.
 
-**webpack.config.prod.module.js:**
-Valid webpack.config file which will be merged with the module build of the prod default config.
-
-**webpack.config.prod.legacy.js:**
-Valid webpack.config file which will be merged with the legacy build of the prod default config.
-
 #### Browserslist
 
-A default browser query is used for compiling javascript and css. i.e. IE11 for the "legacy" bundle and latest 2 versions of evergreen browsers (chrome, firefox, safari, edge) for the "modern" bundle. And all combined for the css output. You can define your own [browserslist](https://github.com/browserslist/browserslist) to override any of these target groups. Don't forget to define default browsers, browser for `[modern]` or `[legacy]` environment. See default [.browserslistrc](https://github.com/pro-vision/fe-tools/tree/master/packages/pv-scripts/config/.browserslistrc) file for an example.
+A default browser query is used for compiling javascript and css. i.e. latest 2 versions of evergreen browsers (chrome, firefox, safari, edge). You can define your own [browserslist](https://github.com/browserslist/browserslist). See default [.browserslistrc](https://github.com/pro-vision/fe-tools/tree/master/packages/pv-scripts/config/.browserslistrc) file for an example.
 
 ## Examples
 

diff --git a/packages/pv-scripts/config/.browserslistrc b/packages/pv-scripts/config/.browserslistrc
@@ -1,24 +1,9 @@
 # pv-scripts default target browsers,
-# will be overridden with project browserslist
+# can be overridden with project's browserslist
 
-# default, (modern+legacy) used for PostCSS
 last 2 firefox versions
 last 2 chrome versions
 last 2 and_chr versions
 last 2 safari versions
 last 2 ios_saf versions
 last 2 edge versions
-IE >= 11
-
-# will be used for modern bundle
-[modern]
-last 2 firefox versions
-last 2 chrome versions
-last 2 and_chr versions
-last 2 safari versions
-last 2 ios_saf versions
-last 2 edge versions
-
-# will be used for legacy bundle
-[legacy]
-IE >= 11
diff --git a/packages/pv-scripts/config/default.config.js b/packages/pv-scripts/config/default.config.js
@@ -4,8 +4,6 @@ module.exports = {
   destPath: "target",
   namespace: "",
   jsEntry: "src/index.ts",
-  jsLegacyEntry: "src/legacyIndex.ts",
-  disableLegacyBuild: false,
   cssEntry: "src/index.scss",
   useTS: true,
   useReact: false,

diff --git a/packages/pv-scripts/helpers/buildConfigHelpers.js b/packages/pv-scripts/helpers/buildConfigHelpers.js
@@ -90,10 +90,6 @@ const getHandlebarsLoaderOptions = () => {
   return handlebarsLoaderOptions;
 };
 
-const legacyBuildDisabled = () => {
-  return getBuildConfig().disableLegacyBuild;
-};
-
 module.exports = {
   getBuildConfig,
   getJSExtName,
@@ -103,6 +99,5 @@ module.exports = {
   shouldAddCssEntry,
   shouldUseHtmlCompiler,
   getHandlebarsLoaderOptions,
-  legacyBuildDisabled,
   shouldAddContentHash,
 };
diff --git a/packages/pv-scripts/helpers/paths.js b/packages/pv-scripts/helpers/paths.js
@@ -32,24 +32,6 @@ const jsEntry = () => {
   return resolveApp(config.jsEntry.replace(extname, getJSExtName(config)));
 };
 
-const jsLegacyEntry = () => {
-  if (config.jsLegacyEntry !== defaultConfig.jsLegacyEntry) {
-    return resolveApp(config.jsLegacyEntry);
-  }
-
-  const extname = path.extname(config.jsLegacyEntry);
-
-  const jsLegacyEntryPath = resolveApp(
-    config.jsLegacyEntry.replace(extname, getJSExtName(config))
-  );
-
-  const jsLegacyEntryExists = existsSync(jsLegacyEntryPath);
-
-  if (jsLegacyEntryExists) return jsLegacyEntryPath;
-
-  return jsEntry();
-};
-
 const cssEntry = resolveApp(config.cssEntry);
 const appTarget = resolveApp(config.destPath);
 
@@ -75,7 +57,6 @@ module.exports = {
   appPath,
   appSrc,
   jsEntry,
-  jsLegacyEntry,
   cssEntry,
   appTarget,
   join,

diff --git a/packages/pv-scripts/helpers/prepareWebpackConfig.js b/packages/pv-scripts/helpers/prepareWebpackConfig.js
@@ -1,53 +1,24 @@
 const { merge } = require("webpack-merge");
 
 const { getCustomWebpackConfig } = require("../helpers/webpackConfigHelpers");
-const { legacyBuildDisabled } = require("../helpers/buildConfigHelpers");
 const { getConfig } = require("../webpack/getConfig");
 
 async function prepareWebpackConfig(mode) {
   const customModeConfigName =
     mode === "development" ? "webpack.config.dev" : "webpack.config.prod";
   const customWebpackConfig = await getCustomWebpackConfig("webpack.config.js");
-  const customWebpackModuleConfig = await getCustomWebpackConfig(
-    "webpack.config.module.js"
-  );
-  const customWebpackLegacyConfig = await getCustomWebpackConfig(
-    "webpack.config.legacy.js"
-  );
   const customWebpackModeConfig = await getCustomWebpackConfig(
     `${customModeConfigName}.js`
   );
-  const customWebpackModeModuleConfig = await getCustomWebpackConfig(
-    `${customModeConfigName}.module.js`
-  );
-  const customWebpackModeLegacyConfig = await getCustomWebpackConfig(
-    `${customModeConfigName}.legacy.js`
-  );
 
   const customModuleConfig = merge(
     customWebpackConfig,
-    customWebpackModuleConfig,
-    customWebpackModeConfig,
-    customWebpackModeModuleConfig
+    customWebpackModeConfig
   );
 
-  const customLegacyConfig = merge(
-    customWebpackConfig,
-    customWebpackLegacyConfig,
-    customWebpackModeConfig,
-    customWebpackModeLegacyConfig
-  );
-
-  const [defaultModuleConfig, defaultLegacyConfig] = getConfig(mode);
-
-  if (legacyBuildDisabled()) {
-    return merge(defaultModuleConfig, customModuleConfig);
-  }
+  const defaultModuleConfig = getConfig(mode);
 
-  return [
-    merge(defaultModuleConfig, customModuleConfig),
-    merge(defaultLegacyConfig, customLegacyConfig),
-  ];
+  return merge(defaultModuleConfig, customModuleConfig);
 }
 
 module.exports = {

diff --git a/packages/pv-scripts/scripts/dev.js b/packages/pv-scripts/scripts/dev.js
@@ -16,10 +16,7 @@ const WebpackDevServer = require("webpack-dev-server");
 const webpack = require("webpack");
 const clearConsole = require("react-dev-utils/clearConsole");
 
-const {
-  autoConsoleClearEnabled,
-  legacyBuildDisabled,
-} = require("../helpers/buildConfigHelpers");
+const { autoConsoleClearEnabled } = require("../helpers/buildConfigHelpers");
 const { prepareWebpackConfig } = require("../helpers/prepareWebpackConfig");
 const { getCompiler } = require("../helpers/devServerHelpers");
 const isInteractive = process.stdout.isTTY && autoConsoleClearEnabled();
@@ -31,9 +28,7 @@ prepareWebpackConfig("development").then((webpackConfig) => {
     webpack,
   });
 
-  const devServerConfig = legacyBuildDisabled()
-    ? webpackConfig.devServer
-    : webpackConfig[0].devServer;
+  const devServerConfig = webpackConfig.devServer;
 
   const devServer = new WebpackDevServer(devServerConfig, compiler);
 

diff --git a/packages/pv-scripts/webpack/base/module.js → ...pv-scripts/webpack/base/combinedConfig.js b/packages/pv-scripts/webpack/base/module.js → ...pv-scripts/webpack/base/combinedConfig.js
@@ -1,8 +1,8 @@
 const { merge } = require("webpack-merge");
 
 // Settings
-const moduleEntrySettings = require("./settings/entry/module");
-const moduleOutputSettings = require("./settings/output/module");
+const entrySettings = require("./settings/entry");
+const outputSettings = require("./settings/output");
 const baseSettings = require("./settings/baseSettings");
 const contextSettings = require("./settings/context");
 const resolveSettings = require("./settings/resolve");
@@ -28,14 +28,14 @@ const {
 const { useTS, copyStaticFiles, cleanDest, enableTypeCheck } = getBuildConfig();
 
 module.exports = merge(
-  moduleEntrySettings,
-  moduleOutputSettings,
+  entrySettings,
+  outputSettings,
   baseSettings,
   contextSettings,
   resolveSettings,
   performanceSettings,
   cleanDest ? cleanDestTask : {},
-  getJSLoader("module"),
+  getJSLoader(),
   useTS && enableTypeCheck ? tsTypeChecking : {},
   compileCSS,
   compileShadowCSS,

diff --git a/packages/pv-scripts/webpack/base/legacy.js b/packages/pv-scripts/webpack/base/legacy.js
diff --git a/...pts/webpack/base/settings/entry/module.js → ...pv-scripts/webpack/base/settings/entry.js b/...pts/webpack/base/settings/entry/module.js → ...pv-scripts/webpack/base/settings/entry.js
@@ -1,8 +1,8 @@
-const { jsEntry, cssEntry } = require("../../../../helpers/paths");
+const { jsEntry, cssEntry } = require("../../../helpers/paths");
 const {
   getAppName,
   shouldAddCssEntry,
-} = require("../../../../helpers/buildConfigHelpers");
+} = require("../../../helpers/buildConfigHelpers");
 
 const getEntries = () => {
   const entries = [jsEntry()];

diff --git a/packages/pv-scripts/webpack/base/settings/entry/legacy.js b/packages/pv-scripts/webpack/base/settings/entry/legacy.js
diff --git a/...ts/webpack/base/settings/output/module.js → ...v-scripts/webpack/base/settings/output.js b/...ts/webpack/base/settings/output/module.js → ...v-scripts/webpack/base/settings/output.js
@@ -1,8 +1,8 @@
-const { appTarget, publicPath } = require("../../../../helpers/paths");
+const { appTarget, publicPath } = require("../../../helpers/paths");
 const {
   shouldAddContentHash,
   getAppName,
-} = require("../../../../helpers/buildConfigHelpers");
+} = require("../../../helpers/buildConfigHelpers");
 
 module.exports = {
   output: {
@@ -13,6 +13,6 @@ module.exports = {
       ? "js/[name].[contenthash].js"
       : "js/[name].js",
     chunkFilename: "resources/js/chunks/[name].[chunkhash].js",
-    assetModuleFilename: "resources/modern/[base]",
+    assetModuleFilename: "resources/[base]",
   },
 };