【webpack】快速笔记21 -- shimming跨模块构建工具

最新推荐文章于 2024-08-08 14:35:55 发布

@Umbrella

最新推荐文章于 2024-08-08 14:35:55 发布

阅读量195

点赞数

分类专栏：【webpack】文章标签： shimming

本文链接：https://blog.csdn.net/Umbrella_Um/article/details/100665457

版权

【webpack】专栏收录该内容

28 篇文章 2 订阅

订阅专栏

场景

比如我们新建一个src > jquery-ui.js，里面这样写：

export function ui() {
    $('body').css('background','pink')
}

问题：

然后在src > index.js引入这个ui方法，并且调用一次，看起来应该是可以实现ui里面的逻辑的，我们重新打包一下，这次我们直接使用开发环境的打包npm run dev，发现控制台报错，说在jquery-ui中找不到这个$的定义，为什么？

重新审视：

webpack在第一篇就说明了它的定义，他是一个模块打包工具，他会将index.js和jquery-ui.js看成是两个不同的模块进行打包，又因为模块是有自身的作用域的，一般模块间是不能相互去干涉影响的耦合问题，这也是webpack的特性让问题能快速准确的找到对应的根源，所以对于打包jquery-ui.js的时候，是不会使用index.js模块里面的jquery的，所以报错，那我们怎么解决这个问题呢？

shimming

优化：

针对上面的问题，我们当然可以直接在jquery-ui.js上面引入jquery库，虽然可以正确执行，但是如果这是一个插件库的话，你就不能随便加上这些另外的第三方库，那我们此时就需要使用webpack提供的shimming的跨模块的功能 ↓

webpack.common.js:

我们使用webpack提供的插件ProvidePlugin完成这个功能，将变量$变成具有跨模块的功能，当webpack打包发现某模块中存在该变量并且没有对应导入，就会自动识别进行底层导入处理

// + 新增
const webpack  = require('webpack');
plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.ProvidePlugin({
		$: 'jquery'
	})
],

配置完成后，此时重新打包一下npm run dev，发现没有报错了；配置很简单，只要你提出需要进行跨模块的变量对应配置第三方模块引入即可

来个shimming的实践demo

此时我们可以将src >jquery-ui.js删除掉，清空src > index.js的代码，我们来实现一个让各自模块的this指向window

首先我们看看index.js里打印一下this，看看模块中this的指向是什么：
在这里插入图片描述
发现他是指向当前模块对象，那如果我想让其指向全局window怎么处理 ↓

安装imports-loader：

npm install imports-loader -D

配置webpack.common.js：

        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                // + 新增更改
                use: [{
                    loader: 'babel-loader'
                },{
                    loader: 'imports-loader?this=>window'  
                }],
                // loader: 'babel-loader',   // - 注释
            },