模块化
模块化是将一个复杂的系统分解为多个模块以方便编码。
以前开发通过命名空间的方式来组织代码，例如JQuery，放在window.$下，但是存在一些缺点：
- 命名空间冲突，例如Zepto也被放在window.$下
- 无法合理的管理项目的依赖和版本
- 无法方便地控制依赖的加载顺序
CommonJS
CommonJS（http://www.commonjs.org）是一种广泛使用的JS模块化规范，使用方式如下：
// 导入
const moduleA = requre(./moduleA);
// 导出
module.exports = moduleA.someFunc;
优点：
- 代码可复用于Node.js环境下并运行，例如做同构应用
- 通过NPM发布的很多第三方模块都采用了CommonJS规范
缺点：
* 无法直接在浏览器环境下运行，必须通过工具转换成ES5
AMD
也是一种JS模块化规范，与CommonJS不同在于，它采用了异步的方式去加载依赖的模块。
// 定义一个模块
define('module', ['dep'], function(dep){
return exports;
});
// 导入和使用
require(['module'], funciton(module){
});
优点：
- 可在不转换代码的情况下直接在浏览器中运行
- 可异步加载依赖
- 可并行加载多个依赖
- 代码可运行在浏览器环境和Node.js环境下
ES6 模块化
它在语言层面上实现了模块化。浏览器厂商和Node.js都宣布要原生支持该规范，它将逐渐取代CommonJS和AMD规范，成为浏览器和拂去起通用的模块解决方案。
// 导入
import { readFile } from 'fs';
import React from 'react';
// 导出
export function hello() {};
export default {
// ...
};
缺点:
目前无法直接运行在大部分JS环境下，必须通过工具转换成标准的ES5后才能正常运行。
样式中的模块化
除了JS开始进行模块化改造，前端开发里的样式文件也支持模块化，例如SCSS、LESS等。
新框架
React、Vue、Angular
新语言
- ES6
- TS
- Flow（类TS，但更灵活）
- SCSS、LESS
常见构建工具
构建工具的功能：
- 代码转换
- 文件优化
- 代码分割
- 模块合并
- 自动刷新
- 代码校验
- 自动发布
常见构建工具：
- Npm Script
- Grunt
- Gulp
- Fis3
- Rollup
- webpack（随着时代的发展，webpack目前已经具有统治的地位，其他的就不介绍了）
网友评论