[译]webpack官网文档 ：指南 -- 14.辅助

原创翻译，转载请注明出处。 

原文地址：https://webpack.js.org/guides/shimming/

 

Webpack作为一个模块打包工具，能识别由ES2015模块，CommonJS或AMD编写的模块。但是有时候，使用第三方库的时候，它们期望有些依赖是全局可用的，给jquery定义别名$。它们也可能会创建用来导出的全局变量。这里我们会看到几种帮助webpack识别这些零碎模块的方式。

#相对于被打包的dist版本，更喜欢未压缩的CommonJS/AMD文件

很多模块在package.json的main字段里指定dist版本的链接。虽然这可能对大多数的开发者有利，但是对于webpack最好指定到src版本，因为这样的话，webpack能更好的优化依赖。不管怎样多数情况下dist版本也工作的很好。

// webpack.config.js
 
module.exports ={
    ...
    resolve:{
        alias:{
            jquery:"jquery/src/jquery"
        }
    }
};

 

ProvidePlugin

ProvidePlugin插件可以把一个模块像一个变量一样，提供给webapck请求的所有模块。只有当你使用这个变量的时候，这个模块才会被请求。一些既有的模块使用一些已经存在的特定的全局变量，像jQuery插件使用$或jQuery。这种情境下，你可以通过配置webpack，每一个使用全局$标识符的地方，都会先执行var $ = require(“jquery”)。

module.exports ={
  plugins:[
    newwebpack.ProvidePlugin({
      $:'jquery',
      jQuery:'jquery'
    })
  ]
};

 

这个插件还可以通过配置一个格式为[module, child, ...children?]的路径数组，导出特定的模块。下面的配置就可以从TypeScript的tslib包里引入__assign函数，不管在哪里都可以使用它。

module.exports ={
  plugins:[
    newwebpack.ProvidePlugin({
      __assign:['tslib','__assign'],
      __extends:['tslib','__extends'],
    })
  ]
};

 

imports-loader

imports-loader可以在请求的既存模块里插入必要的全局变量，一些既存的模块把this作为window对象。当这种模块在CommonJS上下文环境里执行的时候会发生问题，this等同于module.exports。这种情况下可以使用imports-loader来复写this。

webpack.config.js

module.exports ={
  module:{
    rules:[{
      test: require.resolve("some-module"),
      use:'imports-loader?this=>window'
    }]
  }
};

 

一些模块支持不同的模块类型，像AMD，CommonJS和既存默认的。多数情况下他们先检查define，然后用一些复杂的代码导出变量。在这种情况下，可以设定define=false来强制设定CommonJS路径。

webpack.config.js

module.exports ={
  module:{
    rules:[{
      test: require.resolve("some-module"),
      use:'imports-loader?define=>false'
    }]
  }
};

 

exports-loader

一个库创建了一些它认为用户会使用的全局变量，这种情况下，我们可以使用exports-loader，在CommonJS格式下导出全局变量。例如为了以file导出file，以parse导出helpers.parse：

webpack.config.js

module.exports ={
  module:{
    rules:[{
      test: require.resolve("some-module"),
      use:'exports-loader?file,parse=helpers.parse'
      // adds below code the file's source:
      //  exports["file"] = file;
      //  exports["parse"] = helpers.parse;
    }]
  }
};

 

script-loader

Script-loader在全局上下文里提供代码，就像你把代码加到script标签里一样。这种模式下，每一个普通的库应该都适用。require，module等还不确定。

假设你有一个legacy.js文件，包含：

GLOBAL_CONFIG ={};

 

使用script-loader…

require('script-loader!legacy.js');

 

基本用法：

eval("GLOBAL_CONFIG = {};");

 

noParse选项

当没有AMD或者CommonSJ版本的模块的前提下，你还想引入dist，你可以把模块标记成noParse。这样webpack就只是引入模块而不解析它，这样可以提高编译时间。

module.exports ={
  module:{
    noParse:/jquery|backbone/
  }
};

 

 

-- End --