You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
mf1 - a library that is being built using parcel (v2) mainapp - an application built using parcel (v2)
In mf1 I have the following main.js
export { default as Example } from './Example.vue'
The Example.vue is a very simple Vue.js component that will only render a header with some text. Nothing fancy.
The package.json has the following entries to build it as a library:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
and App.vue
<template>
<h1>Hello, world!</h1>
<Example />
</template>
<script>
import { defineComponent } from 'vue'
import { Example } from 'mf1'
export default defineComponent({
components: {
Example
}
})
</script>
In mf1 I've executed the following:
$ npm link
which registers the mf1 as linkable npm module. Then in mainapp I can do
$ npm link mf1
and the library becomes automatically available to mainapp.
This is more/less the standard way of working with libraries. There are a few problems with this approach using Parcel but the most annoying that Parcel caches it. Forever.
I have read in the docs about the link: protocol, which is awesome but in the end it means that if I want to work on the microfrontend I need to first and foremost use yarn instead of just npm and second I need to modify the package.json in mainapp which is not acceptable. When working in an environment that has multiple microfrontends all separated into separate repositories can still be worked on in the context of the mainapp. Going monorepo is one solution, but it's good if the microfrontends are deployed together with mainapp which isn't necessarily the case. In my project, the mf1 and other dependencies are dynamically loaded using system.js from predefined URLs which allow for separate deployment of individual microfrontends (one of the key criteria!).
The second most important criteria is that in big projects (which are the primary target for splitting into microfrontends) the build can take forever or can be done using completely different tools. The main thing is the project is not built from sources but the built version is to be used.
What I'd like to do, is to define the mf1 dependency as a standard dependency to the project (probably using a company prefix like "@mycompany/mf1") and then be able to use npm link and npm link @mycompany/mf1 and somehow force Parcel to reload the page after the mf1 library changed. It can be a full-page reload, I don't mind, as long as the library is not cached.
So In the end I'd like to be able to run mainapp with mf1 npm-linked to mainapp and have mainappknow that the mf1 library changed and use the new build instead of the old one. Would that be possible? If so, how?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I have the following setup:
mf1
- a library that is being built using parcel (v2)mainapp
- an application built using parcel (v2)In
mf1
I have the followingmain.js
The
Example.vue
is a very simple Vue.js component that will only render a header with some text. Nothing fancy.The
package.json
has the following entries to build it as a library:All according to the official docs.
In
mainapp
I have the following:main.js
and
App.vue
In
mf1
I've executed the following:which registers the
mf1
as linkable npm module. Then inmainapp
I can doand the library becomes automatically available to
mainapp
.This is more/less the standard way of working with libraries. There are a few problems with this approach using Parcel but the most annoying that Parcel caches it. Forever.
I have read in the docs about the
link:
protocol, which is awesome but in the end it means that if I want to work on the microfrontend I need to first and foremost use yarn instead of just npm and second I need to modify thepackage.json
inmainapp
which is not acceptable. When working in an environment that has multiple microfrontends all separated into separate repositories can still be worked on in the context of themainapp
. Going monorepo is one solution, but it's good if the microfrontends are deployed together withmainapp
which isn't necessarily the case. In my project, themf1
and other dependencies are dynamically loaded usingsystem.js
from predefined URLs which allow for separate deployment of individual microfrontends (one of the key criteria!).The second most important criteria is that in big projects (which are the primary target for splitting into microfrontends) the build can take forever or can be done using completely different tools. The main thing is the project is not built from sources but the built version is to be used.
What I'd like to do, is to define the
mf1
dependency as a standard dependency to the project (probably using a company prefix like"@mycompany/mf1")
and then be able to usenpm link
andnpm link @mycompany/mf1
and somehow force Parcel to reload the page after themf1
library changed. It can be a full-page reload, I don't mind, as long as the library is not cached.So In the end I'd like to be able to run
mainapp
withmf1
npm-linked tomainapp
and havemainapp
know that themf1
library changed and use the new build instead of the old one. Would that be possible? If so, how?Beta Was this translation helpful? Give feedback.
All reactions