认识达内从这里开始

随着互联网的不断发展，web前端编程开发也逐渐实现了模块化与组件化的开发形式。下面我们就一起来了解一下常见的模块组件都有哪些类型。

模块化与构建工具

组件库自身就是一个大的工程，需要按照模块化开发思想进行模块划分。通常，在一个组件库里，组件、组件的样式文件、配置文件…都是模块，而终我们需要把这些模块组合成一个完整的组件库文件，承担这种组装工作的就是打包构建工具。当下主流的库构建工具主要有Rollup和Webpack等。在说这些模块打包构建工具之前，我们先来了解一下目前主流的JavaScript模块化方案。

JavaScript语言一直以来饱受诟病的一个地方就是它的语言标准里没有模块(module)体系，这对开发大型的、复杂的项目形成了巨大障碍。直到ES6时期，才在语言标准层面实现模块功能(ES6Module)。在ES6之前，业界流行的是社区制定的一些模块加载方案，如CommonJS和AMD。而ES6Module作为官方规范，且浏览器端和服务器端通用，未来一定会一统天下，但由于ES6Module来的太晚，受限于兼容性等因素，可以预见的是今后一段时期内，多种模块化方案仍会共存。

ES6Modue规范：JavaScript语言标准模块化方案，浏览器和服务器通用，模块功能主要由export和import两个命令构成。export用于定义模块的对外接口，import用于输入其他模块提供的功能。

CommonJS规范：主要用于服务端的JavaScript模块化方案，Node.js采用的就是这种方案，所以各种Node.js环境的前端构建工具都支持该规范。CommonJS规范规定通过require命令加载其他模块，通过module.exports或者exports对外暴露接口。

AMD规范：全称是AsynchronousModulesDefinition，异步模块定义规范，一种更主要用于浏览器端的JavaScript模块化方案，该方案的代表实现者是RequireJS，通过define方法定义模块，通过require方法加载模块。

Rollup

Rollup是一个颇有名气的库打包工具，很多知名的库、框架都是使用它打的包，包括Vue和React自身。Rollup可以直接对ES6模块进行打包，它率先提出并实现了Tree-shaking功能，即在打包时静态分析ES6模块代码中的import，排除未实际使用的代码，这有助于减小构建包的体积。

Webpack

另一个打包工具Webpack名气更大，不过我们通常用它来打包应用，而事实上它对库打包也能提供很好的支持。Webpack支持代码分割、模块的热更新(HMR)等功能，这让它看起来非常适合打包应用。而Webpack2及后续版本陆续增加了对ES6模块、Tree-shaking、ScopeHoisting的支持，大大增强了其库打包能力。

如今，Rollup在库打包方面的优势已不再那么明显，而在对应用打包的支持方面却明显落后于Webpack。所以打包应用推荐使用Webpack，而打包库的话，Rollup和Webpack基本都能胜任。

那么我们在开发NutUI2的时候为什么选择了Webpack而不是Rollup呢?其实主要还是上述这个原因，按照规划，NutUI的官网(包含示例和文档)与库在同一个项目中，因此我们需要一个既能打包库，又能打包应用的工具，Webpack显然更适合。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!