对于某些第三方库,可能会引用一些全局的依赖,比如 jQuery 的 $ ,所以这些库可能会创建一些需要导出的全局变量,这些不合规范的模块就是 Shimming 预置依赖发挥作用的地方。

    Shimming 还有一个及其有用的场景就是:当我们希望 polyfill(也就是扩展浏览器能力)来支持到更多用户的时候,在这种个情况下,我们可能只是想将这些 polyfill 提供给那些需要的浏览器,也就是实现按需加载。

    比如我们想要全局暴露 lodash
    我们可以使用 webpack 内置的 ProvidePlugin 插件

    1. // webpack.config.js
    2. const webpack = require('webpack')
    3. module.exports = {
    4. entry: './src/index.js',
    5. mode: 'development',
    6. plugins: [
    7. new webpack.ProvidePlugin({
    8. _ : 'lodash'
    9. })
    10. ]
    11. }

    随后我们在需要引入 lodash 的地方就不在需要手动引入了,可以直接使用

    1. // index.js
    2. console.log(_.join(['hello', 'shimming'], ' '))