下一代构建实现微前端 高性能解决方案、力争配置尽可能保持一致,开箱即用。
- 🔑 基于Rspack + Module Federation + Typescript、聚焦高性能 & 微前端
- 🛠️ 多种开发需求、支持开箱即用。
- 🔩 通用的插件、共享 webpackChain 插件接口.
EMP Micro FE Base on Rspack & module federation
Home Page: https://empjs.dev
如题:vue3-base 如何给 vue3-project 传值, 或者共享状态呢
demo里的 INC 按钮 能不能同时增加 两个项目的值呢
Angular v11: Experimental webpack 5 Support. Now, teams can opt-in to webpack v5. Currently, you could experiment with module federation.
Please add Angular v11 demo
是否需要改下babel配置?
我想在nuxt中使用如何实现呢
ERROR in ./src/views/login/Login.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-12[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/views/login/Login.vue?vue&type=script&lang=ts&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/alvin/Documents/testProject/src/views/login/Login.vue: Unexpected token (39:18)
37 | })
38 | export default class extends BaseComponent {
39 | @ref() loginForm!: Form;
package.json
"devDependencies": {
"@efox/emp-cli": "latest",
"@efox/emp-vue2": "latest",
"babel-loader": "^8.1.0",
"vue-class-component": "^7.2.6",
"vue-loader": "^15.9.6",
"vue-property-decorator": "^9.1.2",
"vuex-module-decorators": "^1.0.1"
},
加载远程react组件后,react执行抛出异常时候,会导致项目白屏
https://zh-hans.reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
<--- Last few GCs --->
[51786:0x10461d000] 14908944 ms: Scavenge (reduce) 2042.8 (2052.3) -> 2042.1 (2052.3) MB, 27.5 / 0.0 ms (average mu = 0.108, current mu = 0.095) allocation failure
[51786:0x10461d000] 14908985 ms: Scavenge (reduce) 2043.0 (2052.3) -> 2042.4 (2052.3) MB, 23.4 / 0.0 ms (average mu = 0.108, current mu = 0.095) allocation failure
[51786:0x10461d000] 14909033 ms: Scavenge (reduce) 2043.2 (2052.3) -> 2042.5 (2052.5) MB, 22.0 / 0.0 ms (average mu = 0.108, current mu = 0.095) allocation failure
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x1012762c5 node::Abort() (.cold.1) [/usr/local/bin/node]
2: 0x1000a2899 node::Abort() [/usr/local/bin/node]
3: 0x1000a29ff node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
4: 0x1001e45b7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x1001e4553 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
6: 0x10037dda5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
7: 0x10037f61a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
8: 0x10037b5b7 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x100378f88 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x1003863da v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x100386461 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x100355c17 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
13: 0x1006cd948 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
14: 0x100a24519 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
15: 0x100a2db51 Builtins_SetPropertyInLiteral [/usr/local/bin/node]
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
这行改为
await remoteConfigFn({config, env, empEnv, hot, webpack})
会不会有什么影响呢
如题。
╔════════════════════╤═══════════════╗
║ Emp & Deps │ Version ║
╟────────────────────┼───────────────╢
║ @efox/emp-cli │ 1.6.5 ║
╟────────────────────┼───────────────╢
║ webpack │ ^5.11.0 ║
╟────────────────────┼───────────────╢
║ webpack-dev-server │ ^4.0.0-beta.0 ║
╟────────────────────┼───────────────╢
║ typescript │ ^4.0.5 ║
╟────────────────────┼───────────────╢
║ postcss │ ^8.1.4 ║
╚════════════════════╧═══════════════╝
(node:56470) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (/Users/songtao/node_modules/webpack/lib/NormalModule.js:172:10)
at /Users/songtao/Documents/df/backend/node_modules/@efox/emp-vue2/node_modules/vue-loader/lib/plugin-webpack5.js:36:70
at Hook.eval [as call] (eval at create (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:104:1)
at Hook.CALL_DELEGATE [as _call] (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/lib/Compiler.js:988:26)
at /Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/lib/Compiler.js:1029:29
at Hook.eval [as callAsync] (eval at create (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/lib/Compiler.js:1024:28)
at /Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/lib/Watching.js:112:19
at _next0 (eval at create (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at eval (eval at create (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)
(Use node --trace-warnings ...
to show where the warning was created)
(node:56470) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict
(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:56470) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
项目启动是通过dva 生成的app.start('#root')启动项目,如何接入emp呢
也是放到bootstrap文件中吗
reactVue-vue,reactVue-react, 进入目录后 运行 yarn, 然后 执行 emp dev, 不能正常运行
config.plugin("html").tap(args => {
console.log(process.env);
// console.log(process.env);
args[0] = {
...args[0],
...{
title: "EMP Vue2 Project",
files: {
js: ["http://localhost:8009/emp.js"]
}
}
};
return args;
});
repo https://github.com/ckken/emp-vue-mutlehost
当两个base项目的package.json name的名字重复并且,路径组件名重复时,会产生覆盖问题。所以各位使用的时候,要确保package.json的name是唯一的。
适配 17~16之间的冲突
你这个emp本仓库代码项目使用了learn管理,如何快速调试 ,支持独立方式来 调试projects的项目?
config.optimization.minimizer('css').use(CssMinimizerPlugin, [
{
parallel: true,
sourceMap: false,
minimizerOptions: {
preset: [
'default',
{
discardComments: {removeAll: true},
},
],
},
},
])
刚刚安装了一下其他的依赖 ,webpack也更新到了5.10.3 然后报错如下
<e> [webpack-dev-middleware] assets by path js/*.js 2.83 MiB
<e> asset js/index.117f108e.js 1.95 MiB [emitted] [immutable] (name: index)
<e> asset js/vendors-node_modules_vue-loader_lib_runtime_componentNormalizer_js-node_modules_vue-router_di-d611d3.e2bc78d8.js 815 KiB [emitted] [immutable] (id hint: vendors)
<e> asset js/src_pages_index_vue.e1a3a2d3.js 58.5 KiB [emitted] [immutable]
<e> asset js/src_bootstrap_js.6066d572.js 19.5 KiB [emitted] [immutable]
<e> asset js/src_pages_page2_vue.c27497d1.js 12.8 KiB [emitted] [immutable]
<e> asset favicon.ico 3.08 KiB [emitted]
<e> asset index.html 1.91 KiB [emitted]
<e> runtime modules 10.1 KiB 14 modules
<e> modules by path ./node_modules/core-js/ 348 KiB
<e> modules by path ./node_modules/core-js/modules/*.js 204 KiB 192 modules
<e> modules by path ./node_modules/core-js/internals/*.js 144 KiB 157 modules
<e> modules by path ./src/ 19.1 KiB 22 modules
<e> modules by path ./node_modules/webpack-dev-server/client/ 71 KiB 12 modules
<e> modules by path ./node_modules/html-entities/lib/*.js 58.1 KiB 4 modules
<e> modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
<e> modules by path ./node_modules/url/ 37.4 KiB 3 modules
<e> modules by path ./node_modules/querystring/*.js 4.51 KiB
<e> ./node_modules/querystring/index.js 127 bytes [built] [code generated]
<e> ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
<e> ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
<e> 9 modules
<e>
<e> ERROR in Error: Child compilation failed:
<e> Cannot read property 'slice' of undefined
<e> TypeError: Cannot read property 'slice' of undefined
<e>
<e> - plugin-webpack5.js:123 Object.resourceQuery [as fn]
<e> [vue2-mf-base]/[vue-loader]/lib/plugin-webpack5.js:123:39
<e>
<e> - RuleSetCompiler.js:99 execRule
<e> [vue2-mf-base]/[webpack]/lib/rules/RuleSetCompiler.js:99:21
<e>
<e> - RuleSetCompiler.js:118 execRule
<e> [vue2-mf-base]/[webpack]/lib/rules/RuleSetCompiler.js:118:6
<e>
<e> - RuleSetCompiler.js:137 Object.exec
<e> [vue2-mf-base]/[webpack]/lib/rules/RuleSetCompiler.js:137:6
<e>
<e> - NormalModuleFactory.js:403
<e> [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:403:34
<e>
<e> - NormalModuleFactory.js:116
<e> [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:116:11
<e>
<e> - NormalModuleFactory.js:544
<e> [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:544:8
<e>
<e>
<e> - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
<e> [vue2-mf-base]/[webpack]/[tapable]/lib/Hook.js:18:14
<e>
<e> - NormalModuleFactory.js:542
<e> [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:542:8
<e>
<e>
<e> - NormalModuleFactory.js:232
<e> [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:232:24
<e>
<e>
<e>
<e> - ExternalModuleFactoryPlugin.js:126 next
<e> [vue2-mf-base]/[webpack]/lib/ExternalModuleFactoryPlugin.js:126:43
<e>
<e> - ExternalModuleFactoryPlugin.js:132 handleExternals
<e> [vue2-mf-base]/[webpack]/lib/ExternalModuleFactoryPlugin.js:132:7
<e>
<e> - child-compiler.js:159
<e> [vue2-mf-base]/[html-webpack-plugin]/lib/child-compiler.js:159:18
<e>
<e> - Compiler.js:511
<e> [vue2-mf-base]/[webpack]/lib/Compiler.js:511:11
<e>
<e> - Compiler.js:1059
<e> [vue2-mf-base]/[webpack]/lib/Compiler.js:1059:17
<e>
<e>
<e> - task_queues.js:93 processTicksAndRejections
<e> internal/process/task_queues.js:93:5
<e>
<e> 1 ERROR in child compilations
<e> webpack 5.10.3 compiled with 2 errors in 1669 ms
Hi, I am pretty new to this module federation and stuff, and I kinda stumbled over your repo from the GitHub issue mentioned. Is there any way that I could use the type definitions for your repository, as VSCode yells for not having types on my webpack.config.ts. I might be missing something, but help from any of the contributors would be massive. Thanks.
(P.S I tried installing the @types thingy, yet it didn't work)
empVue2Ts 脚手架
// 设置项目端口
config.devServer.port(port);
// emp-config中设置别名,程序run的过程中不识别
config.resolve.alias.set('@', resolve('src'))
错误如下:
ERROR in ./src/views/personal-center/routes.ts 5:11-74
Module not found: Error: Can't resolve '@/views/personal-center/government/Administrators.vue' in '/Users/alvin/Documents/dianzi/micro/emergency-wisdom-search/src/views/personal-center'
@ ./src/views/ sync routes.ts$ ./personal-center/routes.ts views/personal-center/routes.ts
@ ./src/router/index.ts 8:20-68
@ ./src/bootstrap.ts 6:0-30 24:10-16
@ ./src/main.ts 3:0-21
需要提取公共配置信息
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
然后改成这样
node --max_old_space_size=4096 node_modules/.bin/emp dev
还是会一直增加内存的使用量,过一会儿又报那个问题了。
而且保存一次,就编译不出来了。卡住了
基于react 隔离错误 避免大项目交叉影响而白屏
This is the output of yarn build
It gives folder name as undefined no matter what value I provide in output or path or even if I remove it.
webpack 5.0.0 compiled successfully in 9695 ms
[npm-dts] [info] : ________________________________________
[npm-dts] [info] : | |
[npm-dts] [info] : | |
[npm-dts] [info] : | npm-dts v1.3.6 |
[npm-dts] [info] : | by Vytenis Urbonavičius |
[npm-dts] [info] : | |
[npm-dts] [info] : |________________________________________|
[npm-dts] [info] :
[npm-dts] [info] : Generating declarations for "F:\eMumbaProjects\js-porting-doc\spitz-webapp\web-app\federation"...
[npm-dts] [verbose] : Locating OS Temporary Directory...
[npm-dts] [verbose] : OS Temporary Directory was located!
[npm-dts] [verbose] : Will now reset "tmp" directory...
[npm-dts] [verbose] : Cleaning up "tmp" directory...
[npm-dts] [verbose] : "tmp" directory was cleaned!
[npm-dts] [verbose] : Preparing "tmp" directory...
[npm-dts] [verbose] : "tmp" directory was prepared!
[npm-dts] [verbose] : Generating per-file typings using TSC...
[npm-dts] [debug] : tsc --declaration --emitDeclarationOnly --declarationDir "C:\Users\Emumba\AppData\Local\Temp\tmp-26216-kUVWpx2n7A9Z\npm-dts"
[npm-dts] [verbose] : Per-file typings have been generated using TSC!
[npm-dts] [verbose] : Loading list of generated typing files...
[npm-dts] [verbose] : Successfully loaded list of generated typing files!
[npm-dts] [verbose] : Loading declaration files and mapping to modules...
[npm-dts] [verbose] : Loading package.json...
[npm-dts] [verbose] : package.json information has been loaded!
[npm-dts] [verbose] : Loaded declaration files and mapped to modules!
[npm-dts] [verbose] : Cleaning up "tmp" directory...
[npm-dts] [verbose] : "tmp" directory was cleaned!
[npm-dts] [verbose] : Combining typings into single file...
[npm-dts] [verbose] : Combined typings into a single file!
[npm-dts] [verbose] : Adding alias for main file of the package...
[npm-dts] [verbose] : Successfully created alias for main file!
[npm-dts] [verbose] : Ensuring that output folder exists...
[npm-dts] [debug] : Creating output folder: "F:\eMumbaProjects\js-porting-doc\spitz-webapp\web-app\federation\undefined\dist"...
[npm-dts] [verbose] : Output folder is ready!
[npm-dts] [verbose] : Storing typings into undefined//dist/federation.d.ts file...
[npm-dts] [verbose] : Successfully created undefined//dist/federation.d.ts file!
[npm-dts] [verbose] : Deleting OS Temporary Directory...
[npm-dts] [verbose] : OS Temporary Directory was deleted!
[npm-dts] [info] : Generation is completed!
通过二次封装element-ui组件库创建了一个共享的库。其他项目在使用该共享组件库中的组件的时候是未编译的状态,样式什么的都未生效,这个该怎么解决呀
实际使用过程中,往往会出现其实所有项目都是由批开发者开发的。
所以本地地址如何指定
1、之前可以通过process.ENV.NODE_ENV来获取。
现在在emp-config.js里该值为undefined
2、设置代理请求时,在emp-config.js给config.devServer添加proxy属性值,结果没有效果,实际未进行代理转发。
然后在node_modules里的@efox/emp-cli/webpack/config/devServer.js文件里添加同样的代码,代理转发成功。
3、还有个小疑问是在哪里进行webpack自定义一些配置,如果是emp-config.js文件里写的话好像没有效果。
如标题
例如: base-vue 项目是个基础框架页面(也有自己的路由), 那么子 project 也是个多个路由的应用. 那如何加载呢? demo 里没看出给出官方方案或有什么 API ?
目前看到的是报错
throw new Error('Module "' + module + '" does not exist in container.');
在bootstrap.js里catch不到
try{
const Abc = defineAsyncComponent(() => import('vue3Components/abc'))
app.component('abc-element', Abc)
}catch(err){
console.log(err)
}
现在子应用是在构建之前写死的,可以做到构建之后动态注册子应用吗
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.