webpack externals 深入理解

2020-01-14 01:06:37

参考地址 webpack externals 深入理解

按照官方文档的解释,如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的,但是也可以在我们项目开发中充分使用。

假设:我们开发了一个自己的库,里面引用了lodash这个包,经过webpack打包的时候,发现如果把这个lodash包打入进去,打包文件就会非常大。那么我们就可以externals的方式引入。也就是说,自己的库本身不打包这个lodash,需要用户环境提供。

使用lodash

import _ from 'lodash';

配置externals

externals: {  "lodash": {        commonjs: "lodash",//如果我们的库运行在Node.js环境中,import _ from 'lodash'等价于const _ = require('lodash')
        commonjs2: "lodash",//同上
        amd: "lodash",//如果我们的库使用require.js等加载,等价于 define(["lodash"], factory);
        root: "_"//如果我们的库在浏览器中使用,需要提供一个全局的变量‘_’,等价于 var _ = (window._) or (_);
  }
}
总得来说,externals配置就是为了使import _ from 'lodash'这句代码,在本身不引入lodash的情况下,能够在各个环境都能解释执行。

有一点需要注意的是,假如lodash中在浏览器环境中不提供_的全局变量,那么就没有办法使用。这个"_"是不能随便乱写的。如果外部库lodash提供的是全局变量lodash,那你就得使用lodash

如果你写的库要支持各种环境,你需要设置output中的libraryTarget为umd,也就是将打包的文件,生成为umd规范,适用于各种环境。libraryTarget和externals有藕断丝连的关系,后面会提到。

下面进入正题,externals的配置有以下几种:array , object ,reg。这三种形式都可以传入,前者其实是对后者的包含。

参考这里

Array

数组内的每一个元素又可以是多种形式,包括object, reg, function, string

externals: [
    { // ① object形式
          jquery: 'jQuery', // 
        a: false, // 不是external,配置错误
        b: true, // b 是 external, `module.exports = b`,适用于你所引用的库暴露出的变量和你所使用的库的名称一致的情况,比如moment
        "./c": "c", // "./c" 是 external `module.exports = c`
        "./d": "var d", // "./d" 是 external `module.exports = ./d`  语法错误
        "./f": "commonjs2 ./a/b", // "./f" 是 external `module.exports = require("./a/b")`
        "./f": "commonjs ./a/b", // ...和 commonjs2一样
        "./f": "this ./a/b", // "./f" 是 external `(function() { module.exports = this["./a/b"]; }())`
    },    // abc -> require("abc")
    /^[a-z\-0-9]+$/, // ② reg形式
    function(context, request, callback) { // ③ function形式
        // Every module prefixed with "global-" becomes external
        // "global-abc" -> abc
        if(/^global-/.test(request))            return callback(null, "var " + request.substr(7));
        callback();
    },    "./e" // "./e" 是 external ( require("./e") ) // ④ string形式]

Object

Object形式和上面类似,但是它里面一定是key: value的形式,所以像上面那种string的形式就不可能出现在object形式中。这种情况下使用的最多。

externals:{ 
          jquery: 'jQuery', // 
        a: false, // 不是external,配置错误
        b: true, // b 是 external, `module.exports = b`,适用于你所引用的库暴露出的变量和你所使用的库的名称一致的情况,比如moment
        "./c": "c", // "./c" 是 external `module.exports = c`
        "./d": "var d", // "./d" 是 external `module.exports = ./d`  语法错误
        "./f": "commonjs2 ./a/b", // "./f" 是 external `module.exports = require("./a/b")`
        "./f": "commonjs ./a/b", // ...和 commonjs2一样
        "./f": "this ./a/b", // "./f" 是 external `(function() { module.exports = this["./a/b"]; }())`
    },

reg就不介绍了,也就是正则匹配的形式。可以类比Array类型中的string。

externals引入jquery后,那么不管在代码中使用import $ from 'jquery'还是var $ = require('jquery');,这些代码都能在浏览器中很好的执行。这很好的验证了使用externals的情况。

想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用

那如果想要这样使用 import $ from 'jquery',并且想在Node环境中使用,那么就必须要使用这样 jquery: 'commonjs2 jquery'使用。这样webpack就会把你所需要的模块打包成module.exports = require('jquery'),可以再Node环境中使用。

externals 支持以下模块上下文(module context)

  • global - 外部 library 能够作为全局变量使用。用户可以通过在 script 标签中引入来实现。这是 externals 的默认设置。

  • commonjs - 用户(consumer)应用程序可能使用 CommonJS 模块系统,因此外部 library 应该使用 CommonJS 模块系统,并且应该是一个 CommonJS 模块。

  • commonjs2 - 类似上面几行,但导出的是 module.exports.default

  • amd - 类似上面几行,但使用 AMD 模块系统。

不同环境设置externals方式

  1. 如果你的代码想运行在Node环境中,那么你需要在external中添加前缀commonjs2或者commonjs

externals:{  react:'commonjs2 react',  jquery:'commonjs2 jquery'}

1.如果需要requirejs等符合AMD规范的环境中加载,那就要添加amd

externals:{  react:'amd React',  jquery:'amd jQuery'}

2.如果要在浏览器中运行,那么不用添加什么前缀,默认设置就是global。

externals:{  react:'React',  jquery:'jQuery'}

也可以这样

externals:["React","jQuery"]

这种方式配置下,就是配置你所引用你的库暴露出的全局变量。上面两种模式下或者说,如果你想运行代码在浏览器中,你所引用的包,必须暴露出一个全局变量。如果没有,这种方式不适合在浏览器下使用,可以尝试dll的方式。

这里你可以看出,不同模式下,value是不一样的。2,3模式下,是要引入去全局变量,1模式是要加载包名。那如果这个包的包名和在浏览器下引入的全局变量一致,上面就可以写成一样了,比如moment。

externalslibraryTarget的关系

  • libraryTarget配置如何暴露 library。如果不设置library,那这个library就不暴露。就相当于一个自执行函数

  • externals是决定的是以哪种模式去加载所引入的额外的包

  • libraryTarget决定了你的library运行在哪个环境,哪个环境也就决定了你哪种模式去加载所引入的额外的包。也就是说,externals应该和libraryTarget保持一致。library运行在浏览器中的,你设置externals的模式为commonjs,那代码肯定就运行不了了。

  • 如果是应用程序开发,一般是运行在浏览器环境libraryTarget可以不设置,externals默认的模式是global,也就是以全局变量的模式加载所引入外部的库。

参考:

http://www.css88.com/doc/webp...

http://www.css88.com/doc/webp...

http://www.tangshuang.net/334...


  • 2018-11-17 21:05:48

    Android ANR发生的原因总结和解决办法

    ANR的全称是application not responding,是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过长,都会造成ANR。一般地,这时往往会弹出一个提示框,告知用户当前xxx未响应,用户可选择继续等待或者Force Close。

  • 2018-11-17 21:08:09

    Android 单个应用的内存限制

    获取Android手机应用内存大小 手机不同其性能也不同,手机本身内存可能有大有小,所以针对每个应用的内存大小也不相同。

  • 2018-11-17 21:11:14

    Android中App可分配内存的大小

     结果:(1)未设定属性android:largeheap = "true"时,可以申请到的最大内存空间为221M。      (2)设定属性android:largeheap = "true"时, 可以申请的最大内存空间为478M,是原来的两倍多一些。

  • 2018-11-17 22:44:53

    LeakCanary,30分钟从入门到精通

    在性能优化中,内存是一个不得不聊的话题;然而内存泄漏,显示已经成为内存优化的一个重量级的方向。当前流行的内存泄漏分析工具中,不得不提的就是LeakCanary框架;这是一个集成方便, 使用便捷,配置超级简单的框架,实现的功能却是极为强大的。

  • 2018-11-17 22:53:01

    gc for alloc freed

    在数组中选择图片然后显示,然后。。。logcat不断显示GC回收。最后程序黑屏。

  • 2018-11-17 23:25:38

    Android高效内存1:一张图片占用多少内存

    在做内存优化的时候,我们发现除了解决内存泄露问题,剩下的就只有想办法减少真实的内存占用。而在App中,大部分内存可能被我们图片占用了,所以减少图片的内存占用可以带来直接的效果。本文就简单介绍一张图片到底占用多少内存,我们先假设我们有一张图片时 600 * 800 的,图片占用空间大小假设是 100KB。另外本文知识点也是面试官喜欢问的一个点,看看自己的回答到什么级别了。