shim 预置依赖

1、使用场景

​ 1.1 将一些第三方库作为全局依赖，例如jquery中的$, lodash中的_

​ 1.2 使用polyfill扩展浏览器能力，来支持更多的语法。

2、预置全局依赖

例如我们要引入lodash-es，我们需要使用到webpack的ProvidePlugin()。在webpack.config,js中设置：

const webpack = require('webpack');

module.exports = {
	plugins: [
    new webpack.ProvidePlugin({
            _:'lodash-es',
            join: ['lodash-es', 'join']
      }),
  ]
}

这里我们可以将整个lodash-es定义为-, 将其join()定义为join。这样在代码编译过程中，遇到- 或者 join就回去使用lodash-es。

不建议使用全局依赖。使用全局依赖后，bundle中会整个引入第三方库，无法优化bundle打包方式。而且前端的模块化开发要求模块之间彼此隔离，不依赖于全局变量。

3、全局export

​ 将某些不支持模块化规范的模块所声明的全局变量导出。使用exports-loader。

npm install exports-loader --save-dev

webpack中配置

module.exports = {
  module: {
    rules: [
      {
        test: path.resolve(__dirname, 'src/globals.js'),
        use: "exports-loader?file,parse=helpers.parse"
      },
    ],
  },
}

这里使用exports-loader指定/src/globals.js，将file导出为file，helpers.parse导出为parse。

globals.js

var file = 'blah.txt'
var helpers = {
    test: () => { console.log('test') },
    parse: () => { console.log('parse') }
}

index.js

import { file, parse } from './globals.js'
function components() {
    var dom = document.createElement('p');
    dom.innerHTML = _.join(['123', 'webpack'], ' ');
    var bar = document.createElement('br');
    dom.appendChild(bar);
    console.log(file);
    parse();
    return dom;
}

document.body.appendChild(components());

上面demo可以看到,globals.js是不符合模块化规范的，只是定义了几个全局变量，正常情况下无法在index.js中使用import()。

通过exports-loader将globals.js导出并声明，这样就可以实现在全局内引用。

4、babel-polyfill

babel默认只转换新的js语法，但是不转换新的API，比如Map、Set、Promise，以及一些定义在全局对象上的方法，比如Array.from。如果想让这个方法运行，必须使用babel-polyfill,为当前环境提供一个垫片。

polyfill指的是"用于实现浏览器不支持原生功能的代码"。比如对于不支持fetch函数的浏览器，需要在网页引入对应fetch的polyfill。然后这个polyfill就给window对象添加了一个fetch函数。

npm install babel-polyfill --save

这里使用 --save而不是--save-dev，因为我们需要babel-polyfill在源代码之前运行，需要它成为一个dependencies,而不是一个devDependencies。

然后在index.js最上面引入

 import 'babel-polyfill'

对于fetch

npm install --save whatwg-fetch


import 'babel-polyfill';
import 'whatwg-fetch';

shim/polyfill必须运行于所有其他代码之前，而且需要同步加载。下载第三方包是需要--save 而不是 --save-dev