chore: polish @umijs/deps usage (#6166)

* chore: delete babel related deps

* feat: add @pmmmwh/react-refresh-webpack-plugin

* chore: code style

* feat: built-in terser-webpack-plugin

* feat: use more deps from @umijs/deps

jest.config.js

@@ -1,11 +1,20 @@
+const {
+  files,
+  getFileName,
+} = require('./packages/bundler-webpack/lib/requireHook');
+
+const webpackModuleNameMapper = files.reduce((memo, file) => {
+  const fileName = getFileName(file);
+  memo[`^${file}$`] = `@umijs/deps/compiled/webpack/${fileName}`;
+  return memo;
+}, {});
+
 module.exports = {
   // disable css files mock for bundler-webpack's css import tests
   moduleNameMapper: {
     // terser-webpack-plugin
     '^webpack$': '@umijs/deps/compiled/webpack',
-    '^webpack/lib/Compilation$': '@umijs/deps/compiled/webpack/Compilation',
-    '^webpack/lib/RequestShortener$':
-      '@umijs/deps/compiled/webpack/RequestShortener',
+    ...webpackModuleNameMapper,
   },
   transformIgnorePatterns: ['/node_modules/(?!.*@babel)[^/]+?/'],
   collectCoverageFrom(memo) {

packages/bundler-webpack/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@umijs/bundler-utils": "3.4.0-beta.1",
-    "@umijs/deps": "0.2.18",
+    "@umijs/deps": "0.2.21",
     "@umijs/types": "3.4.0-beta.1",
     "@umijs/utils": "3.4.0-beta.1",
     "normalize-url": "1.9.1",
@@ -43,7 +43,9 @@
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.2",
-    "terser-webpack-plugin": "4.2.3",
+    "jest-worker": "26.6.2",
+    "terser": "5.6.0",
+    "webpack-sources": "^1.4.3",
     "webpack-chain": "6.5.1"
   },
   "bin": {

packages/bundler-webpack/src/getConfig/getConfig.ts

@@ -526,7 +526,7 @@ export default async function getConfig(
       } else if (!opts.__disableTerserForTest) {
         webpackConfig.optimization
           .minimizer('terser')
-          .use(require.resolve('terser-webpack-plugin'), [
+          .use(require.resolve('../webpack/plugins/terser-webpack-plugin'), [
             {
               terserOptions: deepmerge(
                 terserOptions,

packages/bundler-webpack/src/index.ts

@@ -12,7 +12,7 @@ interface IOpts {
 }
 
 defaultWebpack.init();
-require('./requireHook');
+require('./requireHook').init();
 
 class Bundler {
   static id = 'webpack';

packages/bundler-webpack/src/requireHook.ts

@@ -1,27 +1,48 @@
-// @ts-ignore
-const hookPropertyMap = new Map(
-  [
-    ['webpack', '@umijs/deps/compiled/webpack'],
-    ['webpack/lib/Compilation', '@umijs/deps/compiled/webpack/Compilation'],
+export const files = [
+  'webpack/lib/Compilation',
+  'webpack/lib/dependencies/ConstDependency',
+  'webpack/lib/javascript/JavascriptParserHelpers',
+  'webpack/lib/LibraryTemplatePlugin',
+  'webpack/lib/node/NodeTargetPlugin',
+  'webpack/lib/node/NodeTemplatePlugin',
+  'webpack/lib/NormalModule',
+  'webpack/lib/RequestShortener',
+  'webpack/lib/RuntimeGlobals',
+  'webpack/lib/RuntimeModule',
+  'webpack/lib/optimize/LimitChunkCountPlugin',
+  'webpack/lib/ParserHelpers',
+  'webpack/lib/SingleEntryPlugin',
+  'webpack/lib/Template',
+];
+
+export function getFileName(filePath: string) {
+  return filePath.split('/').slice(-1)[0];
+}
+
+export function init() {
+  const filesMap = files.map((file) => {
+    const fileName = getFileName(file);
+    return [file, `@umijs/deps/compiled/webpack/${fileName}`];
+  });
+
+  const hookPropertyMap = new Map(
     [
-      'webpack/lib/RequestShortener',
-      '@umijs/deps/compiled/webpack/RequestShortener',
-    ],
-    // ['webpack-sources', '@umijs/deps/compiled/webpack/sources'],
-  ].map(([request, replacement]) => [request, require.resolve(replacement)]),
-);
+      ['webpack', '@umijs/deps/compiled/webpack'],
+      ...filesMap,
+      // ['webpack-sources', '@umijs/deps/compiled/webpack/sources'],
+    ].map(([request, replacement]) => [request, require.resolve(replacement)]),
+  );
 
-// @ts-ignore
-const mod = require('module');
-// @ts-ignore
-const resolveFilename = mod._resolveFilename;
-mod._resolveFilename = function (
-  request: string,
-  parent: any,
-  isMain: boolean,
-  options: any,
-) {
-  const hookResolved = hookPropertyMap.get(request);
-  if (hookResolved) request = hookResolved;
-  return resolveFilename.call(mod, request, parent, isMain, options);
-};
+  const mod = require('module');
+  const resolveFilename = mod._resolveFilename;
+  mod._resolveFilename = function (
+    request: string,
+    parent: any,
+    isMain: boolean,
+    options: any,
+  ) {
+    const hookResolved = hookPropertyMap.get(request);
+    if (hookResolved) request = hookResolved;
+    return resolveFilename.call(mod, request, parent, isMain, options);
+  };
+}

packages/bundler-webpack/src/webpack/plugins/terser-webpack-plugin.ts

@@ -0,0 +1 @@
+module.exports = require('./terser-webpack-plugin/src').default;

packages/bundler-webpack/src/webpack/plugins/terser-webpack-plugin/LICENSE

@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/bundler-webpack/src/webpack/plugins/terser-webpack-plugin/package.json

@@ -0,0 +1,3 @@
+{
+  "version": "4.2.3"
+}

packages/bundler-webpack/src/webpack/plugins/terser-webpack-plugin/src/Webpack4Cache.js

@@ -0,0 +1,130 @@
+import os from 'os';
+
+import cacache from '@umijs/deps/compiled/cacache';
+import findCacheDir from '@umijs/deps/compiled/find-cache-dir';
+import serialize from '@umijs/deps/compiled/serialize-javascript';
+
+export default class Webpack4Cache {
+  constructor(compilation, options, weakCache) {
+    this.cache =
+      options.cache === true
+        ? Webpack4Cache.getCacheDirectory()
+        : options.cache;
+    this.weakCache = weakCache;
+  }
+
+  static getCacheDirectory() {
+    return findCacheDir({ name: 'terser-webpack-plugin' }) || os.tmpdir();
+  }
+
+  async get(cacheData, { RawSource, ConcatSource, SourceMapSource }) {
+    if (!this.cache) {
+      // eslint-disable-next-line no-undefined
+      return undefined;
+    }
+
+    const weakOutput = this.weakCache.get(cacheData.inputSource);
+
+    if (weakOutput) {
+      return weakOutput;
+    }
+
+    // eslint-disable-next-line no-param-reassign
+    cacheData.cacheIdent =
+      cacheData.cacheIdent || serialize(cacheData.cacheKeys);
+
+    let cachedResult;
+
+    try {
+      cachedResult = await cacache.get(this.cache, cacheData.cacheIdent);
+    } catch (ignoreError) {
+      // eslint-disable-next-line no-undefined
+      return undefined;
+    }
+
+    cachedResult = JSON.parse(cachedResult.data);
+
+    if (cachedResult.target === 'comments') {
+      return new ConcatSource(cachedResult.value);
+    }
+
+    const {
+      code,
+      name,
+      map,
+      input,
+      inputSourceMap,
+      extractedComments,
+      banner,
+      shebang,
+    } = cachedResult;
+
+    if (map) {
+      cachedResult.source = new SourceMapSource(
+        code,
+        name,
+        map,
+        input,
+        inputSourceMap,
+        true,
+      );
+    } else {
+      cachedResult.source = new RawSource(code);
+    }
+
+    if (banner) {
+      cachedResult.source = new ConcatSource(
+        shebang ? `${shebang}\n` : '',
+        `/*! ${banner} */\n`,
+        cachedResult.source,
+      );
+    }
+
+    if (extractedComments) {
+      cachedResult.extractedCommentsSource = new RawSource(extractedComments);
+    }
+
+    return cachedResult;
+  }
+
+  async store(cacheData) {
+    if (!this.cache) {
+      // eslint-disable-next-line no-undefined
+      return undefined;
+    }
+
+    if (!this.weakCache.has(cacheData.inputSource)) {
+      if (cacheData.target === 'comments') {
+        this.weakCache.set(cacheData.inputSource, cacheData.output);
+      } else {
+        this.weakCache.set(cacheData.inputSource, cacheData);
+      }
+    }
+
+    let data;
+
+    if (cacheData.target === 'comments') {
+      data = {
+        target: cacheData.target,
+        value: cacheData.output.source(),
+      };
+    } else {
+      data = {
+        code: cacheData.code,
+        name: cacheData.name,
+        map: cacheData.map,
+        input: cacheData.input,
+        inputSourceMap: cacheData.inputSourceMap,
+        banner: cacheData.banner,
+        shebang: cacheData.shebang,
+      };
+
+      if (cacheData.extractedCommentsSource) {
+        data.extractedComments = cacheData.extractedCommentsSource.source();
+        data.commentsFilename = cacheData.commentsFilename;
+      }
+    }
+
+    return cacache.put(this.cache, cacheData.cacheIdent, JSON.stringify(data));
+  }
+}

packages/bundler-webpack/src/webpack/plugins/terser-webpack-plugin/src/Webpack5Cache.js

@@ -0,0 +1,35 @@
+export default class Cache {
+  constructor(compilation) {
+    this.cache = compilation.getCache('TerserWebpackPlugin');
+  }
+
+  async get(cacheData) {
+    // eslint-disable-next-line no-param-reassign
+    cacheData.eTag =
+      cacheData.eTag || Array.isArray(cacheData.inputSource)
+        ? cacheData.inputSource
+            .map((item) => this.cache.getLazyHashedEtag(item))
+            .reduce((previousValue, currentValue) =>
+              this.cache.mergeEtags(previousValue, currentValue),
+            )
+        : this.cache.getLazyHashedEtag(cacheData.inputSource);
+
+    return this.cache.getPromise(cacheData.name, cacheData.eTag);
+  }
+
+  async store(cacheData) {
+    let data;
+
+    if (cacheData.target === 'comments') {
+      data = cacheData.output;
+    } else {
+      data = {
+        source: cacheData.source,
+        extractedCommentsSource: cacheData.extractedCommentsSource,
+        commentsFilename: cacheData.commentsFilename,
+      };
+    }
+
+    return this.cache.storePromise(cacheData.name, cacheData.eTag, data);
+  }
+}