未加星标

WebPack is not the only way

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

FuseBoxis a new generation bundler and module loader, it is the result of our years of experience dealing with Complex projects requirements and many of the development tools out there.

First of all, let us establish a very clear fact, this post is not about undermining any of the Bundlers out there and most certainly not the hard work of those who shared them with us, on the contrary, we highly appreciate the efforts that have been done, we used them in our work, truly got inspired by them and our Goal is to compete to be part of what makes javascript world and Developer’s life better.


WebPack is not the only way
Why?

Well, we know that with modern day applications requirements, putting script links in page does not cut it anymore, there must be a way to manage the complexity, rapid changes and chain of dependencies of resources, therefore we need to use a bundler/module loader. There are many known and unknown tools in that Domain, and like everyone else, hunting season started!

We tried everything RequireJS , Browserify , WebPack and many many others… but there was always some requirement that we needed in our projects that none of those bundlers offered, so we decided to take the blue pill and create our own beast!

We won’t go through the full details of our tests as it would take pages and pages, but we will try to highlight the main parts that led us to create FuseBox and how we feel it is one of the best Tools out there.

The Tools that made it to our final round before creating FuseBox were WebPack, JSPM, StealJS. Again, all these tools are great piece of engineering, can get you the job done and most importantly there are communities behind them, but here is what we really faced as issues:

WebPack : No doubt a strong and deep tool, but the lack of documentation (to be fair the team have released a new documentation website which is looking a lot better) and boilerplate code required to build your project is too much for us. You can do anything with WebPack but it is not easy!

JSPM : this is our favourite one after FuseBox, it is really an underrated project, and Guy Bedford is one of the kindest and smartest people in the industry. JSPM configuration is more straight forward, it accepts virtually any Module format but it is slow in browser if you don’t create a build that targets UMD or CommonJS.

StealJS : is an interesting project in that it shares parts of WebPack and JSPM. like JSPM it uses SystemJS under the hood as module loader, but like WebPack it uses NPM as modules resource. The problem we faced with it is that some NPM modules that are not designed to run in the browser give some errors when loaded (though this does not affect using them).

So what did we do to make FuseBox really different and in our opinion better? We studied all the above-mentioned tools carefully and took the best parts of each of them, enhanced them and added extra awesome features that made our life easier and we are sure it will make your life as a developer much better too.


WebPack is not the only way
Philosophy

What we have now is just the tip of the iceberg, we want to go beyond just an open source project, we want to provide professional services and set of tools to cater to the full requirements of the development life-cycle, Stick around with us and soon you will see awesome fruits that will shake some grounds in the field. With that being said we will always have three main goals on our mind

Speed Extensibility Simplicity Turbo start (zero configuration)

To start bundling all that you have to do is

FuseBox.init({ homeDir : “./src”, outFile : “./build/bundle.js” })

That is, it, now you can start coding and FuseBox will do the magic. The code above will allow you bundle the most complex projects on github, like babel-core

Shimming NPMmodules

Some NPM libraries are made to work in both Server and Client environments but some don’t, for example, some libraries have a dependency on Node’s process module, this will not work in the browser. therefore we made sure to shim all the major ones so they will work perfectly on the client, or at least will cause no errors if they are designed to work only in Server environments. And if there is a library that does need shimming and we did not add it yet, you can always submit a PR or you can do it easily yourself in your project with one great feature `Custom modules folder`. it is really simple, check the shim for URL module https://github.com/fuse-box/fuse-box/blob/master/assets/libs/url/index.js

TypeScript andBabel

We love TypeScript, we use it on daily basis but it really gets slow when you have a large project, therefore we really worked hard to make sure that it works super fast and out of the box. For example, we have a project with over 200 files and with FuseBox TypeScript integration we were able to take down transpiling time from 5 seconds to 720 ms!

Same goes for Babel we support it as a built-in plugin, just install it and use any of its plugins and it will work like charm.

Bundle anything

We have built-in plugin for most of the required files formats a developer needs, let it be HTML, CSS, SCSS, JSON, etc. here is a list of all built-in plugins we have so far http://fuse-box.org/#built-in-plugins. FuseBox plugin API is simple and intuitive, one great example ― we had a user who required ability to pass some variables at build time for both Client and Server bundles, so we created the `EnvPlugin` and do the following:

plugins : [ fsbx.EnvPlugin({ foo: “bar” }) ]

Now you can access your `foo` variable like this `console.log( process.env.foo )` and it does not matter if you are on client or on server, you can even use the plugin with libraries like https://www.npmjs.com/package/safe-env . this is a great example that shows how combining FuseBox shimming of NPM modules with Plugin API can give awesome possibilities.

Caching

FuseBox has a powerful caching system. The way caching works is that on the first run, Fuse will build a manifest of all NPM modules you use in your code and on subsequent bundling, Fuse will fetch those modules from cache and only process your local code, this will cut down bundling process tremendously!


WebPack is not the only way

Fuse does not only cache top Modules you use, it also caches each Module dependencies, so imagine you have a total of 100 NPM modules required in your code, without caching every time you change one line in your code you will have to re-bundle all those modules.

Dynamic Modules This is one neat Feature that we can’t live without in our proj

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

主题: JSPCSSJavaScriptHTMLJava
分页:12
转载请注明
本文标题:WebPack is not the only way
本站链接:http://www.codesec.net/view/531843.html
分享请点击:


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