I recently started using Webpack for frontend and came across the issue with modules.
For example, I have two modules, one uses another (to be specific its angular-bootstrap-slider and bootstrap-slider ). angular-bootstrap-slider
was failing to initialize due the fact that Slider
function was undefined.
Now I understand that I can either export Slider
globally (which I did with jquery and angular libs) or import Slider
in angular-bootstrap-slider (I picked that).
I don't like both options, because global exports is one of the things I wanted to avoid using webpack and importing something in library means changing it's code.
So am I missing something or maybe there is some best practice to deal with dependencies?
What you are looking for is shimming modules .
This allows you to declare that Slider
is in fact to be imported from the module bootstrap-slider
:
...
plugins: [
new webpack.ProvidePlugin({
'Slider': 'bootstrap-slider'
})
]
I think you can use imports-loader
: https://github.com/webpack/imports-loader
imports loader for webpack
Can be used to inject variables into the scope of a module. This is especially useful if third-party modules are relying on global variables like $ or this being the window object.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.