微前端实践踩坑记录

最新推荐文章于 2025-01-08 16:26:54 发布

原创最新推荐文章于 2025-01-08 16:26:54 发布 · 546 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack #javascript #react

微前端专栏收录该内容

1 篇文章

订阅专栏

本文记录了使用qiankun部署微前端过程中遇到的挑战。在遵循官方教程并尝试集成rescripts插件时，遇到了webpack配置错误。通过逐步排查，最终发现只需注释掉特定的两条webpack配置，就能成功避免错误并实现正常运行。

qiankun部署微前端

教程： https://qiankun.umijs.org/zh/guide/tutorial
部署信息：主应用： react项目, 微应用react项目
bug：跟着教程一步步来都没啥问题，直到下载rescripts插件，并重新更改webpack配置时保了错，如下：

// 教程配置
const { name } = require('./package');

module.exports = {
    webpack: (config) => {
        config.output.library = `${name}-[name]`;
        config.output.libraryTarget = 'umd';
        config.output.jsonpFunction = `webpackJsonp_${name}`;
        config.output.globalObject = 'window';
        return config;
    },

    devServer: (_) => {
        const config = _;

        config.headers = {
            'Access-Control-Allow-Origin': '*',
        };
        config.historyApiFallback = true;
        config.watchContentBase = false;
        config.liveReload = false;

        return config;
    },
};

// 报错
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-ui-store@0.1.0 start: `set PORT=4200 && rescripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-ui-store@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\twh\AppData\Roaming\npm-cache\_logs\2022-09-04T08_52_13_223Z-debug.log

开始报错的时候我从网上搜了解决方法，但没XX用，最后我试着将配置全部注掉，就不再报错了，但是从主应用访问的时候还是会报错，如下：

loader.js:220 Uncaught Error: application 'uiStoreApp' died in status LOADING_SOURCE_CODE: [qiankun]: You need to export lifecycle functions in uiStoreApp entry
    at getLifecyclesFromExports (loader.js:220:1)
    at _callee17$ (loader.js:325:1)
    at tryCatch (regeneratorRuntime.js:86:1)
    at Generator._invoke (regeneratorRuntime.js:66:1)
    at Generator.next (regeneratorRuntime.js:117:1)
    at fulfilled (tslib.es6.js:71:1)

最后，我一条条测试配置，发现只需要将一下两个配置注释掉就可以了，一下是最终的配置：

const { name } = require('./package');

module.exports = {
    webpack: (config) => {
        config.output.library = `${name}-[name]`;
        config.output.libraryTarget = 'umd';
        // config.output.jsonpFunction = `webpackJsonp_${name}`;
        config.output.globalObject = 'window';
        return config;
    },

    devServer: (_) => {
        const config = _;

        config.headers = {
            'Access-Control-Allow-Origin': '*',
        };
        config.historyApiFallback = true;
        // config.watchContentBase = false;
        config.liveReload = false;

        return config;
    },
};