feat: mfsu support assets files (umijs#6981)

sorrycc · web-flow · commit 51adeef1a1f0 · 2021-07-14T12:14:38.000+08:00
diff --git a/packages/bundler-webpack/src/getConfig/getConfig.ts b/packages/bundler-webpack/src/getConfig/getConfig.ts
@@ -298,6 +298,8 @@ export default async function getConfig(
       }),
     );
 
+  const staticDir = mfsu ? 'mf-static' : 'static';
+
   // prettier-ignore
   webpackConfig.module
     .rule('images')
@@ -306,13 +308,13 @@ export default async function getConfig(
       .loader(require.resolve('@umijs/deps/compiled/url-loader'))
       .options({
         limit: config.inlineLimit || 10000,
-        name: 'static/[name].[hash:8].[ext]',
+        name: `${staticDir}/[name].[hash:8].[ext]`,
         // require 图片的时候不用加 .default
         esModule: false,
         fallback: {
           loader: require.resolve('@umijs/deps/compiled/file-loader'),
           options: {
-            name: 'static/[name].[hash:8].[ext]',
+            name: `${staticDir}/[name].[hash:8].[ext]`,
             esModule: false,
           },
         }
@@ -325,7 +327,7 @@ export default async function getConfig(
     .use('file-loader')
       .loader(require.resolve('@umijs/deps/compiled/file-loader'))
       .options({
-        name: 'static/[name].[hash:8].[ext]',
+        name: `${staticDir}/[name].[hash:8].[ext]`,
         esModule: false,
       });
 
@@ -336,7 +338,7 @@ export default async function getConfig(
     .use('file-loader')
       .loader(require.resolve('@umijs/deps/compiled/file-loader'))
       .options({
-        name: 'static/[name].[hash:8].[ext]',
+        name: `${staticDir}/[name].[hash:8].[ext]`,
         esModule: false,
       });
 
diff --git a/packages/preset-built-in/src/plugins/features/mfsu/getDepReExportContent.ts b/packages/preset-built-in/src/plugins/features/mfsu/getDepReExportContent.ts
@@ -8,27 +8,34 @@ export async function getDepReExportContent(opts: {
   filePath?: string;
   importFrom: string;
 }) {
+  // Support CSS
   if (
     opts.filePath &&
     /\.(css|less|scss|sass|stylus|styl)$/.test(opts.filePath)
   ) {
     return `import '${opts.importFrom}';`;
   }
 
+  // Support Assets Files
+  if (
+    opts.filePath &&
+    /\.(json|svg|png|jpe?g|gif|webp|ico|eot|woff|woff2|ttf|txt|text|md)$/.test(
+      opts.filePath,
+    )
+  ) {
+    return `
+import _ from '${opts.importFrom}';
+export default _;`.trim();
+  }
+
   try {
-    if (opts.filePath && !/\.(js|jsx|mjs|ts|tsx|json)$/.test(opts.filePath)) {
+    if (opts.filePath && !/\.(js|jsx|mjs|ts|tsx)$/.test(opts.filePath)) {
       const matchResult = opts.filePath.match(/\.([a-zA-Z]+)$/);
       throw new Error(
         `${matchResult ? matchResult[0] : 'file type'} not support!`,
       );
     }
 
-    if (isJsonFile(opts.filePath)) {
-      return [`import _ from '${opts.importFrom}';`, `export default _;`].join(
-        '\n',
-      );
-    }
-
     const { exports, isCJS } = await parseWithCJSSupport(
       opts.content,
       opts.filePath,
@@ -137,10 +144,6 @@ export const cjsModeEsmParser = (code: string) => {
     .map((result) => result[1]);
 };
 
-function isJsonFile(filePath?: string) {
-  return filePath && filePath.endsWith('.json');
-}
-
 async function parseWithCJSSupport(content: string, filePath?: string) {
   // Support tsx and jsx
   if (filePath && /\.(tsx|jsx)$/.test(filePath)) {
diff --git a/packages/preset-built-in/src/plugins/features/mfsu/mfsu.ts b/packages/preset-built-in/src/plugins/features/mfsu/mfsu.ts
@@ -253,7 +253,11 @@ export default function (api: IApi) {
   api.addBeforeMiddlewares(() => {
     return (req, res, next) => {
       const path = req.path;
-      if (path.startsWith('/mf-va_') || path.startsWith('/mf-dep_')) {
+      if (
+        path.startsWith('/mf-va_') ||
+        path.startsWith('/mf-dep_') ||
+        path.startsWith('/mf-static/')
+      ) {
         depBuilder.onBuildComplete(() => {
           const filePath = path
             .replace(new RegExp(`^${publicPath}`), '/')
