我有一个Single-SPA项目,其中有一个根应用程序(端口9000)和一个Vite-React应用程序(端口9002)。但是,我无法通过根目录(localhost:9000)获取应用程序。
Root应用
index.ejs:
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
"react": "https://unpkg.com/react@18/umd/react.production.min.js",
"react-dom": "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
}
}
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script">
<% if (isLocal) { %>
<script type="systemjs-importmap">
{
"imports": {
"@org/root-config": "//localhost:9000/pi-root-config.js"
}
}
</script>
<% } %>
字符串
root-config.js
import { registerApplication, start } from "single-spa";
registerApplication({
name: "@org/react-test",
app: () =>
import(
/* webpackIgnore: true */
"http://localhost:9002/src/main.jsx"
),
activeWhen: ["/"]
});
start({
urlRerouteOnly: true,
});
型
webpack.config.js
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = (webpackConfigEnv, argv) => {
const orgName = "org";
const defaultConfig = singleSpaDefaults({
orgName,
projectName: "root-config",
webpackConfigEnv,
argv,
disableHtmlGeneration: true,
});
return merge(defaultConfig, {
// modify the webpack config however you'd like to by adding to this object
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: "src/index.ejs",
templateParameters: {
isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
orgName,
},
}),
],
output: {
publicPath: 'http://localhost:9000/'
},
resolve: {
extensions: ['.jsx', '.js', '.json', '.png', '.svg']
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
});
};
型
Vite-React应用
main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import singleSpaReact from "single-spa-react";
import App from './App.jsx'
import './index.css'
const lifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: App,
errorBoundary(err, info, props) {
return <div>This renders when a error occurs</div>;
},
});
export const { bootstrap, mount, unmount } = lifecycles;
型
vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
rollupOptions: {
input: 'src/main.jsx',
format: 'system',
preserveEntrySignatures: true,
},
base: "http://localhost:9002",
plugins: [react()],
server: {
origin: "http://localhost:9002",
},
})
型
我做了一些研究,我已经删除了react-refresh从.eslintrc.cjs,但它不工作。有人知道如何使用Single-SPA + Vite + React构建一个结构吗?
1条答案
按热度按时间2q5ifsrm1#
巧合的是,我刚刚发布了this article,它处理 "@vitejs/plugin-react无法检测前导。“有问题” 错误。
简短的答案是一个变通方案:禁用HMR。在
vite.config.ts
中:字符串
不幸的是,这是为Vite服务器,而不是webpack。
快速搜索webpack显示this question,第一个答案建议对webpack配置这样做:
型
看看这对你是否有效。