背景

模块化的演进

没有模块化之前的javascript

<script src="./a.js"></script>
<script src="./b.js"></script>
<script>
	console.log('hello world')
</script>

• 全局变量混乱,每个文件的全局变量都有可能被覆盖

• 每个单独的js模块没有独立的标识

• 每个模块都需要可能依赖上一个模块的变量，模块关系混乱

(function(global){
	// var jQuery = ........
	global.jQuery = global.$ = jQuery;
})(window)

commonJS的诞生

• 模块通过exports来向外暴露API,exports只能是一个object对象,暴露的API位改对象的属性

• require(dependency)函数通过模块标识引入其他依赖模块,执行的结果即为别的模块暴露出来的API。

• 如果被函数引入的模块依赖其他模块,则依次加载其他依赖模块

// math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};
// increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};
// program.js
var inc = require('increment').increment;
var a = 1;
inc(a); // 2

AMD(Asynchronous Module Definition)

require([module], callback);

• 如果dependencies数组中有require、exports、或module,则与commonJS的实现保持一致

• 如果dependencies省略不写,则默认为[‘require’, ‘exports’, ‘module’]，回调中也会传入三者。

CMD(Common Module Definition)

UMD(Universal Module Definition)

• 优先判断是否存在exports方法,如果存在,则采用CommonJS方式加载模块

• 其次判断是否存在define方法,如果存在,则采用AMD方式加载模块

• 最后判断global对象上是否定义了所需依赖,如果存在,则直接使用;反之则抛出一场。

ES Module

构建工具的发展

bundle 类的构建工具

Grunt

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);
};

Gulp

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

const { src, dest, parallel } = require('gulp');
const pug = require('gulp-pug');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');

function html() {
  return src('client/templates/*.pug')
    .pipe(pug())
    .pipe(dest('build/html'))
}

function css() {
  return src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(dest('build/css'))
}

function js() {
  return src('client/javascript/*.js', { sourcemaps: true })
    .pipe(concat('app.min.js'))
    .pipe(dest('build/js', { sourcemaps: true }))
}

exports.js = js;
exports.css = css;
exports.html = html;
exports.default = parallel(html, css, js);

Webpack

webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph) ，然后将你项目中所需的每一个模块组合成一个或多个 bundles ，它们均为静态资源，用于展示你的内容。

• 初始化阶段
• 初始化webpack.config.js中的配置参数
• 创建compiler参数
• 遍历用户定于的plugin集合,执行插件的apply方法
• 加载webpack内置插件

• 构建阶段
• 从entry文件开始,调用loader将模块转化为js内容
• 调用parser将js内容转化为AST
• 从AST找到文件引用的依赖
• 递归处理依赖并且分析出依赖图

• 生成阶段
• 根据上一步分析出的依赖图,按照entry/动态引入两种规则分别将模块打包到不同的chunk中
• 将生成的chunks写入文件系统

Rollup

基于浏览器es Module的构建工具

snowpack

vite

• snowpack配合的打包工具是不捆绑的,vite vite绑定了rollup作为打包工具

• vite使用esbuild进行依赖pre-building,使得服务器冷启动和依赖关系无效时的重新捆绑有了显著的性能改进

• vite支持monorepo

• vite对于vue的支持更好

• 社区相对比较发达(粉丝多(逃

其他构建工具

es-build