Teambition是一家寻求卓着手艺的公司，我们工程师都很Geek，我们运用了许多新潮的，开源的手艺。同时我们也贡献了许多开源的项目。我们愿望能够把一些手艺履历分享给人人。因而有了这个「创作漫笔」。空话休说，「创作漫笔」第一弹，来自我们的前端工程师寸志，谈一谈他在前端模块化开辟方面的一些感受。

在模块化方面，Node.js就显得游刃有余。

作为用户，我们把代码放到一个个JavaScript文件中，然后Node.js就有一套划定规矩帮我们把这些代码构造起来，Node.js另有包的观点，因而我们就能够运用npm将代码放到一个个包中，放到这里那边的node_modules中运用。很轻易不是？谢谢Node.js。

可在浏览器端，模块化这事就没那末简朴了。

前端的模块

前端的一个模块包括许多东西，JavaScript、CSS、图片字体等等。以至，能够依据营业须要，还包括国际化的文件。一个模块假如包括以上这些东西，庞杂度就上了几个数量级。

怎样庞杂了？和嵬峨上的iOS开辟比起来，人家有SDK，代码随便往项目里扔，图片扔，国际化有成熟的处置惩罚计划，末了构建一下一个可运转的运用就出来了。

前端缺少SDK，没有成熟一致的开辟计划，集成计划，前端模块化之路很曲折。开辟时，我们须要一种体式格局来构造，加载代码，宣布时，我们还须要别的一种体式格局将代码、资本兼并到一同宣布。

面前的近况

TJ 给出了本身处置惩罚计划——Component。能够份文件开辟，然后再把JavaScript、CSS和模板文件兼并到一同。我只能说，抱负很饱满，实际很骨感，Component没法顺应种种奇葩的运用场景。

或许我们自在一点——

依靠的第三方模块，我们有Bower，好爽，运转个敕令，依靠就装置好了。

然则Bower不是银弹，Bower只处置惩罚了模块依靠，装置依靠的题目。Bower中的模块没有任何范例和划定规矩，有的只需JavaScript，有的支撑AMD，有的能够只需CSS。文件构造，进口文件完整不一样。并非运用Bower装置的模块我们就能够运用一样的体式格局运用任何一个模块，运用某种东西将这些模块打包宣布！

AMD作为事实上的前端JavaScript模块化范例，或能够出来拯救我们。许多Bower模块都是支撑AMD范例的。而且AMD还供应了打包东西，总算有点摆脱了。好景不长……

每一个模块中的HTML怎样办，假如我们运用的框架是Backbone，必定我们要将HTML模板转换成JavaScript模块，或许运用模块加载器的插件来完成。假如我们运用AngularJS，那却是能够交由AngularJS。宣布时Backbone中的模块运用AMD打包，AngularJS能够运用Grunt内联到页面中。

HTML模块也没有牢固的形式，没有牢固的SDK来摆脱我们。我们只能组合现有的东西！

CSS就更不用说了，离开写，运用LESS、SASS来构造？再一次没有牢固的形式没有SDK。

另有图片呢，字体呢？

拼集的计划

前端假如想做模块化开辟，起首须要针对每一种资本（JavaScript、CSS、模板等）寻觅一种模块与集成计划，然后须要依据状况的差别选用差别的东西框架拼集出来。

JavaScript

如今比较拿的出手的，也就是JavaScript的模块化，比方AMD或许CMD等等，离别能够运用RequireJS和SeaJS。

去年在研讨基于Backbone的框架Marionette时，想与Sea.js连系运用。如今来看这类组合是完整没有必要的。Marionette供应了模块化的构造计划，反而生拉硬扯在一同，争执得很难熬痛苦。实在把JavaScript文件一列放在HTML中也没什么题目。

终究运用什么来完成JavaScript，每每与挑选的JavaScript框架有关，选Backbone能够AMD，也能够CMD。选AngularJS直接援用就行。

CSS

CSS模块化应该是两方面的题目——

一是模块必需有一套基本款式。与JavaScript比拟，CSS争执简直是粗茶淡饭，Shadow DOM还没成熟，原生的CSS款式断绝还在路上。所以必需有一套基本款式来划定这一套模块化组件的款式。我们能够选Bootstrap，假如闲它太重，也能够本身写。

其次，每一个组件必需有定名空间，防止组件间款式争执。假如挑选运用LESS、SASS等，那就比较好办，它们的缩进语法防止写许多反复的CSS代码。

HTML模板

假如运用AngularJS，那AngularJS已帮您处置惩罚了模板模块化的题目，AngularJS能够依据模块代码中的援用加载对应的HTML。假如运用Backbone，能够挑选林林总总的模板引擎，Mustache？不过比起AngularJS就低端些，我们必需本身处置惩罚模板文件，要么经由历程模块加载器经由历程XHR要求，然后动态编译；或许将Mustache编译成JS，在当作模块加载。

图片、字体？

放在运用他们的模块中，该怎样援用就怎样援用。

国际化文件？这些就不多说了，总之，每种文件须要选定一种开辟的构造体式格局。

模块分发

模块采纳一致的形式来开辟以后，只需选定一种包的分发体式格局就好了——Bower。npm不合适如许的场景，npm的版本治理太甚仔细了。假如统一个项目中许可涌现统一模块的差别版本，事变就做的太甚庞杂了。

宣布上线

宣布上线必需一个以终为始的历程。假如你不寻求网站或许运用的速率，那就把那些开辟文件直接丢到临盆服务器上去吧。别说，我还真见过如许的商用的网站。

假如考究一些计划，资本兼并成数个文件，代码线上组合和运转体式格局完整能够与当地开辟不一样。只须要功能在就行。

JavaScript代码打成一个文件，或许两个？都行。假如运用RequireJS，那RequireJS供应了打包的东西，打包成几个文件，什么粒度，都行。假如是Sea.js也有对应的东西。就算文件都是一个一个列出来，我们也老是能够打出来你想要的文件。

CSS等等其他资本都是云云，就算开辟时各自差别的构造形式，打包时都是能够打的。

至于上线CDN，版本号缓存什么的并不在本文的议论局限以内。

总结

前端模块没有什么特效药。唯一要恪守的准绳就是，比起Node.js来说，每种资本必需要有一种本身的开辟和上线构造体式格局（Node.js开辟和上线都是一致的），开辟和上线完整能够是两种体式格局，大可不必随声附和，只需合适能够随便组合；CSS在CSS Scoped Style正式运用之前，应该有一套基本款式和沙盒（模块款式定名空间）。