前端模块化管理

 

转自网络

 

• • Task Runner

Gulp、Grunt和Make(常见于c/cpp）、Ant、Maven、Gradle（Java/Android）、Rake、Thor（Ruby）同样，都是是Task Runner。用来将一些繁琐的task自动化并处理任务的依赖关系。
其中有些是基于配置描述的，描述逻辑比较费劲，好比Ant基于xml。还有些就是代码，比较灵活，我的偏好这种。好比Rake、Thor、Gulp、Gradle。对于Gradle来讲也有些蛋疼。由于它自己是Groovy的DSL。若是要深刻使用，你还得学一下Groovy语言。其余就好多了Rake、Thor就是写Ruby；Gulp就是JavaScript。相对门槛低不少。

 

• 模块化解决方案

Browserify It provides a way to bundle CommonJS modules together, adheres to the Unix philosophy（小工具协做）, is in fact a good alternative to Webpack.
Webpack takes a more monolithic（总体解决、大而全） approach than Browserify... is relies on configuration.
webpack官网有对两者的使用方法进行对比，能够看一下：webpack for browserify users

上面这些工具在功能上有交集：代码的Minify、Concat；资源预处理等；

其实每一个工具的官网上都有对工具的设计思想、要解决的问题、与其余工具的对比。本身摘抄下来，作个表格对比一下。高亮出每一个工具独特的特性。这样你就知道何时须要用哪一个工具了。
好比，你的工程模块依赖很简单，不须要把js或各类资源打包，只须要简单的合并、压缩，在页面中引用就行了。Gulp就够用了。那就不须要Browserify、Webpack。

反过来，若是你的工程庞大，页面中使用了不少库（SPA-单页面应用, Single Page Application 很容易出现这种状况），那就能够选择某种模块化方案。至因而用Browserify仍是Webpack就须要根据其余因素来判断了。好比团队已经在使用了某种方案，你们都比较熟悉了。再好比，你喜欢Unix小工具协做的方式，那就Browserify。

充分了解各类工具、方案，选择合适的和本身须要的。没有绝对的好。优势换了场景也会变成缺点。

 

• 关于AMD&CMD

RequireJS 和 SeaJS 都是很不错的模块加载器，二者区别以下：

1. 二者定位有差别。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专一于 Web 浏览器端，同时经过 Node 扩展的方式能够很方便跑在 Node 服务器端

2. 二者遵循的标准有差别。RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不一样，致使了二者 API 的不一样。SeaJS 更简洁优雅，更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

3. 二者社区理念有差别。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。SeaJS 不强推，而采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。

4. 二者代码质量有差别。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。

5. 二者对调试等的支持有差别。SeaJS 经过插件，能够实现 Fiddler 中自动映射的功能，还能够实现自动 combo 等功能，很是方便便捷。RequireJS 无这方面的支持。

6. 二者的插件机制有差别。RequireJS 采起的是在源码中预留接口的形式，源码中留有为插件而写的代码。SeaJS 采起的插件机制则与 Node 的方式一致：开放自身，让插件开发者可直接访问或修改，从而很是灵活，能够实现各类类型的插件。.

 

• bower 和 npm 的区别

bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切所有为前端考虑的。npm 和bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由程序员本身解决）。

　　嵌套依赖，指的就是，你依赖的软件包，还有它本身的依赖，好像摘葡萄，一摘一大串。在服务器环境的时候，这并没什么关系，由于存储空间够大，一切代码都是本地运行，只要解决完依赖就好了，

　　可是到了用户产品的浏览器里，就很成问题了，你不能让用户去下载好几M的js代码，那就太糟糕了。在这个状况下，就须要程序员本身手动解决用到的类库的嵌套依赖问题。好比确保各类各样的插件都依赖同一个版本的jQuery。

　　为何有不少项目 bower 和 npm 都用呢，那是由于要用 bower 管理前端的包，而用 npm 去管理一些后端的包和构建工具，例如，yeoman，grunt，gulp，jshint 等等等等。

 

React技术栈一览