shimming

低版本瀏覽器不支持promise，使用polyfill去實(shí)現(xiàn)promise就是一個(gè)墊片

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)

• 此時(shí)運(yùn)行會(huì)報(bào)錯(cuò)，因?yàn)閖query.ui.js中并沒(méi)有引入jquery,webpack基于模塊打包，jquery.ui.js是無(wú)法找到$的（變量隔離）所以無(wú)法識(shí)別$

• 使用webpack的插件

plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),
    new CleanWebpackPlugin({
        root: path.resolve(__dirname, '../')
    }),
    new webpack.ProvidePlugin({
        // 模塊中使用了$就自動(dòng)引入jquery，并將jquery賦值給$
        $: 'jquery'
    })
]

• 此時(shí)index.js和jquery.ui.js都不需要import $ from 'jquery',但是能成功運(yùn)行，這種方式就叫墊片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']
    })
]

// 此時(shí)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"
        }],
    }]
}