mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-09 16:32:07 +08:00
初始化3.0.0版本
This commit is contained in:
zengqiao
@@ -0,0 +1,83 @@
|
||||
const chalk = require('chalk');
|
||||
const fs = require('fs');
|
||||
// const toExcel = require('to-excel').toExcel;
|
||||
|
||||
class CountComponentPlugin {
|
||||
constructor(opts = {}) {
|
||||
this.opts = {
|
||||
startCount: true, // 是否开启统计
|
||||
isExportExcel: false, // 是否生成excel
|
||||
pathname: '', // 文件路径
|
||||
...opts,
|
||||
};
|
||||
this.total = {
|
||||
len: 0,
|
||||
components: {},
|
||||
};
|
||||
}
|
||||
sort(obj) {
|
||||
this.total.components = Object.fromEntries(Object.entries(obj).sort(([, a], [, b]) => b - a));
|
||||
}
|
||||
|
||||
// 生成excel 文件
|
||||
// toExcel() {
|
||||
// const arr = [];
|
||||
// Object.keys(this.total.components).forEach((key, index) => {
|
||||
// const value = this.total.components[key];
|
||||
// const data = {
|
||||
// id: index + 1,
|
||||
// component: key,
|
||||
// count: value,
|
||||
// };
|
||||
// arr.push(data);
|
||||
// });
|
||||
|
||||
// const headers = [
|
||||
// { label: '名次', field: 'id' },
|
||||
// { label: '组件', field: 'component' },
|
||||
// { label: '次数', field: 'count' },
|
||||
// ];
|
||||
// const content = toExcel.exportXLS(headers, arr, 'filename');
|
||||
// fs.writeFileSync('filename.xls', content);
|
||||
// }
|
||||
|
||||
toLog() {
|
||||
this.sort(this.total.components);
|
||||
Object.keys(this.total.components).forEach((key) => {
|
||||
const value = this.total.components[key];
|
||||
const per = Number((value / this.total.len).toPrecision(3)) * 100;
|
||||
console.log(`\n${chalk.blue(key)} 组件引用次数 ${chalk.green(value)} 引用率 ${chalk.redBright(per)}%`);
|
||||
});
|
||||
console.log(`\n组件${chalk.blue('总共')}引用次数 ${chalk.green(this.total.len)}`);
|
||||
}
|
||||
apply(compiler) {
|
||||
const handler = (_compilation, { normalModuleFactory }) => {
|
||||
normalModuleFactory.hooks.parser.for('javascript/auto').tap('count-component-plugin', (parser) => {
|
||||
parser.hooks.importSpecifier.tap('count-component-plugin', (_statement, source, _exportName, identifierName) => {
|
||||
if (source.includes(this.opts.pathname)) {
|
||||
this.total.len = this.total.len + 1;
|
||||
const key = identifierName;
|
||||
this.total.components[key] = this.total.components[key] ? this.total.components[key] + 1 : 1;
|
||||
}
|
||||
});
|
||||
parser.hooks.program.tap('count-component-plugin', (ast) => {
|
||||
// console.log('+++++++', ast);
|
||||
});
|
||||
});
|
||||
};
|
||||
const done = () => {
|
||||
if (!this.opts.startCount) {
|
||||
return;
|
||||
}
|
||||
this.sort(this.total.components);
|
||||
if (this.opts.isExportExcel) {
|
||||
this.toLog();
|
||||
} else {
|
||||
this.toLog();
|
||||
}
|
||||
};
|
||||
compiler.hooks.compilation.tap('count-component-plugin', handler);
|
||||
compiler.hooks.done.tap('count-component-plugin-done', done);
|
||||
}
|
||||
}
|
||||
module.exports = CountComponentPlugin;
|
||||
116
km-console/packages/layout-clusters-fe/config/CoverHtmlWebpackPlugin.js
Executable file
116
km-console/packages/layout-clusters-fe/config/CoverHtmlWebpackPlugin.js
Executable file
@@ -0,0 +1,116 @@
|
||||
/**
|
||||
* 重置 html 内容
|
||||
* 注意: HtmlWebpackPlugin hooks 是 beta 版本，正式版本接口可能会变
|
||||
*/
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
// const PublicPath = '//img-ys011.didistatic.com/static/bp_fe_daily/bigdata_cloud_KnowStreaming_FE/gn';
|
||||
const PublicPath = '';
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
const commonDepsMap = [
|
||||
{
|
||||
name: 'react',
|
||||
development: '/static/js/react.production.min.js',
|
||||
production: `${PublicPath}/static/js/react.production.min.js`,
|
||||
},
|
||||
{
|
||||
name: 'react-dom',
|
||||
development: '/static/js/react-dom.production.min.js',
|
||||
production: `${PublicPath}/static/js/react-dom.production.min.js`,
|
||||
},
|
||||
{
|
||||
name: 'single-spa',
|
||||
development: '/static/js/single-spa.min.js',
|
||||
production: `${PublicPath}/static/js/single-spa.min.js`,
|
||||
},
|
||||
{
|
||||
name: 'single-spa-react',
|
||||
development: '/static/js/single-spa-react.js',
|
||||
production: `${PublicPath}/static/js/single-spa-react.js`,
|
||||
},
|
||||
{
|
||||
name: 'moment',
|
||||
development: '/static/js/moment.min.js',
|
||||
production: `${PublicPath}/static/js/moment.min.js`,
|
||||
},
|
||||
];
|
||||
|
||||
function generateSystemJsImportMap() {
|
||||
const importMap = {
|
||||
'react-router': 'https://unpkg.com/react-router@5.2.1/umd/react-router.min.js',
|
||||
'react-router-dom': 'https://unpkg.com/react-router-dom@5.2.1/umd/react-router-dom.min.js',
|
||||
lodash: 'https://unpkg.com/lodash@4.17.21/lodash.min.js',
|
||||
history: 'https://unpkg.com/history@5/umd/history.development.js',
|
||||
echarts: 'https://unpkg.com/echarts@5.3.1/dist/echarts.min.js',
|
||||
};
|
||||
//if (process.env.NODE_ENV === 'production') {
|
||||
commonDepsMap.forEach((o) => {
|
||||
importMap[o.name] = o[process.env.NODE_ENV];
|
||||
});
|
||||
//}
|
||||
return JSON.stringify({
|
||||
imports: importMap,
|
||||
});
|
||||
}
|
||||
|
||||
class CoverHtmlWebpackPlugin {
|
||||
constructor(options) {
|
||||
this.isBusiness = options.BUSINESS_VERSION;
|
||||
}
|
||||
apply(compiler) {
|
||||
compiler.hooks.compilation.tap('CoverHtmlWebpackPlugin', (compilation) => {
|
||||
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('CoverHtmlWebpackPlugin', async (data, cb) => {
|
||||
const depsMap = `
|
||||
<script type="systemjs-importmap">
|
||||
${generateSystemJsImportMap()}
|
||||
</script>
|
||||
`;
|
||||
const portalMap = {
|
||||
'@portal/layout': '/layout.js',
|
||||
};
|
||||
const assetJson = JSON.parse(data.plugin.assetJson);
|
||||
let links = '';
|
||||
|
||||
assetJson.forEach((item) => {
|
||||
if (/\.js$/.test(item)) {
|
||||
// TODO: entry 只有一个
|
||||
portalMap['@portal/layout'] = item;
|
||||
} else if (/\.css$/.test(item)) {
|
||||
links += `<link href="${item}" rel="stylesheet">`;
|
||||
}
|
||||
});
|
||||
data.html = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title></title>
|
||||
${links}
|
||||
<link href='${isProd ? PublicPath : ''}/favicon.ico' rel='shortcut icon'>
|
||||
<script src='${isProd ? PublicPath : ''}/static/js/system.min.js'></script>
|
||||
<script src='${isProd ? PublicPath : ''}/static/js/named-exports.min.js'></script>
|
||||
<script src='${isProd ? PublicPath : ''}/static/js/use-default.min.js'></script>
|
||||
<script src='${isProd ? PublicPath : ''}/static/js/amd.js'></script>
|
||||
${this.isBusiness ? `<script src=${isProd ? PublicPath : ''}/static/js/ksl.min.js></script>` : ''}
|
||||
</head>
|
||||
<body>
|
||||
${depsMap}
|
||||
<script type="systemjs-importmap">
|
||||
{
|
||||
"imports": ${JSON.stringify(portalMap)}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
System.import('@portal/layout');
|
||||
</script>
|
||||
<div id="layout"></div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
cb(null, data);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = CoverHtmlWebpackPlugin;
|
||||
162
km-console/packages/layout-clusters-fe/config/d1-spa-webpack.js
Normal file
162
km-console/packages/layout-clusters-fe/config/d1-spa-webpack.js
Normal file
@@ -0,0 +1,162 @@
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const CoverHtmlWebpackPlugin = require('./CoverHtmlWebpackPlugin.js');
|
||||
var webpackConfigResolveAlias = require('./webpackConfigResolveAlias');
|
||||
const TerserJSPlugin = require('terser-webpack-plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const theme = require('./theme');
|
||||
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
||||
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
|
||||
const babelOptions = {
|
||||
cacheDirectory: true,
|
||||
babelrc: false,
|
||||
presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
|
||||
plugins: [
|
||||
[require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
|
||||
[require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
|
||||
require.resolve('@babel/plugin-proposal-export-default-from'),
|
||||
require.resolve('@babel/plugin-proposal-export-namespace-from'),
|
||||
require.resolve('@babel/plugin-proposal-object-rest-spread'),
|
||||
require.resolve('@babel/plugin-transform-runtime'),
|
||||
!isProd && require.resolve('react-refresh/babel'),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.concat([
|
||||
'@babel/plugin-transform-object-assign',
|
||||
'@babel/plugin-transform-modules-commonjs',
|
||||
]),
|
||||
};
|
||||
|
||||
module.exports = () => {
|
||||
const jsFileName = isProd ? '[name]-[chunkhash].js' : '[name].js';
|
||||
const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css';
|
||||
|
||||
const plugins = [
|
||||
new CoverHtmlWebpackPlugin(),
|
||||
new ProgressBarPlugin(),
|
||||
new CaseSensitivePathsPlugin(),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: cssFileName,
|
||||
}),
|
||||
!isProd &&
|
||||
new ReactRefreshWebpackPlugin({
|
||||
overlay: false,
|
||||
}),
|
||||
].filter(Boolean);
|
||||
const resolve = {
|
||||
symlinks: false,
|
||||
extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
|
||||
alias: webpackConfigResolveAlias,
|
||||
};
|
||||
|
||||
if (isProd) {
|
||||
plugins.push(new CleanWebpackPlugin());
|
||||
}
|
||||
|
||||
if (!isProd) {
|
||||
resolve.mainFields = ['browser', 'main', 'module'];
|
||||
}
|
||||
|
||||
return {
|
||||
output: {
|
||||
filename: jsFileName,
|
||||
chunkFilename: jsFileName,
|
||||
library: 'layout',
|
||||
libraryTarget: 'amd',
|
||||
},
|
||||
externals: [
|
||||
/^react$/,
|
||||
/^react\/lib.*/,
|
||||
/^react-dom$/,
|
||||
/.*react-dom.*/,
|
||||
/^single-spa$/,
|
||||
/^single-spa-react$/,
|
||||
/^moment$/,
|
||||
/^react-router$/,
|
||||
/^react-router-dom$/,
|
||||
],
|
||||
resolve,
|
||||
plugins,
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
parser: { system: false },
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: babelOptions,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(ts|tsx)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: babelOptions,
|
||||
},
|
||||
{
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
allowTsInNodeModules: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: './assets/image/',
|
||||
esModule: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(css|less)$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
},
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
javascriptEnabled: true,
|
||||
modifyVars: theme,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: isProd
|
||||
? {
|
||||
minimizer: [
|
||||
new TerserJSPlugin({
|
||||
cache: true,
|
||||
sourceMap: true,
|
||||
}),
|
||||
new OptimizeCSSAssetsPlugin({}),
|
||||
],
|
||||
}
|
||||
: {},
|
||||
devtool: isProd ? 'cheap-module-source-map' : 'source-map',
|
||||
node: {
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
},
|
||||
};
|
||||
};
|
||||
183
km-console/packages/layout-clusters-fe/config/d1-webpack.base.js
Normal file
183
km-console/packages/layout-clusters-fe/config/d1-webpack.base.js
Normal file
@@ -0,0 +1,183 @@
|
||||
/* eslint-disable */
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const CoverHtmlWebpackPlugin = require('./CoverHtmlWebpackPlugin.js');
|
||||
var webpackConfigResolveAlias = require('./webpackConfigResolveAlias');
|
||||
const TerserJSPlugin = require('terser-webpack-plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const theme = require('./theme');
|
||||
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
||||
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
|
||||
const BUSINESS_VERSION = false;
|
||||
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
// const publicPath = isProd ? '//img-ys011.didistatic.com/static/bp_fe_daily/bigdata_cloud_KnowStreaming_FE/gn/' : '/';
|
||||
const publicPath = '/';
|
||||
const babelOptions = {
|
||||
cacheDirectory: true,
|
||||
babelrc: false,
|
||||
presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
|
||||
plugins: [
|
||||
[require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
|
||||
[require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
|
||||
[require.resolve('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
|
||||
[require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
|
||||
require.resolve('@babel/plugin-proposal-export-default-from'),
|
||||
require.resolve('@babel/plugin-proposal-export-namespace-from'),
|
||||
require.resolve('@babel/plugin-proposal-object-rest-spread'),
|
||||
require.resolve('@babel/plugin-transform-runtime'),
|
||||
!isProd && require.resolve('react-refresh/babel'),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.concat([
|
||||
[
|
||||
'babel-plugin-import',
|
||||
{
|
||||
libraryName: 'antd',
|
||||
style: true,
|
||||
},
|
||||
],
|
||||
'@babel/plugin-transform-object-assign',
|
||||
]),
|
||||
};
|
||||
|
||||
module.exports = () => {
|
||||
const jsFileName = isProd ? '[name]-[chunkhash].js' : '[name].js';
|
||||
const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css';
|
||||
|
||||
const plugins = [
|
||||
// !isProd && new HardSourceWebpackPlugin(),
|
||||
new CoverHtmlWebpackPlugin({
|
||||
BUSINESS_VERSION,
|
||||
}),
|
||||
new ProgressBarPlugin(),
|
||||
new CaseSensitivePathsPlugin(),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: cssFileName,
|
||||
}),
|
||||
!isProd &&
|
||||
new ReactRefreshWebpackPlugin({
|
||||
overlay: false,
|
||||
}),
|
||||
].filter(Boolean);
|
||||
const resolve = {
|
||||
symlinks: false,
|
||||
extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
|
||||
alias: webpackConfigResolveAlias,
|
||||
};
|
||||
|
||||
if (isProd) {
|
||||
plugins.push(new CleanWebpackPlugin());
|
||||
}
|
||||
|
||||
if (!isProd) {
|
||||
resolve.mainFields = ['module', 'browser', 'main'];
|
||||
}
|
||||
|
||||
return {
|
||||
output: {
|
||||
filename: jsFileName,
|
||||
chunkFilename: jsFileName,
|
||||
library: 'layout',
|
||||
libraryTarget: 'amd',
|
||||
publicPath,
|
||||
},
|
||||
externals: isProd
|
||||
? [
|
||||
/^react$/,
|
||||
/^react\/lib.*/,
|
||||
/^react-dom$/,
|
||||
/.*react-dom.*/,
|
||||
/^single-spa$/,
|
||||
/^single-spa-react$/,
|
||||
/^moment$/,
|
||||
/^antd$/,
|
||||
/^lodash$/,
|
||||
/^echarts$/,
|
||||
]
|
||||
: [],
|
||||
resolve,
|
||||
plugins,
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
parser: { system: false },
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: babelOptions,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(ts|tsx)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: babelOptions,
|
||||
},
|
||||
{
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
allowTsInNodeModules: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf|otf)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: './assets/image/',
|
||||
esModule: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(css|less)$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
},
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
javascriptEnabled: true,
|
||||
modifyVars: theme,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: isProd
|
||||
? {
|
||||
minimizer: [
|
||||
new TerserJSPlugin({
|
||||
cache: true,
|
||||
sourceMap: true,
|
||||
}),
|
||||
new OptimizeCSSAssetsPlugin({}),
|
||||
],
|
||||
}
|
||||
: {},
|
||||
devtool: isProd ? 'cheap-module-source-map' : '',
|
||||
node: {
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
},
|
||||
};
|
||||
};
|
||||
module.exports.BUSINESS_VERSION = BUSINESS_VERSION;
|
||||
154
km-console/packages/layout-clusters-fe/config/registerApps.js
Executable file
154
km-console/packages/layout-clusters-fe/config/registerApps.js
Executable file
@@ -0,0 +1,154 @@
|
||||
import * as singleSpa from 'single-spa';
|
||||
|
||||
const customProps = {
|
||||
env: {
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
},
|
||||
};
|
||||
|
||||
function fetchManifest(url, publicPath) {
|
||||
return fetch(url)
|
||||
.then((res) => {
|
||||
return res.text();
|
||||
})
|
||||
.then((data) => {
|
||||
if (data) {
|
||||
const manifest = data.match(/<meta name="manifest" content="([\w|\d|-]+.json)">/);
|
||||
let result = '';
|
||||
if (publicPath && manifest) {
|
||||
result = `${publicPath}${manifest[1]}?q=${new Date().getTime()}`;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function prefix(location, ident, matchPath) {
|
||||
if (matchPath && Object.prototype.toString.call(matchPath) === '[object Function]') {
|
||||
return matchPath(location);
|
||||
}
|
||||
if (location.href === `${location.origin}/${ident}`) {
|
||||
return true;
|
||||
}
|
||||
return location.href.indexOf(`${location.origin}/${ident}`) !== -1;
|
||||
}
|
||||
|
||||
function getStylesheetLink(ident) {
|
||||
return document.getElementById(`${ident}-stylesheet`);
|
||||
}
|
||||
|
||||
function createStylesheetLink(ident, path) {
|
||||
const headEle = document.getElementsByTagName('head')[0];
|
||||
const linkEle = document.createElement('link');
|
||||
linkEle.id = `${ident}-stylesheet`;
|
||||
linkEle.rel = 'stylesheet';
|
||||
// linkEle.href = systemConf[process.env.NODE_ENV].css;
|
||||
linkEle.href = path;
|
||||
headEle.appendChild(linkEle);
|
||||
}
|
||||
|
||||
function removeStylesheetLink(ident) {
|
||||
const linkEle = getStylesheetLink(ident);
|
||||
if (linkEle) linkEle.remove();
|
||||
}
|
||||
|
||||
async function getPathBySuffix(systemConf, jsonData, suffix) {
|
||||
let targetPath = '';
|
||||
_.forEach(Object.values(jsonData.assetsByChunkName), (assetsArr) => {
|
||||
if (typeof assetsArr === 'string' && assetsArr.indexOf(systemConf.ident) === 0 && _.endsWith(assetsArr, suffix)) {
|
||||
targetPath = assetsArr;
|
||||
}
|
||||
if (Array.isArray(assetsArr)) {
|
||||
targetPath = assetsArr.find((assetStr) => {
|
||||
return assetStr.indexOf(systemConf.ident) === 0 && _.endsWith(assetStr, suffix);
|
||||
});
|
||||
if (targetPath) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
return `${systemConf[process.env.NODE_ENV].publicPath}${targetPath}`;
|
||||
}
|
||||
|
||||
async function loadAssertsFileBySuffix(systemConf, jsonData, suffix) {
|
||||
const chunks = Object.values(jsonData.assetsByChunkName);
|
||||
const isJS = /js$/.test(suffix);
|
||||
await Promise.all(
|
||||
chunks.map(async (assetsArr) => {
|
||||
let targetPath = '';
|
||||
if (typeof assetsArr === 'string') {
|
||||
targetPath = assetsArr;
|
||||
} else if (Array.isArray(assetsArr)) {
|
||||
targetPath = assetsArr.find((assetStr) => {
|
||||
if (isJS) {
|
||||
return assetStr.indexOf(systemConf.ident) < 0 && _.endsWith(assetStr, suffix);
|
||||
} else {
|
||||
return _.endsWith(assetStr, suffix);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!targetPath) return Promise.resolve();
|
||||
if (isJS) {
|
||||
return System.import(`${systemConf[process.env.NODE_ENV].publicPath}${targetPath}`);
|
||||
} else {
|
||||
return createStylesheetLink(systemConf.ident, `${systemConf[process.env.NODE_ENV].publicPath}${targetPath}`);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
export default function registerApps(systemsConfig, props = {}, mountCbk) {
|
||||
systemsConfig.forEach(async (systemsConfItem) => {
|
||||
const { ident, matchPath } = systemsConfItem;
|
||||
const sysUrl = systemsConfItem[process.env.NODE_ENV].index;
|
||||
|
||||
singleSpa.registerApplication(
|
||||
ident,
|
||||
async () => {
|
||||
let manifestUrl = `${sysUrl}?q=${new Date().getTime()}`;
|
||||
|
||||
// html 作为入口文件
|
||||
if (/.+html$/.test(sysUrl)) {
|
||||
manifestUrl = await fetchManifest(sysUrl, systemsConfItem[process.env.NODE_ENV].publicPath);
|
||||
}
|
||||
|
||||
const lifecyclesFile = await fetch(manifestUrl).then((res) => res.json());
|
||||
let lifecycles = {};
|
||||
if (lifecyclesFile) {
|
||||
await loadAssertsFileBySuffix(systemsConfItem, lifecyclesFile, '.js');
|
||||
const jsPath = await getPathBySuffix(systemsConfItem, lifecyclesFile, '.js');
|
||||
lifecycles = await System.import(jsPath);
|
||||
} else {
|
||||
lifecycles = lifecyclesFile;
|
||||
}
|
||||
const { mount, unmount } = lifecycles;
|
||||
mount.unshift(async () => {
|
||||
if (lifecyclesFile) {
|
||||
await loadAssertsFileBySuffix(systemsConfItem, lifecyclesFile, '.css');
|
||||
// const cssPath = await getPathBySuffix(systemsConfItem, lifecyclesFile, '.css');
|
||||
// createStylesheetLink(ident, cssPath);
|
||||
}
|
||||
return Promise.resolve();
|
||||
});
|
||||
|
||||
if (mountCbk) {
|
||||
mount.unshift(async () => {
|
||||
mountCbk();
|
||||
return Promise.resolve();
|
||||
});
|
||||
}
|
||||
unmount.unshift(() => {
|
||||
removeStylesheetLink(ident);
|
||||
return Promise.resolve();
|
||||
});
|
||||
return lifecycles;
|
||||
},
|
||||
(location) => prefix(location, ident, matchPath),
|
||||
{
|
||||
...customProps,
|
||||
...props,
|
||||
}
|
||||
);
|
||||
});
|
||||
singleSpa.start();
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
const feSystemsConfig = {
|
||||
systemsConfig: [
|
||||
{
|
||||
ident: 'config',
|
||||
development: {
|
||||
publicPath: 'http://localhost:8001/config/',
|
||||
index: 'http://localhost:8001/config/manifest.json',
|
||||
},
|
||||
production: { publicPath: '/config/', index: '/config/manifest.json' },
|
||||
// production: {
|
||||
// publicPath: '//img-ys011.didistatic.com/static/bp_fe_daily/bigdata_cloud_KnowStreaming_FE/gn/config/',
|
||||
// index: '//img-ys011.didistatic.com/static/bp_fe_daily/bigdata_cloud_KnowStreaming_FE/gn/config/manifest.json',
|
||||
// },
|
||||
},
|
||||
],
|
||||
feConfig: {
|
||||
title: 'Know Streaming',
|
||||
header: {
|
||||
mode: 'complicated',
|
||||
logo: '/static/logo-white.png',
|
||||
subTitle: '管理平台',
|
||||
theme: '',
|
||||
right_links: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
module.exports = feSystemsConfig;
|
||||
17
km-console/packages/layout-clusters-fe/config/theme.js
Executable file
17
km-console/packages/layout-clusters-fe/config/theme.js
Executable file
@@ -0,0 +1,17 @@
|
||||
const themeConfig = {
|
||||
primaryColor: '#556ee6',
|
||||
theme: {
|
||||
'primary-color': '#556ee6',
|
||||
'border-radius-base': '2px',
|
||||
'border-radius-sm': '2px',
|
||||
'font-size-base': '12px',
|
||||
'font-family': 'Helvetica Neue, Helvetica, Arial, PingFang SC, Heiti SC, Hiragino Sans GB, Microsoft YaHei, sans-serif',
|
||||
'font-family-bold':
|
||||
'HelveticaNeue-Medium, Helvetica Medium, PingFangSC-Medium, STHeitiSC-Medium, Microsoft YaHei Bold, Arial, sans-serif',
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
'prefix-cls': 'layout',
|
||||
...themeConfig.theme,
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
react: path.resolve('./node_modules/react'),
|
||||
};
|
||||
Reference in New Issue
Block a user