未加星标

FuseBox and the epicness of dynamic modules

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

FuseBox and the epicness of dynamic modules

Dynamic modules are in very high demand nowadays. FuseBox offers a great support for latter, providing limitless possibilities.

To get your interested right away I have prepared a neat demo ,

Before we get there, let me explain the internals of FuseBox , and why the framework is best at dealing with dynamic modules.

The EcoSystem

FuseBox offers 100% compatible commonjs ecosystem for browsers. Every single file that you bundle will be accessible via FuseBox API. It does not modify your code in any way, hence it’s possible to play around, merge bundles, and modify them at runtime.

Let’s check an example. Open this angular2 todo-demo . It’s powered by FuseBox. Open a developer console, and try to import this file like so:

FuseBox.import("./todo/todo-filter.pipe")

You are getting the exports of todo/todo-filter.pipe.

Now imagine how that can change your approach of coding.

Unlike WebPack, FuseBox creates virtual files:

_s.file("foo/bar.js", function(exports, require, module, __filename, __dirname){ }); _s.file("foo/woo.js", function(exports, require, module, __filename, __dirname){ })

It keeps the original structure within the bundle. Therefore fusing 2 bundles is going to be painless. It’s fun to create runtime plugins too.

Access to any npmmodule

Now, let’s go back to the playground

I have intentionally included NodeJS’ path module, and as you can see you can import it and use it as if you are running the code on server.

FuseBox.import("path")

Now the fun part. Dynamic modules respect their location. Therefore a require function is going to treat your imports accordingly.

FuseBox.dynamic("foo/moduleB.js", "")

As if you have a folder “foo” with “moduleB.js”

Now some magic. Let’s register index.js

FuseBox.dynamic("foo/index.js", "module.exports = require('./*')")

We are using a wildcard import in this example. Not as if we had to. Just for fun. Require the folder like so:

FuseBox.import("./foo")

It will trigger index.js in that folder, just like in NodeJS.

Dynamic modules with FuseBox are fun. You can override modules, remove them, register new, create virtual packages and much much more for you to discover.

Get to know FuseBox !

FuseBox ― bundle your project within a fraction of a second

FuseBox is a bundler/module loader that combines the power of webpack, JSPM and SystemJS. It takes 50 100ms to re… hackernoon.com

If you like the project, don’t forget to star it on github ! And of course, spread the word by clicking

Join our gitter channel, we are active and very friendly!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JSP
tags: FuseBox,js,import,It,foo,modules,module,todo
分页:12
转载请注明
本文标题:FuseBox and the epicness of dynamic modules
本站链接:http://www.codesec.net/view/529618.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(73)