webpack shimmimg

发布时间:2019-06-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webpack shimmimg脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

模块的shim其实在webpack中可以使用imports-loaderexports-loader来完成。

1.imports-loader

顾名思义,导入模块的处理器。它可以做的事情包括:

  • 前置插入模块依赖,配置前置(相当于插入各种类型数据)

  • this 注入,amD define 禁止

因此,当我们使用了一些jquery插件的时候,这些插件全局依赖了jquery(代码中显式调用$),直接导入jquery插件会报错,找不到$啊。

解决方案就是,将VAR $ = require('jquery') 前置插入到jquery插件中。


module.exports = {
    ...
    module: {
        loaders: [
            {
                test: require.resolve("some-module"),
                loader: "imports-loader?$=jquery"
            }
        ]
    }
};

语法:

加载器查询值 含义
Angular var angular = require("angular");
$=jquery var $ = require("jquery");
define=>false var define = false;
config=>{Size:50} var config = {size:50};
this=>window (function () { ... }).call(window);

模块别名命名使用=,其它变量命名定义,使用=>语法。

多个值:

module.exports = {
    ...
    module: {
        loaders: [
            {
                test: require.resolve("some-module"),
                loader: "imports-loader?$=jquery,angular,config=>{ data: ''},this=>window,define=>false"
            }
        ]
    }
};

AMD 禁用

有很多模块在使用 CommonJS 前会进行 define 函数的检查。自从 webpack 两种格式都可以使用后,在这种场景下默认使用了 AMD 可能会造成某些问题(如果接口的实现比较古怪)

define=>false

PRovidePlugin的区别

ProvidePlugin主要用来省略模块(只对AMD和CMD模块有效)依赖导入写法。比如:
webpack.config.js

var provide = new webpack.ProvidePlugin({
    $: 'jquery',//key值为暴露全局的变量名,val值为模块名
    jQuery: 'jquery' 
});
config.plugins.push(provide)

a.js

//var $ = require('jquery');//可以省略咯
$('body').prepend('<p style="font-size:30px;color:#333">import loader test</p>');

因此,你的jquery文件必须支持AMD或者CMD的模块规范,才能够使用ProvidePlugin

2.exports-loader

主要用来将全局模块导出为commonjs格式。

module.exports = {
  module: {
    rules: [{
      test: require.resolve("some-module"),
      use: 'exports-loader?file,parse=helpers.parse' //file=file,parse=helper.parse简写
      // 在文件的码中加入以下代码
      //  exports["file"] = file;
      //  exports["parse"] = helpers.parse;
    }]
  }
};

3.expose-loader

expose-loader 用来把模块(CMD/AMD/UMD)暴露到全局变量。

注意: 模块必须在你的 bundle 中被 require() 过,否则他们将不会被暴露。

module: {
  rules: [{
          test: require.resolve('jquery'),
          use: [{
              loader: 'expose-loader',
              options: 'jQuery'
          },{
              loader: 'expose-loader',
              options: '$'
          }]
      }]
}

总结:

1.imports-loader,ProvidePlugin,expose-loader三者之间功能比较雷同,但是expose-loader需要显式require。
2.exports-loader主要用于导出commonjs模块。

脚本宝典总结

以上是脚本宝典为你收集整理的webpack shimmimg全部内容,希望文章能够帮你解决webpack shimmimg所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。