feat: auto externals support local external files

packages/umi-plugin-auto-externals/README.md

@@ -1,6 +1,6 @@
 # umi-plugin-auto-externals
 
-A simple way to external in umi.
+A simple way to [external](https://webpack.js.org/configuration/externals/) packages in umi.
 
 ## Usage
 
@@ -37,6 +37,7 @@ https://github.com/umijs/auto-external-packages
 ### urlTemplate
 
 * Type: `String`
+* Default: `{{ publicPath }}externals/{{ library }}@{{ version }}/{{ path }}`
 
 If you want to use your own CDN service, you need to config this item.
 
@@ -49,3 +50,7 @@ For example: `https://unpkg.com/{{ library }}@{{ version }}/{{ path }}`
 * Type: `Boolean`
 
 If checkOnline is true, we will check all urls if online.
+
+## LICENSE
+
+MIT

packages/umi-plugin-auto-externals/package.json

@@ -20,6 +20,7 @@
   ],
   "dependencies": {
     "auto-external-packages": "^1.0.0",
+    "copy-webpack-plugin": "5.0.3",
     "semver": "6.0.0",
     "urllib": "2.33.3"
   },

packages/umi-plugin-auto-externals/src/index.ts

@@ -1,13 +1,18 @@
 import { IApi } from 'umi-types';
-import { join } from 'path';
+import { join, dirname } from 'path';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import { existsSync } from 'fs';
+import assert from 'assert';
 import { IOpts } from './types';
 import { getExternalData, onlineCheck } from './util';
 
+const PATH_KEY = 'externals';
+
 export default function(
   api: IApi,
   {
     packages = [],
-    urlTemplate = 'https://unpkg.com/{{ library }}@{{ version }}/{{ path }}',
+    urlTemplate = `{{ publicPath }}${PATH_KEY}/{{ library }}@{{ version }}/{{ path }}`,
     checkOnline = false,
   }: IOpts,
 ) {
@@ -18,6 +23,7 @@ export default function(
     config,
     packages,
     urlTemplate,
+    publicPath: config.publicPath || '/',
   });
 
   debug('User external data:');
@@ -50,16 +56,61 @@ export default function(
     (accumulator, current) => accumulator.concat(current.styles),
     [],
   );
-  api.addHTMLLink(() =>
-    styles.map(href => ({
+  api.addHTMLLink(() => {
+    return styles.map(href => ({
       rel: 'stylesheet',
       href,
-    })),
-  );
+    }));
+  });
+
+  // 如果 urlTemplate 不是 cdn，输出到 dist 目录下
+  api.modifyWebpackConfig(webpackConfig => {
+    const { cwd } = api;
+    if (!/^https?:\/\//.test(urlTemplate)) {
+      // TODO: 不和前面的 urlTemplate 有耦合
+      assert(
+        urlTemplate.includes('{{ library }}@{{ version }}'),
+        `urlTemplate config should includes {{ library }}@{{ version }}`,
+      );
+      const copyConfig = scripts.concat(styles).map(path => {
+        const [nameVersion, ...relPathArr] = path
+          .split(`${PATH_KEY}/`)[1]
+          .split('/');
+        const relPath = relPathArr.join('/');
+        const [name] = nameVersion.split('@');
+        return {
+          from: getRealPath({
+            name,
+            relPath,
+            alias: webpackConfig.resolve.alias,
+            cwd,
+          }),
+          to: dirname(join(webpackConfig.output.path, path)),
+        };
+      });
+
+      webpackConfig.plugins.push(new CopyWebpackPlugin(copyConfig));
+    }
+    return webpackConfig;
+  });
 
   // TODO: 传递 exclude
 }
 
+function getRealPath({ name, relPath, alias, cwd }) {
+  let realPath = null;
+  if (alias[name]) {
+    realPath = join(alias[name], relPath);
+  } else {
+    realPath = join(cwd, 'node_modules', name, relPath);
+  }
+  assert(
+    existsSync(realPath),
+    `Copy to output path failed: ${realPath} not exists`,
+  );
+  return realPath;
+}
+
 function getWebpackExternalConfig(configs) {
   const res = [];
   const objectConfig = {};

packages/umi-plugin-auto-externals/src/util/getExternalData.ts

@@ -16,6 +16,7 @@ interface IGetExternalDataParams {
   packages: string[] | Boolean;
   config: IConfig;
   urlTemplate?: string;
+  publicPath?: string;
 }
 
 function packagesToArray(packages: string[] | Boolean): string[] {
@@ -99,13 +100,15 @@ function renderUrls({
   isDevelopment = false,
   urlTemplate = '',
   version = '',
+  publicPath = '/',
 }) {
   const targetUrls = isDevelopment ? urls.development : urls.production;
   return (targetUrls || []).map(path => {
     const model = {
       library: dependencie,
       path,
       version,
+      publicPath,
     };
     return urlTemplate.replace(/{{ (\w+) }}/g, (str, key) => model[key] || str);
   });
@@ -116,6 +119,7 @@ function getConfigItem({
   urlTemplate,
   version,
   isDevelopment,
+  publicPath,
 }): IExternalData {
   const {
     key,
@@ -130,6 +134,7 @@ function getConfigItem({
     isDevelopment,
     urlTemplate,
     version,
+    publicPath,
   };
 
   const [
@@ -153,7 +158,7 @@ function getConfigItem({
 function getExternalData(args: IGetExternalDataParams): IExternalData[] {
   configValidate(args);
 
-  const { pkg, versionInfos, packages, urlTemplate } = args;
+  const { pkg, versionInfos, packages, urlTemplate, publicPath } = args;
   const isDevelopment = process.env.NODE_ENV === 'development';
   const externalDependencies = packagesToArray(packages);
   const allExternalVersions = getAllKeyVersions(
@@ -168,6 +173,7 @@ function getExternalData(args: IGetExternalDataParams): IExternalData[] {
       urlTemplate,
       version: allExternalVersions[key],
       isDevelopment,
+      publicPath,
     }),
   );
 }

packages/umi-plugin-auto-externals/src/util/index.ts

@@ -6,7 +6,12 @@ import error from './error';
 async function onlineCheck(configs) {
   let urls = [];
   (configs || []).forEach(({ scripts, styles }) => {
-    urls = urls.concat(scripts).concat(styles);
+    urls = urls
+      .concat(scripts)
+      .concat(styles)
+      .filter(url => {
+        return /^https?:\/\//.test(url);
+      });
   });
   if (!urls.length) {
     return;