webpack学习第十六步—— 垫片Shimming

shimming

低版本浏览器不支持promise，使用polyfill去实现promise就是一个垫片

jquery

• 新建jquery.ui.js

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

• 修改index.js,在其中使用jquery.ui.js

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

ui()
const dom = $('<div>')
dom.html(_.join(['a','b','c'],'--!-'))

$('body').append(dom)

• 此时运行会报错，因为jquery.ui.js中并没有引入jquery,webpack基于模块打包，jquery.ui.js是无法找到$的（变量隔离）所以无法识别$

• 使用webpack的插件

plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),
    new CleanWebpackPlugin({
        root: path.resolve(__dirname, '../')
    }),
    new webpack.ProvidePlugin({
        // 模块中使用了$就自动引入jquery，并将jquery赋值给$
        $: 'jquery'
    })
]

• 此时index.js和jquery.ui.js都不需要import $ from 'jquery',但是能成功运行，这种方式就叫垫片Shimming

• lodash也使用垫片，这样使用lodash的地方也不需要import _ from 'lodash'

plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),
    new CleanWebpackPlugin({
        root: path.resolve(__dirname, '../')
    }),
    new webpack.ProvidePlugin({
        $: 'jquery',
        _: 'lodash'
    })
]

• 也可以为方法使用垫片

plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),
    new CleanWebpackPlugin({
        root: path.resolve(__dirname, '../')
    }),
    new webpack.ProvidePlugin({
        $: 'jquery',
        _join: ['lodash','join']
    })
]

// 此时jquery.ui.js可改写为
export function ui() {
    $('body').css('background',_join(['green'],''))
}

修改this指向的垫片

• this是指向模块而非window的

console.log(this)
console.log(this === window)

• 使用imports-loader改变this指向

npm install imports-loader --save

module: {
    rules: [{
        test: /\.(jpg|png|gif)$/,
        use: {
            loader: "url-loader",
            options: {
                name: '[name]_[hash].[ext]',
                outputPath: 'images/',
                limit: 2048
            }
        }
    },{
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
            loader: "babel-loader"
        },{
            // 使this指向window
            loader: "imports-loader?this=>window"
        }],
    }]
}