codecamp

基于 webpack 的 SPA 单页 Web 应用动态加载插件的机制

我们拿它做什么用

实现可插拔的插件机制。

我们如何做到

由于在webpack的传统模式下是将所有模块都打包到同一文件或者同一系列文件，也就是说它所有模块必须做关联打包，进而无法实现可插拔的注入，也就无法实现插件的开启和关闭。

因此我们的实现方式是：

1.将模块功能以umd模块的方式用webpack打包出来。

1.umd模块单文件用script加载到浏览器后。
2.接着会在window对象上附加一个自身的对象。
3.这样就可以在任意地方获取到这个对象，然后进行模块或功能注入。

Notadd相关代码参考：

https://github.com/notadd/administration/tree/master/resources/mixes/administration/src

项目主页：欢迎star

https://github.com/notadd/notadd

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }