-
Notifications
You must be signed in to change notification settings - Fork 89
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
已有的react vite项目怎么改造呢 #60
Comments
已有vue项目参考这个示例: |
react 参考这个 已有react项目接入hel安装工具包安装 npm i hel-dev-utils 生成子应用描述对象以执行弹射后的 const helDevUtils = require('hel-dev-utils');
const pkg = require('../package.json');
const subApp = helDevUtils.createReactSubApp(pkg);
// 若是私服部署,可设定 homePage
// const subApp = helDevUtils.createReactSubApp(pkg, {homePage:'https://xxx.com/yy'});
module.exports = subApp; 替换publicUrlOrPath和buildPath在 const subApp = require('./subApp');
const publicUrlOrPath = subApp.getPublicPathOrUrl();
const buildPath = subApp.distDir; 替换jsonpFunction替换
{
// 其他属性略...
jsonpFunction: subApp.jsonpFnName
}
{
// 其他属性略...
chunkLoadingGlobal: subApp.jsonpFnName,
} 设置react为externals推荐设置react为externals,避免react参与打包,同时也方便后续 替换
const subApp = require('./subApp');
module.exports = function (webpackEnv) {
return {
// 其他属性略...
externals: {...yourExternals, ...subApp.externals},
};
}
const subApp = require('./subApp');
module.exports = function (webpackEnv) {
return {
// 其他属性略...
externals: subApp.externals,
};
} 在
<script src="https://tnfe.gtimg.com/hel-runtime/level1/18.1.0-react.dev.js"></script>
<script src="https://tnfe.gtimg.com/hel-runtime/level1/17.0.2-react.dev.js"></script>
<script src="https://tnfe.gtimg.com/hel-runtime/level1/16.14.0-react.dev.js"></script>
暴露共享模块当前项目有共享给其他项目使用的模块时,可接入此步骤 安装工具包执行以下npm命令,安装相关包体 npm i hel-lib-proxy
npm i [email protected] rollup@2 rollup-plugin-typescript rollup-plugin-terser shx replace-absolute-path -D 下沉入口文件将原来的 src/index.js 内容复制到 src/loadApp.js 里,类似此文件,原入口文件 新增模块组名描述文件
新增 /*
|--------------------------------------------------------------------------
|
| 对应 package.json appGroupName
|
|--------------------------------------------------------------------------
*/
export const LIB_NAME = 'remote-react-comps-tpl'; 新增模块暴露目录新增 目录下新建两个文件
// 导出模块可按项目实际情况调整,这里仅做示例
import * as comps from 'components';
export default comps;
import libProperties from './libProperties';
import { exposeLib } from 'hel-lib-proxy';
import { LIB_NAME } from 'configs/subApp';
export type Lib = typeof libProperties;
export const lib = exposeLib<Lib>(LIB_NAME);
/** 如想使用方可在import语句里直接解构出具体的模块,可写为
可参考:https://github.com/hel-eco/hel-tdesign-react/blob/main/src/entrance/libTypes.ts
export cont XX = lib.XX;
export cont YY = lib.YY;
*/
export default lib; 改造入口文件改造入口文件,做分流控制(可参考此文件) // import { preFetchLib } from 'hel-micro';
import { libReady, isSubApp } from 'hel-lib-proxy';
import { LIB_NAME } from './configs/subApp';
async function main() {
// 如有其他包依赖,且需要在逻辑里静态导入,可在此处执行预抓取
// await helMicro.preFetchLib('other-lib');
const libProperties = await import('./entrance/libProperties');
// 表示模块已准备就绪,注意此处传递的是 default
libReady(LIB_NAME, libProperties.default);
// 非子应用时(即不是被别的模块触发载入的情况),自己挂载渲染节点,方便本地调试
if (!isSubApp()) {
await import('./loadApp');
}
}
main().catch(console.error);
// avoid isolatedModules warning
export default 'Hel Module Index file'; 接入npm构建相关辅助脚本项目根目录下新建
/*
* 生成 hel-meta.json
*/
const path = require('path');
const process = require('process');
const helDevUtils = require('hel-dev-utils');
const packageJson = require('../package.json');
const subApp = require('../config/subApp');
helDevUtils.extractHelMetaJson({
appHomePage: subApp.getPublicPathOrUrl(),
buildDirFullPath: path.join(__dirname, '../hel_dist'),
packageJson,
platform: subApp.platform,
}).catch((err) => {
console.error(err);
process.exit(-1);
});
const path = require('path');
const helDevUtils = require('hel-dev-utils');
const pkg = require('../package.json');
const fileFullPath = path.join(__dirname, '../src/configs/subApp');
helDevUtils.check(pkg, { fileFullPath, checkEnv: process.env.CHECK_ENV !== '0' });
const path = require('path');
const replacePath = require('replace-absolute-path');
(async function () {
const srcDir = process.env.BUNDLE === 'true' ? path.resolve(__dirname, '../lib-js') : path.resolve(__dirname, '../src');
const libDir = process.env.BUNDLE === 'true' ? path.resolve(__dirname, '../lib-js') : path.resolve(__dirname, '../lib');
replacePath({
inputDir: srcDir,
outputDir: libDir,
// includeExts: DEFAULT_EXTS.concat(['.md']),
afterReplaced: () => {
console.log('----------------------------------------------------------------------------------');
console.log(`| all files import statements been transformed to relative path for ${libDir} ^_^ |`);
console.log('----------------------------------------------------------------------------------');
},
});
})().catch((err) => {
console.error(err);
process.exit(-1);
}); 引入rollup配置文件根目录下新增 :::tip 此步骤为可选项 import typescript from 'rollup-plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import { cst } from 'hel-dev-utils';
import pkg from './package.json';
const env = process.env.BUILD_ENV || 'umd';
const plugins = [
typescript({
exclude: 'node_modules/**',
typescript: require('typescript'),
}),
];
const env2outputConf = {
es: {
format: 'es',
name: pkg.appGroupName,
file: `${cst.HEL_PROXY_DIR}_es/entry.js`,
},
umd: {
format: 'umd',
name: pkg.appGroupName,
file: `${cst.HEL_PROXY_DIR}/entry.js`,
},
};
const outputObj = env2outputConf[env];
if (process.env.MIN === 'true') {
plugins.push(terser());
const [dirName] = outputObj.file.split('/');
outputObj.file = `${dirName}/entry.min.js`;
}
module.exports = {
input: 'src/entrance/libTypes.ts',
plugins,
output: [
outputObj,
],
}; 新增相关构建命令在 "scripts": {
"check": "node ./scripts/check.js",
"build": "npm run build_dist",
"build_dist": "node scripts/build.js",
"build_proxy": "npm run build_proxy_umd && npm run build_proxy_es",
"build_proxy_umd": "tsc & node ./scripts/replaceToRelativePath.js & rollup -c",
"build_proxy_es": "tsc & node ./scripts/replaceToRelativePath.js & cross-env BUILD_ENV=es rollup -c",
"build_meta": "node scripts/meta.js",
"set_home_page": "cross-env-shell HEL_APP_HOME_PAGE=http://127.0.0.1:8080",
"build_cust": "npm run set_home_page \"npm run build_dist && npm run build_meta\"",
"check_name": "node ./scripts/check.js",
"build_priv": "cross-env-shell CHECK_ENV=0 \"npm run check_name && npm run build_dist && npm run build_meta && npm run build_proxy\"",
"build_priv:hint": "work for custom deploy",
"build_helpack": "cross-env-shell CHECK_ENV=0 HEL_APP_HOME_PAGE=http://tnfe.cdn/hel/xxx-name_202202021212 \"npm run check_name && npm run build_dist && npm run build_meta && npm run build_proxy\"",
"build_helpack:hint": "just mock helpack build process to see hel-meta.json result"
} :::tip build_dist命令 构建与发布npm执行以下命令 npm run build
npm publish :::tip npm只发布了源码 |
这个是要求webpack5的吧? webpack4就搞死人了 |
不需要webpack 5 |
有封装的cli命令吗 |
No description provided.
The text was updated successfully, but these errors were encountered: