使用带有webpack的模块

Question

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?

Answer 1

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'  
  })
]

Answer 2

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.