web前端：目前流行的新语言，新框架，构建工具简单梳理

目录

一：模块化

1：CommonJS——用于服务器环境

2：AMD——用于浏览器环境

3：CMD——用于浏览器环境

二：新框架和新语言

1：新框架——以减少开发难度、提升开发效率

2：新语言——javascript最初设计用于一些简单的工作。

三:构建工具

1：Web 开发的发展趋势

2：构建工具简单介绍

---

一：模块化

模块化是指把一个复杂的系统分解到多个模块以方便编码。

A.便于团队的人员的协作，代码不至于很乱

B.合理地管理项目的依赖和版本,方便地控制依赖的加载顺序

 

1：CommonJS——用于服务器环境

CommonJS 是一种使用广泛的JavaScript模块化规范，核心思想是通过require方法来同步地加载依赖的其他模块，通过 module.exports导出需要暴露的接口。

CommonJS 规范的流行得益于Node.js采用了这种方式，后来这种方式被引入到了网页开发中。CommonJS 定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

 

采用 CommonJS 导入及导出时的代码如下：

// 导入

const moduleA = require('./moduleA');

// 导出

module.exports = moduleA.someFunc;

 

commonJS优点在于：

(1)代码可复用于Node.js环境下并运行，例如做同构应用；

(2)通过NPM发布的很多第三方模块采用了CommonJS规范

缺点：

代码无法直接运行在浏览器环境下，必须通过工具转换成标准的ES5

 

2：AMD——用于浏览器环境

AMD 也是一种 JavaScript 模块化规范，与CommonJS最大的不同在于它采用异步的方式去加载依赖的模块。最具代表性的实现是requirejs

 

采用 AMD 导入及导出时的代码如下：

// 定义一个模块

define('module', ['dep'], function(dep) {

  return exports;

});:

// 导入和使用

require(['module'], function(module) {

});

 

具体写法如下：

1.在文件中首先要引入require.js,

2.定义一个模块

3.加载模块

 

AMD优点在于：

(1)可在不转换代码的情况下直接在浏览器中运行；

(2)可异步加载依赖，可并行加载多个依赖;

(3)代码可运行在浏览器环境和Noejs环境下

缺点

在于Javascript运行环境没有原生支持AMD,需要导入实习了AMD库后才能正常使用。

 

3：CMD——用于浏览器环境

即Common Module Definition ，同步模块定义，是SeaJs在推广过程中对模块规范化的定义的产出。该规范明确了模块的基本书写格式和基本交互规则

CMD使用方法：

1.引入seajs

2.定义模块文件

3.引入模块

4.seajsAPI：http://yslove.net/seajs/

 

二：新框架和新语言

1：新框架——以减少开发难度、提升开发效率

React，Vue，ANgular2

 

2：新语言——javascript最初设计用于一些简单的工作。

 

但在大型开发中有许多缺点;如Css只能用静态的语法描述元素的样式，无法像写js那样增加逻辑判断与共享变量。

（1）ES6

不同浏览器支持不一致，为了解决兼容性问题，需要把ES6转换为ES5，BaBel是目前解决这个问题的最好工具。

 

（2）typescript

ts是js的一个超集，除了支持ES6功能，还提供了静态类型检查，采用ts编写最后转成js。在大型项目中优点才能体现，因为大型项目由多个模块组合而成，不同模块可能

由不同人编写，在对接不同模块时静态类型检查会在编译阶段找出可能存在的问题。

缺点：语法相对js更加啰嗦，并且无法直接运行在浏览器或nodejs环境下。

 

（3）FLow

Flow也是js的一个超集，他的主要特点是为js提供静态类型检查，和ts相似但是更灵活，可以让你只在需要的地方加上类型检查

 

（4）SCSS,LESS——css预处理器

基本思想是用和css相似的编程语言写完后再编译成正常的CSS文件。

$blue: #1875e7;　

div {

  color: $blue;

}

采用SCSS去写CSS的好处在于可以方便地管理代码，抽离公共部分，通过编辑写出更灵活的代码。

 

三:构建工具

上述新思想和框架，源代码无法直接运行，必须通过转换后才可以正常运行。

 

构建就是做这件事情，把源代码转换成发布到线上的可执行JavaScrip、CSS、HTML 代码，包括如下内容。

A:代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。

B:文件优化：压缩js,css,html代码，压缩合并图片等。

C:代码分隔：提取多个页面的公共代码、提取首屏不需要执行部分代码让其异步加载。

D:模块合并：在采用模块化的项目里会有多个模块和文件，需要构件功能把模块分类合并成一个文件。

E:自动刷新：监听本地源代码的变化，自动重新构件、刷新浏览器。

F:代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

G:自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

 

构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程使用代码去实现，让代码自动执行这一系列复杂的流程。大多数构建工具都是用nodejs开发的。

 

1：Web 开发的发展趋势

（1）在 Npm Script 和 Grunt 时代，Web 开发要做的事情变多，流程复杂，自动化思想被引入，用于简化流程；

 

（2）在 Gulp 时代开始出现一些新语言用于提高开发效率，流式处理思想的出现是为了简化文件转换的流程，例如将 ES6 转换成 ES5。

 

（3）在 Webpack 时代由于单页应用的流行，一个网页的功能和实现代码变得庞大，Web 开发向模块化改进。

 

这些构建工具都有各自的定位和专注点，它们之间既可以单独地完成任务，也可以相互搭配起来弥补各自的不足。

2：构建工具简单介绍

（1）Npm Script

Npm Script 是一个任务执行者。Npm 是在安装 Node.js 时附带的包管理器，Npm Script 则是 Npm 内置的一个功能，允许在 package.json 文件里面使用 scripts 字段定义任务：

 

{

  "scripts": {

    "dev": "node dev.js",

    "pub": "node build.js"

  }

}

 

 

里面的 scripts 字段是一个对象，每个属性对应一段 Shell 脚本，以上代码定义了两个任务 dev 和 pub。 其底层实现原理是通过调用 Shell 去运行脚本命令，例如执行 npm run pub 命令等同于执行命令 node build.js。

Npm Script的优点是内置，无须安装其他依赖。其缺点是功能太简单，虽然提供了 pre 和 post 两个钩子，但不能方便地管理多个任务之间的依赖。

 

（2）Grunt

Grunt 和 Npm Script 类似，也是一个任务执行者。Grunt 有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件 Gruntfile.js 里，例如：

 

module.exports = function(grunt) {

  // 所有插件的配置信息

  grunt.initConfig({

    // uglify 插件的配置信息

    uglify: {

      app_task: {

        files: {

          'build/app.min.js': ['lib/index.js', 'lib/test.js']

        }

      }

    },

    // watch 插件的配置信息

    watch: {

      another: {

          files: ['lib/*.js'],

      }

    }

  });

 

 

  // 告诉 grunt 我们将使用这些插件

  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadNpmTasks('grunt-contrib-watch');

 

  // 告诉grunt当我们在终端中启动 grunt 时需要执行哪些任务

  grunt.registerTask('dev', ['uglify','watch']);

};

在项目根目录下执行命令 grunt dev 就会启动 JavaScript 文件压缩和自动刷新功能。

 

Grunt的优点：

灵活，它只负责执行你定义的任务；

大量的可复用插件封装好了常见的构建任务。

Grunt的缺点：

集成度不高，要写很多配置后才可以用，无法做到开箱即用。

Grunt 相当于进化版的 Npm Script，它的诞生其实是为了弥补 Npm Script 的不足。

 

（3）Gulp

Gulp 是一个基于流的自动化构建工具。 除了可以管理和执行任务，还支持监听文件、读写文件。Gulp 被设计得非常简单，只通过下面5种个方法就可以胜任几乎所有构建场景：

 

通过 gulp.task 注册一个任务；

通过 gulp.run 执行任务；

通过 gulp.watch 监听文件变化；

通过 gulp.src 读取文件；

通过 gulp.dest 写文件。

Gulp 的最大特点是引入了流的概念，同时提供了一系列常用的插件去处理流，流可以在插件之间传递，大致使用如下：

 

// 引入 Gulp

var gulp = require('gulp');

// 引入插件

var jshint = require('gulp-jshint');

var sass = require('gulp-sass');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

 

// 编译 SCSS 任务

gulp.task('sass', function() {

  // 读取文件通过管道喂给插件

  gulp.src('./scss/*.scss')

    // SCSS 插件把 scss 文件编译成 CSS 文件

    .pipe(sass())

    // 输出文件

    .pipe(gulp.dest('./css'));

});

 

// 合并压缩 JS

gulp.task('scripts', function() {

  gulp.src('./js/*.js')

    .pipe(concat('all.js'))

    .pipe(uglify())

    .pipe(gulp.dest('./dist'));

});

 

// 监听文件变化

gulp.task('watch', function(){

  // 当 scss 文件被编辑时执行 SCSS 任务

  gulp.watch('./scss/*.scss', ['sass']);

  gulp.watch('./js/*.js', ['scripts']);    

});

Gulp 的优点：

好用又不失灵活，既可以单独完成构建也可以和其它工具搭配使用。其缺点是和 Grunt 类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用。

可以将Gulp 看作 Grunt 的加强版。相对于 Grunt，Gulp增加了监听文件、读写文件、流式处理的功能。

 

 

（4）Fis3

Fis3 是一个来自百度的优秀国产构建工具。相对于 Grunt、Gulp 这些只提供基本功能的工具，Fis3 集成了 Web 开发中的常用构建功能，如下所述。

 

读写文件：通过 fis.match 读文件，release 配置文件输出路径。

资源定位：解析文件之间的依赖关系和文件位置。

文件指纹：通过 useHash 配置输出文件时给文件 URL 加上 md5 戳来优化浏览器缓存。

文件编译：通过 parser 配置文件解析器做文件转换，例如把 ES6 编译成 ES5。

压缩资源：通过 optimizer 配置代码压缩方法。

图片合并：通过 spriter 配置合并 CSS 里导入的图片到一个文件来减少 HTTP 请求数。

大致使用如下：

 

// 加 md5

fis.match('*.{js,css,png}', {

  useHash: true

});

 

// fis3-parser-typescript 插件把 TypeScript 文件转换成 JavaScript 文件

fis.match('*.ts', {

  parser: fis.plugin('typescript')

});

 

// 对 CSS 进行雪碧图合并

fis.match('*.css', {

  // 给匹配到的文件分配属性 `useSprite`

  useSprite: true

});

 

// 压缩 JavaScript

fis.match('*.js', {

  optimizer: fis.plugin('uglify-js')

});

 

// 压缩 CSS

fis.match('*.css', {

  optimizer: fis.plugin('clean-css')

});

// 压缩图片

fis.match('*.png', {

  optimizer: fis.plugin('png-compressor')

});

可以看出 Fis3 很强大，内置了许多功能，无须做太多配置就能完成大量工作。

 

Fis3的优点：

集成了各种 Web 开发所需的构建功能，配置简单开箱即用。其缺点是目前官方已经不再更新和维护，不支持最新版本的 Node.js。

Fis3 是一种专注于 Web 开发的完整解决方案，如果将 Grunt、Gulp 比作汽车的发动机，则可以将Fis3 比作一辆完整的汽车。

 

 

（5）Webpack

webpack是一个打包模块化js工具，在webpack里一切文件皆模块，通过loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。

webPack专注于构建模块化项目，经过webpack处理，最终会输出浏览器能使用的静态资源。

 

Webpack 具有很大的灵活性，能配置如何处理文件，大致使用如下：

module.exports = {

  // 所有模块的入口，Webpack 从入口开始递归解析出所有依赖的模块

  entry: './app.js',

  output: {

    // 把入口所依赖的所有模块打包成一个文件 bundle.js 输出

    filename: 'bundle.js'

  }

}

 

优点：

a:专注于处理模块化项目，能做到开箱即用一步到位

b:通过Plugin扩展，完整好用又不失灵活

c:使用场景不限于web开发

d:社区庞大活跃，经常引入新特性，能为大多数场景找到宜有的开源扩展

e:良好的开发体验

缺点：

只能用于采用模块化开发项目

 

（6）Rollup

Rollup 是一个和 Webpack 很类似但专注于 ES6 的模块打包工具。Rollup 的亮点在于能针对 ES6 源码进行 Tree Shaking 以去除那些已被定义但没被使用的代码，

以及 Scope Hoisting 以减小输出文件大小提升运行性能。 然而 Rollup 的这些亮点随后就被 Webpack 模仿和实现

 

Rollup 是在 Webpack 流行后出现的替代品；

Rollup 生态链还不完善，体验不如 Webpack；

Rollup 功能不如 Webpack 完善，但其配置和使用更加简单；

Rollup 不支持 Code Spliting，但好处是打包出来的代码中没有 Webpack 那段模块的加载、执行和缓存的代码。

Rollup 在用于打包 JavaScript 库时比 Webpack 更加有优势，因为其打包出来的代码更小更快。 但功能不够完善，很多场景都找不到现成的解决方案。