chore: migrate from babel to esbuild loader (#1848)

* chore: migrate from babel to esbuild loader * fix cypress tests
Redocly · Jan 25, 2022 · 35418b1 · 35418b1
1 parent b74dcde
commit 35418b1
Show file tree

Hide file tree

Showing 9 changed files with 863 additions and 582 deletions.
diff --git a/config/webpack-utils.ts b/config/webpack-utils.ts
@@ -1,46 +1,5 @@
 import * as webpack from 'webpack';
 
-export function getBabelLoader({useBuiltIns, hot}: {useBuiltIns: boolean, hot?: boolean}) {
-  return {
-    loader: 'babel-loader',
-    options: {
-      babelrc: false,
-      sourceType: 'unambiguous',
-      presets: [
-        [
-          '@babel/preset-env',
-          {
-            useBuiltIns: useBuiltIns ? 'usage' : false,
-            corejs: 3,
-            exclude: ['transform-typeof-symbol'],
-            targets: 'defaults',
-            modules: false,
-          },
-        ],
-        ['@babel/preset-react', { development: false, runtime: 'classic' }],
-        '@babel/preset-typescript',
-      ],
-      plugins: [
-        ['@babel/plugin-proposal-decorators', { legacy: true }],
-        ['@babel/plugin-proposal-class-properties', { loose: false }],
-        [
-          '@babel/plugin-transform-runtime',
-          {
-            corejs: false,
-            helpers: true,
-            // eslint-disable-next-line import/no-internal-modules
-            version: require('@babel/runtime/package.json').version,
-            regenerator: true,
-          },
-        ],
-        '@babel/plugin-proposal-optional-chaining',
-        '@babel/plugin-proposal-nullish-coalescing-operator',
-        hot ? 'react-hot-loader/babel' : undefined,
-      ].filter(Boolean)
-    },
-  };
-}
-
 export function webpackIgnore(regexp) {
-  return new webpack.NormalModuleReplacementPlugin(regexp, require.resolve('lodash/noop.js'));
+  return new webpack.NormalModuleReplacementPlugin(regexp, require.resolve('lodash.noop'));
 }
diff --git a/custom.d.ts b/custom.d.ts
@@ -23,3 +23,5 @@ declare var reactHotLoaderGlobal: any;
 interface Element {
   scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
 }
+
+type GenericObject = Record<string, any>;
diff --git a/demo/webpack.config.ts b/demo/webpack.config.ts
@@ -3,7 +3,7 @@ import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 import { resolve } from 'path';
 import * as webpack from 'webpack';
-import { getBabelLoader, webpackIgnore } from '../config/webpack-utils';
+import { webpackIgnore } from '../config/webpack-utils';
 
 const VERSION = JSON.stringify(require('../package.json').version);
 const REVISION = JSON.stringify(
@@ -46,6 +46,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
     extensions: ['.ts', '.tsx', '.js', '.json'],
     fallback: {
       path: require.resolve('path-browserify'),
+      buffer: require.resolve('buffer'),
       http: false,
       fs: false,
       os: false,
@@ -72,33 +73,28 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
     rules: [
       { test: [/\.eot$/, /\.gif$/, /\.woff$/, /\.svg$/, /\.ttf$/], use: 'null-loader' },
       {
-        test: /\.tsx?$/,
-        use: [getBabelLoader({ useBuiltIns: true, hot: true })],
-        exclude: {
-          and: [/node_modules/],
-          not: {
-            or: [
-              /swagger2openapi/,
-              /reftools/,
-              /openapi-sampler/,
-              /mobx/,
-              /oas-resolver/,
-              /oas-kit-common/,
-              /oas-schema-walker/,
-              /\@redocly\/openapi-core/,
-              /colorette/,
-            ],
-          },
+        test: /\.(tsx?|[cm]?js)$/,
+        loader: 'esbuild-loader',
+        options: {
+          loader: 'tsx',
+          target: 'es2015',
+          tsconfigRaw: require('../tsconfig.json'),
         },
+        exclude: [/node_modules/],
       },
       {
         test: /\.css$/,
-        use: {
-          loader: 'css-loader',
-          options: {
-            sourceMap: true,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'esbuild-loader',
+            options: {
+              loader: 'css',
+              minify: true,
+            },
           },
-        },
+        ],
       },
     ],
   },
@@ -119,6 +115,9 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
         ? 'benchmark/index.html'
         : 'demo/index.html',
     }),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
     new ForkTsCheckerWebpackPlugin({ logger: { infrastructure: 'silent', issues: 'console' } }),
     webpackIgnore(/js-yaml\/dumper\.js$/),
     webpackIgnore(/json-schema-ref-parser\/lib\/dereference\.js/),