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
I come here to expose the community the issue I'm facing trying to transform my old js lib with webpack.
Like I said, my lib is pretty old, it was originally written in ES5 on code format which can be executed directly in browser like IE.
I try to bring it on the top of the actual technology and keep compatibility with webpack and babel.
My lib is supposed to be pushed on CDN and integrated on web pages through async script tags. It expose a global variable on window, which will be named MyLib in this thread. In the old way, the MyLib var is declared on window at the very top of the code and populated as things progress.
My lib is integrated in asynchronous way in pages, but some other teams, which have javascript applications loaded asynchronously too, need to synchronize with the global variable of my lib to consume it. The historical solution is an event named MyLibReady dispatched on document and a flag named ready representing the readiness of my lib as a property of my lib (MyLib.ready = true|false).
At the runtime, at the very bottom of the code of my lib, once the global var window.MyLib is fully populated, the flag ready is set to true and the MyLibReady event is dispatched on document, in an init function.
With webpack, it seems to me that the use of output.library was the solution to have the same behavior with source files transformed to modules with exports to build the same API on my lib, but I have an issue that I can't resolve : I can't find a way to set my flag ready and to dispatch my MyLibReady event after my lib to be accessible on the window. My init function is runned inside my lib, before the last export, the event is dispatched, so listeners catch them, try to access to window.MyLib and throw an Error
I hope my problem is clear enough, I hope I'm in the correct place to talk to this, thanks for those who read me and thanks for those who will help me if there's an option/configuration/feature/plugin I missed in webpack to do the trick
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
-
Hello everyone,
I come here to expose the community the issue I'm facing trying to transform my old js lib with webpack.
Like I said, my lib is pretty old, it was originally written in ES5 on code format which can be executed directly in browser like IE.
I try to bring it on the top of the actual technology and keep compatibility with webpack and babel.
My lib is supposed to be pushed on CDN and integrated on web pages through async script tags. It expose a global variable on window, which will be named
MyLib
in this thread. In the old way, theMyLib
var is declared on window at the very top of the code and populated as things progress.My lib is integrated in asynchronous way in pages, but some other teams, which have javascript applications loaded asynchronously too, need to synchronize with the global variable of my lib to consume it. The historical solution is an event named
MyLibReady
dispatched ondocument
and a flag namedready
representing the readiness of my lib as a property of my lib (MyLib.ready = true|false
).At the runtime, at the very bottom of the code of my lib, once the global var
window.MyLib
is fully populated, the flagready
is set totrue
and theMyLibReady
event is dispatched on document, in aninit
function.With webpack, it seems to me that the use of
output.library
was the solution to have the same behavior with source files transformed to modules withexport
s to build the same API on my lib, but I have an issue that I can't resolve : I can't find a way to set my flagready
and to dispatch myMyLibReady
event after my lib to be accessible on the window. Myinit
function is runned inside my lib, before the lastexport
, the event is dispatched, so listeners catch them, try to access towindow.MyLib
and throw an ErrorI hope my problem is clear enough, I hope I'm in the correct place to talk to this, thanks for those who read me and thanks for those who will help me if there's an option/configuration/feature/plugin I missed in webpack to do the trick
Beta Was this translation helpful? Give feedback.
All reactions