webpack中shimming的概念

在webpack打包过程中会去做一些代码上的兼容，或者打包过程的兼容，比如之前使用过的babel-polyfill这个工具，他解决了es6代码在低版本浏览器的兼容。这就是webpack中的垫片。他解决打包过程中一些兼容性的问题。这些兼容性的问题不仅仅是浏览器上的兼容性问题。还有一些其他的兼容性问题，我们举几个例子

index.html

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>html template</title>
　　</head>
　　<body>
　　　　<div id='root'></div>
　　</body>
</html>

index.js

import _ from 'lodash';
import $ from 'jquery';
import { ui } from './jquery.ui';

ui();

const dom = $('<div>');
dom.html(_.join(['1','1'],'---'));
$('body').append(dom);

jquery.ui.js

export function ui(){
　　$('body').css('background', '#abcdef');
}

这个时候发现ui()，没有正确的运行。报错了jquery.ui.js里面找不到$。在index.js引入了$。但是为什么jquery.ui.js里面找不到$呢？原因很简单，在webpack中，是基于模块打包的。模块里面这些变量只能在这个模块的文件里面被使用。而换了一个文件，再想使用上面文件的比那里，那是不可能的。通过这种形式，模块与模块之间不会有任何的耦合。这样出了问题，直接在自己的模块找问题就行了。不会因为一个模块而影响到另外一个模块。所以变量是隔离的。那么想要使用这个$，就必须在jquery.ui.js的顶部去引入jquery。

那么这个jquery代码不是我的业务代码，他是第三方的库。是别人写的。所以在源码里面去加入jquery的引入是不太现实的。这个时候我们可以用一个垫片的形式来解决这个问题。在webpack.common.js里面引入webpack。webpack自带一个插件，ProvidePlugin。在这里就可以搞一点事情了。

webpack.common.js

const webpack = require('webpack');
module.exports = {
　　plugins: [
　　　　// webpack自带的插件
　　　　new webpack.ProvidePlugin({
　　　　　　// 意思是如果我的一个模块中使用了$这样一个字符串，我就会在模块中自动的引入jquery这个
　　　　　　$: 'jquery'
　　　　})
　　],
}

配置好了之后，重启服务。npm run dev。那么在没有引入jquery的情况下也能用，因为底层自动引入了。这个时候我们就不需要在文件中引入_,$等

webpack.common.js

const webpack = require('webpack');
module.exports = {
　　plugins: [
　　　　// webpack自带的插件
　　　　new webpack.ProvidePlugin({
　　　　　　// 意思是如果我的一个模块中使用了$这样一个字符串，我就会在模块中自动的引入jquery这个
　　　　　　$: 'jquery',
　　　　　　_: 'lodash'
　　　　})
　　],
}

index.html

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>html template</title>
　　</head>
　　<body>
　　　　<div id='root'></div>
　　</body>
</html>

index.js

import { ui } from './jquery.ui';

ui();

const dom = $('<div>');
dom.html(_.join(['1','1'],'---'));
$('body').append(dom);

jquery.ui.js

export function ui(){
　　$('body').css('background', _.join(['#abcdef'],''));
}

重启服务，，没问题。

再举个例子

index.html
<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>html template</title>
　　</head>
　　<body>
　　　　<div id='root'></div>
　　</body>
</html>

index.js

console.log(this === window);

打印出来的是false,也就是src里面的this不指向window。那我就是想让他指向window，怎么做呢？先装一个插件

npm install imports-loader -D

安装好之后再对webpack做一些配置。

module.exports = {
　　module: {
　　　　rules: [{
　　　　　　test: /\.js$/,
　　　　　　exclude: /node_modules/,
　　　　　　use: [{
　　　　　　　　loader: 'babel-loader'
　　　　　　}, {
　　　　　　　　loader: 'imports-loader?this=>window'
　　　　　　}],
　　　　}
　　}
}

在加载js的时候多加载一个loader，叫imports-loader，将this指向window。这个时候打印出来的就是true了。说明模块里面的this就指向window了。实际上也是修改webpack一些默认的行为。或者说实现webpack原始打包无法实现的一些效果。这种行为都叫做shimming。垫片的行为。

shimming这个概念很宽泛，涉及到的东西也非常多。

webpack中shimming的概念

猜你喜欢