@umijs/preset-umi 4.0.0-beta.13 → 4.0.0-beta.17

package/dist/commands/build.js

@@ -110,7 +110,7 @@ umi build --clean
                 const { vite } = api.args;
                 const markupArgs = yield (0, getMarkupArgs_1.getMarkupArgs)({ api });
                 // @ts-ignore
-                const markup = yield (0, server_1.getMarkup)(Object.assign(Object.assign({}, markupArgs), { scripts: ['/umi.js'].concat(markupArgs.scripts), esmScript: !!opts.config.esm || vite, path: '/' }));
+                const markup = yield (0, server_1.getMarkup)(Object.assign(Object.assign({}, markupArgs), { styles: ['/umi.css'].concat(markupArgs.styles), scripts: ['/umi.js'].concat(markupArgs.scripts), esmScript: !!opts.config.esm || vite, path: '/' }));
                 (0, fs_1.writeFileSync)((0, path_1.join)(api.paths.absOutputPath, 'index.html'), markup, 'utf-8');
                 utils_1.logger.event('build index.html');
                 // print size

package/dist/commands/dev/createRouteMiddleware.js

@@ -28,11 +28,11 @@ function createRouteMiddleware(opts) {
             // add noshim attr for skip importmap shim logic for this modules
             { content: viteRefreshScript, noshim: '' },
             { src: '/@vite/client', noshim: '' },
-            '/.umi/umi.ts',
+            opts.api.appData.hasSrcDir ? '/src/.umi/umi.ts' : '/.umi/umi.ts',
         ];
         const markupArgs = yield (0, getMarkupArgs_1.getMarkupArgs)(opts);
         // @ts-ignore
-        const requestHandler = yield (0, server_1.createRequestHandler)(Object.assign(Object.assign({}, markupArgs), { scripts: (vite ? viteScripts : ['/umi.js']).concat(markupArgs.scripts), esmScript: vite }));
+        const requestHandler = yield (0, server_1.createRequestHandler)(Object.assign(Object.assign({}, markupArgs), { styles: ['/umi.css'].concat(markupArgs.styles), scripts: (vite ? viteScripts : ['/umi.js']).concat(markupArgs.scripts), esmScript: vite }));
         requestHandler(req, res, next);
     });
 }

package/dist/commands/dev/dev.js

@@ -56,7 +56,7 @@ umi dev
 PORT=8888 umi dev
 `,
         fn() {
-            var _a;
+            var _a, _b;
             return __awaiter(this, void 0, void 0, function* () {
                 const enableVite = api.args.vite;
                 // clear tmp except cache
@@ -102,9 +102,10 @@ PORT=8888 umi dev
                     key: 'addTmpGenerateWatcherPaths',
                     initialValue: [
                         absPagesPath,
+                        !api.config.routes && ((_a = api.config.conventionRoutes) === null || _a === void 0 ? void 0 : _a.base),
                         (0, path_1.join)(absSrcPath, 'layouts'),
                         ...(0, watch_1.expandJSPaths)((0, path_1.join)(absSrcPath, 'app')),
-                    ],
+                    ].filter(Boolean),
                 });
                 utils_1.lodash.uniq(watcherPaths.map(utils_1.winPath)).forEach((p) => {
                     (0, watch_1.watch)({
@@ -238,7 +239,12 @@ PORT=8888 umi dev
                             key: 'onDevCompileDone',
                             args: opts,
                         });
-                    }, mfsuWithESBuild: (_a = api.config.mfsu) === null || _a === void 0 ? void 0 : _a.esbuild });
+                    }, mfsuWithESBuild: (_b = api.config.mfsu) === null || _b === void 0 ? void 0 : _b.esbuild, cache: {
+                        buildDependencies: [
+                            api.pkgPath,
+                            api.service.configManager.mainConfigFile || '',
+                        ].filter(Boolean),
+                    } });
                 if (enableVite) {
                     yield bundlerVite.dev(opts);
                 }

package/dist/commands/dev/getMarkupArgs.d.ts

@@ -2,6 +2,8 @@ import { IApi } from '../../types';
 export declare function getMarkupArgs(opts: {
     api: IApi;
 }): Promise<{
+    mountElementId: any;
+    base: any;
     routes: any;
     favicon: any;
     headScripts: any;

package/dist/commands/dev/getMarkupArgs.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMarkupArgs = void 0;
 const cheerio_1 = __importDefault(require("@umijs/utils/compiled/cheerio"));
 function getMarkupArgs(opts) {
+    var _a;
     return __awaiter(this, void 0, void 0, function* () {
         const headScripts = yield opts.api.applyPlugins({
             key: 'addHTMLHeadScripts',
@@ -41,6 +42,8 @@ function getMarkupArgs(opts) {
             initialValue: opts.api.config.favicon,
         });
         return {
+            mountElementId: opts.api.config.mountElementId,
+            base: ((_a = opts.api.config.history) === null || _a === void 0 ? void 0 : _a.type) === 'browser' ? opts.api.config.base : '/',
             routes: opts.api.appData.routes,
             favicon,
             headScripts,

package/dist/commands/generate/prettier.js

@@ -8,8 +8,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const core_1 = require("@umijs/core");
+const utils_1 = require("@umijs/utils");
+const assert_1 = __importDefault(require("assert"));
 const fs_1 = require("fs");
 const path_1 = require("path");
 exports.default = (api) => {
@@ -23,9 +28,36 @@ exports.default = (api) => {
             // 存在 .prettierrc，不开启
             return !(0, fs_1.existsSync)((0, path_1.join)(api.paths.cwd, '.prettierrc'));
         },
-        fn: (options) => __awaiter(void 0, void 0, void 0, function* () {
-            // TODO
-            console.log(options);
+        fn: () => __awaiter(void 0, void 0, void 0, function* () {
+            // 1、修改 package.json，加上 prettier 和插件
+            api.pkg.devDependencies = Object.assign(Object.assign({}, api.pkg.devDependencies), { prettier: '^2', 'prettier-plugin-organize-imports': '^2', 'prettier-plugin-packagejson': '^2' });
+            (0, fs_1.writeFileSync)(api.pkgPath, JSON.stringify(api.pkg, null, 2));
+            utils_1.logger.info('Write package.json');
+            // 2、添加 .prettierrc 和 .prettierignore
+            (0, fs_1.writeFileSync)((0, path_1.join)(api.cwd, '.prettierrc'), `
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
+}
+`.trimLeft());
+            utils_1.logger.info('Write .prettierrc');
+            (0, fs_1.writeFileSync)((0, path_1.join)(api.cwd, '.prettierignore'), `
+node_modules
+.umi
+.umi-production
+`.trimLeft());
+            utils_1.logger.info('Write .prettierignore');
+            // 3、执行 npm install
+            const npmClient = api.userConfig.npmClient;
+            (0, assert_1.default)(npmClient, `npmClient is required in your config.`);
+            (0, utils_1.installWithNpmClient)({
+                npmClient,
+            });
+            utils_1.logger.info(`Install dependencies with ${npmClient}`);
         }),
     });
 };

package/dist/features/appData/appData.js

@@ -14,6 +14,7 @@ const utils_1 = require("@umijs/utils");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const watch_1 = require("../../commands/dev/watch");
+const scan_1 = require("../../libs/scan");
 const routes_1 = require("../tmpFiles/routes");
 exports.default = (api) => {
     api.modifyAppData((memo) => __awaiter(void 0, void 0, void 0, function* () {
@@ -29,6 +30,7 @@ exports.default = (api) => {
             version: require((0, path_1.join)(api.config.alias.react, 'package.json')).version,
         };
         memo.appJS = yield getAppJsInfo();
+        memo.vite = api.args.vite ? {} : undefined;
         return memo;
     }));
     // Execute earliest, so that other onGenerateFiles can get it
@@ -43,6 +45,31 @@ exports.default = (api) => {
         },
         stage: Number.NEGATIVE_INFINITY,
     });
+    // used in esmi and vite
+    api.register({
+        key: 'updateAppDataDeps',
+        fn() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const resolver = (0, scan_1.createResolver)({
+                    alias: api.config.alias,
+                });
+                api.appData.deps = yield (0, scan_1.scan)({
+                    entry: (0, path_1.join)(api.paths.absTmpPath, 'umi.ts'),
+                    externals: api.config.externals,
+                    resolver,
+                });
+                // FIXME: force include react & react-dom
+                if (api.appData.deps['react']) {
+                    api.appData.deps['react'].version = api.appData.react.version;
+                }
+                api.appData.deps['react-dom'] = {
+                    version: api.appData.react.version,
+                    matches: ['react-dom'],
+                    subpaths: [],
+                };
+            });
+        },
+    });
     function getAppJsInfo() {
         return __awaiter(this, void 0, void 0, function* () {
             for (const path of (0, watch_1.expandJSPaths)((0, path_1.join)(api.paths.absSrcPath, 'app'))) {

package/dist/features/configPlugins/configPlugins.js

@@ -16,8 +16,7 @@ function resolveProjectDep(opts) {
 exports.default = (api) => {
     const configDefaults = {
         alias: {
-            umi: process.env.UMI_DIR,
-            '@umijs/renderer-react': (0, path_1.dirname)(require.resolve('@umijs/renderer-react/package.json')),
+            umi: '@@/exports',
             react: resolveProjectDep({
                 pkg: api.pkg,
                 cwd: api.cwd,
@@ -34,6 +33,12 @@ exports.default = (api) => {
         externals: {},
         autoCSSModules: true,
         publicPath: '/',
+        mountElementId: 'root',
+        base: '/',
+        history: { type: 'browser' },
+        targets: {
+            chrome: 87,
+        },
     };
     const bundleSchemas = (0, schema_1.getSchemas)();
     const extraSchemas = (0, schema_2.getSchemas)();
@@ -55,7 +60,9 @@ exports.default = (api) => {
     }
     // api.paths is ready after register
     api.modifyConfig((memo, args) => {
-        memo.alias = Object.assign(Object.assign({}, memo.alias), { '@': args.paths.absSrcPath, '@@': args.paths.absTmpPath });
+        memo.alias = Object.assign(Object.assign({}, memo.alias), { '@': args.paths.absSrcPath, '@@': args.paths.absTmpPath, 
+            // like vite, use to pre-bundling dependencies in vite mode
+            '@fs': '/' });
         return memo;
     });
 };

package/dist/features/configPlugins/schema.js

@@ -4,13 +4,25 @@ exports.getSchemas = void 0;
 const utils_1 = require("@umijs/utils");
 function getSchemas() {
     return {
-        plugins: (Joi) => Joi.array().items(Joi.string()),
-        publicPath: (Joi) => Joi.string().regex(/\/$/).error(new Error('publicPath must end with /')),
+        base: (Joi) => Joi.string(),
+        conventionRoutes: (Joi) => Joi.object({
+            exclude: Joi.array().items(Joi.any()),
+            base: Joi.string(),
+        }),
         favicon: (Joi) => Joi.string(),
-        headScripts: (Joi) => Joi.array().items(Joi.alternatives(Joi.string())),
-        scripts: (Joi) => Joi.array().items(Joi.alternatives(Joi.string())),
+        headScripts: (Joi) => Joi.array(),
+        history: (Joi) => Joi.object({
+            type: Joi.string().valid('browser', 'hash', 'memory'),
+        }),
+        links: (Joi) => Joi.array(),
+        metas: (Joi) => Joi.array(),
+        mountElementId: (Joi) => Joi.string(),
         npmClient: (Joi) => Joi.string().valid(utils_1.NpmClientEnum.pnpm, utils_1.NpmClientEnum.tnpm, utils_1.NpmClientEnum.cnpm, utils_1.NpmClientEnum.yarn, utils_1.NpmClientEnum.npm),
+        plugins: (Joi) => Joi.array().items(Joi.string()),
+        publicPath: (Joi) => Joi.string().regex(/\/$/).error(new Error('publicPath must end with /')),
         routes: (Joi) => Joi.array().items(Joi.object()),
+        scripts: (Joi) => Joi.array(),
+        styles: (Joi) => Joi.array(),
     };
 }
 exports.getSchemas = getSchemas;

package/dist/features/esmi/Service.js

@@ -101,6 +101,7 @@ class ESMIService {
             });
             // get the build ticket id
             const ticketId = yield this.build(data);
+            utils_1.logger.info(`ticketId: ${ticketId}`);
             // continue to the next request after 2s
             const next = () => new Promise((resolve) => setTimeout(() => resolve(deferrer()), 2000));
             const deferrer = () => {

package/dist/features/esmi/esbuildPlugins/requireToImport.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from '@umijs/bundler-utils/compiled/esbuild';
+import type { DepOptimizationOptions } from 'vite';
+/**
+ * transform require call to import
+ */
+export default function requireToImportPlugin({ exclude, }: {
+    exclude: NonNullable<DepOptimizationOptions['exclude']>;
+}): Plugin;

package/dist/features/esmi/esbuildPlugins/requireToImport.js

@@ -0,0 +1,61 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("@umijs/utils/compiled/lodash");
+/**
+ * transform require call to import
+ */
+function requireToImportPlugin({ exclude, }) {
+    const regSafeExclude = exclude.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    const requireRegExp = new RegExp(`^(${regSafeExclude.join('|')})$`);
+    return {
+        name: 'preset-umi:esmi-require-to-import',
+        setup(build) {
+            // handler require calls for external deps
+            build.onResolve({
+                filter: requireRegExp,
+            }, (args) => __awaiter(this, void 0, void 0, function* () {
+                if (args.kind === 'require-call') {
+                    return {
+                        path: args.path,
+                        namespace: 'esmi-require-to-import',
+                        pluginData: {
+                            resolveDir: args.resolveDir,
+                        },
+                    };
+                }
+            }));
+            // replace load content
+            build.onLoad({
+                filter: /.*/,
+                namespace: 'esmi-require-to-import',
+            }, (args) => {
+                const { resolveDir } = args.pluginData || {};
+                const packageName = args.path;
+                const starSpecifier = `${(0, lodash_1.camelCase)(packageName)}Star`;
+                const defaultSpecifier = `${(0, lodash_1.camelCase)(packageName)}Default`;
+                return {
+                    resolveDir,
+                    contents: [
+                        `import * as ${starSpecifier} from '${packageName}';`,
+                        '',
+                        `const ${defaultSpecifier} = ${starSpecifier}.default ? ${starSpecifier}.default : ${starSpecifier};`,
+                        '',
+                        `export default ${defaultSpecifier};`,
+                        `export * from '${packageName}';`,
+                        '',
+                    ].join('\n'),
+                };
+            });
+        },
+    };
+}
+exports.default = requireToImportPlugin;

package/dist/features/esmi/esbuildPlugins/topLevelExternal.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from '@umijs/bundler-utils/compiled/esbuild';
+import type { DepOptimizationOptions } from 'vite';
+import type { createResolver } from '../../../libs/scan';
+/**
+ * only external top level import, exclude sub-path imports for esmi
+ * example:
+ *   - import from 'antd' will be externalized
+ *   - import from 'antd/dist/antd.less' will not be externalized
+ */
+export default function topLevelExternal({ exclude, resolver, }: {
+    exclude: NonNullable<DepOptimizationOptions['exclude']>;
+    resolver: ReturnType<typeof createResolver>;
+}): Plugin;

package/dist/features/esmi/esbuildPlugins/topLevelExternal.js

@@ -0,0 +1,37 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * only external top level import, exclude sub-path imports for esmi
+ * example:
+ *   - import from 'antd' will be externalized
+ *   - import from 'antd/dist/antd.less' will not be externalized
+ */
+function topLevelExternal({ exclude, resolver, }) {
+    const regSafeExclude = exclude.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    const subImportRegExp = new RegExp(`^(${regSafeExclude.join('|')})/`);
+    const extRegExp = /\.((?<!d)\.ts|jsx?|tsx)$/;
+    return {
+        name: 'preset-umi:esmi-top-level-external',
+        setup(build) {
+            build.onResolve({
+                filter: subImportRegExp,
+            }, (args) => __awaiter(this, void 0, void 0, function* () {
+                const resolved = yield resolver.resolve(args.resolveDir, args.path);
+                // only process javascript-like files
+                if (extRegExp.test(resolved)) {
+                    return { path: resolved };
+                }
+            }));
+        },
+    };
+}
+exports.default = topLevelExternal;

package/dist/features/esmi/esmi.js

@@ -16,8 +16,11 @@ const es_module_lexer_1 = require("@umijs/bundler-utils/compiled/es-module-lexer
 const magic_string_1 = __importDefault(require("magic-string"));
 const path_1 = require("path");
 const scan_1 = require("../../libs/scan");
+const requireToImport_1 = __importDefault(require("./esbuildPlugins/requireToImport"));
+const topLevelExternal_1 = __importDefault(require("./esbuildPlugins/topLevelExternal"));
 const Service_1 = __importDefault(require("./Service"));
 let importmap = { imports: {}, scopes: {} };
+let importmatches = {};
 /**
  * esmi vite plugin
  */
@@ -25,13 +28,36 @@ function esmi(opts) {
     return {
         name: 'preset-umi:esmi',
         configResolved(config) {
+            var _a, _b;
+            var _c, _d;
             const { include, exclude } = config.optimizeDeps;
+            (_a = (_c = config.optimizeDeps).include) !== null && _a !== void 0 ? _a : (_c.include = []);
             // do not pre-compile deps which will be loaded by importmap (for top-level deps)
             if (include === null || include === void 0 ? void 0 : include.length) {
-                config.optimizeDeps.include = include.filter((item) => !importmap.imports[item]);
+                config.optimizeDeps.include = include.filter((item) => !importmatches[item] && !importmap.imports[item]);
             }
-            // exclude pre-compile deps which within importmap by default (for nested deps)
-            config.optimizeDeps.exclude = (exclude || []).concat(Object.keys(importmap.imports).filter((item) => exclude === null || exclude === void 0 ? void 0 : exclude.includes(item)));
+            // exclude pre-compile deps
+            config.optimizeDeps.exclude = [
+                ...new Set([
+                    // deps from user config
+                    ...(exclude || []),
+                    // deps from local scan
+                    ...Object.keys(importmatches),
+                    // deps from esmi analyze result
+                    ...Object.keys(importmap.imports),
+                ]),
+            ];
+            // apply esbuild plugins
+            (_b = (_d = config.optimizeDeps).esbuildOptions) !== null && _b !== void 0 ? _b : (_d.esbuildOptions = {});
+            config.optimizeDeps.esbuildOptions.plugins = [
+                // transform require call to import
+                (0, requireToImport_1.default)({ exclude: config.optimizeDeps.exclude }),
+                // make sure vite only external top-level npm imports, and resolve sub-path npm imports
+                (0, topLevelExternal_1.default)({
+                    exclude: config.optimizeDeps.exclude,
+                    resolver: opts.resolver,
+                }),
+            ].concat(config.optimizeDeps.esbuildOptions.plugins || []);
         },
         transform(source) {
             try {
@@ -42,9 +68,17 @@ function esmi(opts) {
                 imports.forEach((item) => {
                     const { n: specifier, s: start, e: end } = item;
                     // replace npm package to CDN url for matched imports
-                    if (specifier && importmap.imports[specifier]) {
-                        s !== null && s !== void 0 ? s : (s = new magic_string_1.default(source));
-                        s.overwrite(start, end, importmap.imports[specifier]);
+                    if (specifier) {
+                        const replacement = 
+                        // search from local scan matches first (for alias)
+                        (importmatches[specifier] &&
+                            importmap.imports[importmatches[specifier]]) ||
+                            // search from esmi analyze result
+                            importmap.imports[specifier];
+                        if (replacement) {
+                            s !== null && s !== void 0 ? s : (s = new magic_string_1.default(source));
+                            s.overwrite(start, end, replacement);
+                        }
                     }
                 });
                 return (s === null || s === void 0 ? void 0 : s.toString()) || source;
@@ -78,7 +112,11 @@ function generatePkgData(api) {
                     name: 'default',
                     path: 'es/index.js',
                     from: '',
-                    deps: Object.entries(api.appData.deps).map(([name, version]) => ({
+                    deps: Object.entries(api.appData.deps)
+                        // only compile entry imports
+                        .filter(([_, { matches }]) => matches.length)
+                        // convert to esmi config
+                        .map(([name, { version }]) => ({
                         name,
                         version,
                         usedMap: {
@@ -102,23 +140,29 @@ exports.default = (api) => {
         return __awaiter(this, void 0, void 0, function* () {
             // scan and module graph
             // TODO: module graph
-            api.appData.deps = yield (0, scan_1.scan)({
-                entry: (0, path_1.join)(api.paths.absTmpPath, 'umi.ts'),
-                externals: api.config.externals,
-                resolver,
+            yield api.applyPlugins({
+                key: 'updateAppDataDeps',
+                type: api.ApplyPluginsType.event,
             });
             // skip umi by default
             delete api.appData.deps['umi'];
-            // FIXME: force include react & react-dom
-            api.appData.deps['react'] = api.appData.react.version;
-            api.appData.deps['react-dom'] = api.appData.react.version;
             const data = generatePkgData(api);
             const deps = data.pkgInfo.exports.reduce((r, exp) => r.concat(exp.deps.map((dep) => dep.name)), []);
             const hasNewDep = deps.some((i) => !importmap.imports[i]);
             // update importmap from esm if there has new import
             if (hasNewDep) {
-                // TODO: add local cache and restore
                 importmap = (_a = (yield service.getImportmap(data))) === null || _a === void 0 ? void 0 : _a.importMap;
+                // update matches map to dep name
+                importmatches = Object.keys(api.appData.deps).reduce((r, dep) => {
+                    // filter subpath imports
+                    if (!api.appData.deps[dep].subpaths.length) {
+                        // map all matches to dep name
+                        api.appData.deps[dep].matches.forEach((m) => {
+                            r[m] = dep;
+                        });
+                    }
+                    return r;
+                }, {});
                 // because we will replaced package name to CDN url in vite plugin
                 // so we must append scope rules for the CDN url like the import specifier
                 // example:
@@ -194,6 +238,7 @@ exports.default = (api) => {
                     yield refreshImportMap();
                     // TODO: refresh page when importmap changed
                 }),
+                resolver,
             }));
             return memo;
         });

package/dist/features/favicon/favicon.js

@@ -53,6 +53,8 @@ exports.default = (api) => {
         }
     });
     api.modifyHTMLFavicon((memo) => {
-        return `${api.config.publicPath}${api.appData.faviconFile}` || memo;
+        return api.appData.faviconFile
+            ? `${api.config.publicPath}${api.appData.faviconFile}`
+            : memo;
     });
 };

package/dist/features/lowImport/babelPlugin.d.ts

@@ -3,11 +3,13 @@ import * as t from '@umijs/bundler-utils/compiled/babel/types';
 import { IOpts } from './lowImport';
 interface IPluginOpts {
     opts: IOpts;
+    css: string;
 }
 export default function (): {
     visitor: {
         Identifier(path: Babel.NodePath<t.Identifier>, state: {
             opts: IPluginOpts;
+            file: any;
         }): void;
         MemberExpression(path: Babel.NodePath<t.MemberExpression>, state: {
             opts: IPluginOpts;

package/dist/features/lowImport/babelPlugin.js

@@ -21,11 +21,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const helper_module_imports_1 = require("@umijs/bundler-utils/compiled/babel/helper-module-imports");
 const t = __importStar(require("@umijs/bundler-utils/compiled/babel/types"));
+const path_1 = require("path");
 function default_1() {
     return {
         visitor: {
             Identifier(path, state) {
-                var _a, _b;
+                var _a, _b, _c;
                 const { name } = path.node;
                 if (path.scope.hasBinding(path.node.name)) {
                     return;
@@ -36,17 +37,38 @@ function default_1() {
                     t.isImportNamespaceSpecifier(parentNode)) {
                     return;
                 }
-                if ((_a = state.opts.opts.identifierToLib) === null || _a === void 0 ? void 0 : _a[name]) {
+                // don't support member expression
+                // e.g. foo.styles
+                if (t.isMemberExpression(parentNode) &&
+                    path.node === parentNode.property) {
+                    return;
+                }
+                // don't support object property
+                // e.g. { styles: 1 }
+                if (t.isObjectProperty(parentNode) && path.node === parentNode.key) {
+                    return;
+                }
+                // TODO: 替换方式需要缓存，避免过多临时变量
+                if ((_a = state.opts.opts.identifierToLib) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(name)) {
                     path.replaceWith((0, helper_module_imports_1.addNamed)(path, name, state.opts.opts.identifierToLib[name]));
                 }
-                else if ((_b = state.opts.opts.defaultToLib) === null || _b === void 0 ? void 0 : _b[name]) {
+                else if ((_b = state.opts.opts.defaultToLib) === null || _b === void 0 ? void 0 : _b.hasOwnProperty(name)) {
                     path.replaceWith((0, helper_module_imports_1.addDefault)(path, state.opts.opts.defaultToLib[name], {
                         nameHint: name,
                     }));
                 }
-                // TODO: state.opts.opts.namespaceToLib
+                else if ((_c = state.opts.opts.namespaceToLib) === null || _c === void 0 ? void 0 : _c.hasOwnProperty(name)) {
+                    path.replaceWith((0, helper_module_imports_1.addNamespace)(path, state.opts.opts.namespaceToLib[name]));
+                }
+                // import css
+                if (name === 'styles' && state.opts.css) {
+                    const { filename } = state.file.opts;
+                    const cssFilename = (0, path_1.basename)(filename, (0, path_1.extname)(filename)) + '.' + state.opts.css;
+                    path.replaceWith((0, helper_module_imports_1.addDefault)(path, './' + cssFilename, { nameHint: name }));
+                }
             },
             MemberExpression(path, state) {
+                var _a, _b;
                 const { object, property } = path.node;
                 if (path.scope.hasBinding(object.name)) {
                     return;
@@ -57,8 +79,8 @@ function default_1() {
                     t.isImportNamespaceSpecifier(parentNode)) {
                     return;
                 }
-                if (state.opts.opts.withObjs[object.name] &&
-                    (state.opts.opts.withObjs[object.name].members || []).includes(property.name)) {
+                if (((_a = state.opts.opts.withObjs) === null || _a === void 0 ? void 0 : _a[object.name]) &&
+                    (((_b = state.opts.opts.withObjs) === null || _b === void 0 ? void 0 : _b[object.name].members) || []).includes(property.name)) {
                     path.replaceWith((0, helper_module_imports_1.addNamed)(path, property.name, state.opts.opts.withObjs[object.name].importFrom));
                 }
             },