Webpack中,如何将一个模块中的方法或者变量暴露为全局变量?

星级:
Webpack中,想要将一个模块中的方法或者变量暴露为全局变量,可以通过将相应模块默认导出,然后在导入模块的应用js文件中将导入的模块通过赋值挂载为浏览器window对象的一个自定义属性实现。

Webpack中,因为ES6模块的引入,代码的复用性与系统性得到了极大的提升。

不过,ES6模块虽然是个好东西,但它还是有一个很大的缺点,那就是如果想要使用模块中定义的变量或者方法,就必须引入相关模块。对于多页面多入口项目文件而言,每一次的引入都将导致输出文件的膨胀,进一步导致项目臃肿,代码的复用性变差。

如果代码的应用场景不多,那倒也没什么,但假如代码在项目的所有网页中都有应用,那就意味着代码在每一个页面都需要引入,这对于项目而言是灾难性的。

对于以上问题,最佳的解决方案便是分别定义一个公共模块[module.js]和一个公共js文件[common.js]。

其中,[module.js] 负责定义需要全局使用的变量,而[common.js]则负责将[module.js] 引入并且将其挂载到浏览器的window对象上,暴露为全局变量。

[module.js] 

//定义一个待转化为全局变量的普通变量
let config = {
domain : 'abc.com',
host : 'https://www.abc.com',
}

//定义一个待转化为全局方法的普通方法
let test = function() {
console.log('这是一个全局方法')
}
//默认导出
export default {
config,
test,
}

[common.js]



//默认导入,以对象变量[abc]接收导入的所有属性与方法
import abc from '@/modules/module.js'

//将接收对象变量[abc]挂载到浏览器对象[window]上
window.abc = abc

//通过自定义的全局对象abc,调用test()方法
abc.test()
//打印自定义全局对象abc
console.log(abc)
//通过自定义的全局对象abc,打印自定义的config对象
console.log(abc.config)
//通过自定义的全局对象abc,打印自定义的config对象中定义的host属性
console.log(abc.config.host)

之后,只需要在html页面中引入[common.js]即可

<script src="/dist/common.js"></script>

【注意】

1. 模块的导入与导出最好采用默认方式,这样的好处在于导入导出简单易用,而且通过自定义的[abc]对象作为代理,将大批量自定义的全局变量与方法挂载到[abc]对象上作为属性使用,无需担心变量名或方法与浏览器对象冲突;

2.将接收对象变量[abc]挂载到浏览器对象[window]上(window.abc = abc),是至关重要的一步。如果没有这一步,那么即便[common.js]被html页面引入,其他模块也没办法使用[module.js] 中定义的各种方法与变量,浏览器(控制台)也没办法使用,能使用的只有[common.js],出了这个文件就完全调动不了;