对于某些第三方库,可能会引用一些全局的依赖,比如 jQuery 的 $ ,所以这些库可能会创建一些需要导出的全局变量,这些不合规范的模块就是 Shimming 预置依赖发挥作用的地方。
Shimming 还有一个及其有用的场景就是:当我们希望 polyfill(也就是扩展浏览器能力)来支持到更多用户的时候,在这种个情况下,我们可能只是想将这些 polyfill 提供给那些需要的浏览器,也就是实现按需加载。
比如我们想要全局暴露 lodash
我们可以使用 webpack 内置的 ProvidePlugin 插件
// webpack.config.js
const webpack = require('webpack')
module.exports = {
entry: './src/index.js',
mode: 'development',
plugins: [
new webpack.ProvidePlugin({
_ : 'lodash'
})
]
}
随后我们在需要引入 lodash 的地方就不在需要手动引入了,可以直接使用
// index.js
console.log(_.join(['hello', 'shimming'], ' '))