王磊的个人技术记录

最近在实现一个动态注入组件时，用到了externals，网上找了很多帖子理解起来都不是很容易，重新整理下。

实现动态组件的思想

1.定义一个模块，里面对外暴露一个变量，提供一个注册方法，往变量里面添加信息

2.动态组件的实现模块引入变量组件，将组件的实现通过 注册方法添加到公共变量中

3.使用动态组件的模块 定义一个component,:is的值在公共变量中获取

这种实现方式就要求组件的实现和组件的使用模块使用的公共变量是同一个才可以。

这个时候就想到用externals 在这两个模块中把公共变量模块都移除掉然后在使用的模块里面静态引入，保证环境中只有一份公共变量。

externals使用中的问题

1，公共组件配置

library 对外暴露时全局变量中的key

libraryTarget 把库暴露时的类型，umd会判断当前系统环境，根据不同的环境选择不同的暴露方式 编译后的代码为:

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define("relate-query-register", [], factory);
	else if(typeof exports === 'object')
		exports["relate-query-register"] = factory();
	else
		root["relate-query-register"] = factory();
})

2.动态组件实现模块配置

打包排除的时候 名称一定要跟 公共变量中配置的output.library的值相同，

externals可以设置引入时的方式。默认不写为全局变量中引入

使用的时候import的是公共变量模块中配置的output.library的值，如图：

3.动态组件使用模块配置

动态组件的使用模块，打包配置跟动态组件的实现模块是一样的，都是把需要引入的公共变量做了打包排除。不同的是，这个模块是功能的入口，需要在加载这个模块时静态引入公共变量，从而保证全局只有一份公共变量。