Webpack原理-从前端模块化开始

当前主流 JS 模块化方案

  • CommonJS 规范，nodejs 实现的规范
  • AMD 规范，requirejs 实现的规范
  • CMD 规范，seajs 实现的规范， seajs 与 requirejs 实现原理有很多相似的地方 u ES Modules，当前 js 标准模块化方案

注意:cjs、amd、cmd、 ES Modules 都是只规范，所以可能对应有多种实现

下面就对各个模块化方案做简单说明

无模块化时代

一把梭
<script src="jquery.js"></script>
<script src="jquery_scroller.js"></script>
<script src="main.js"></script>
<script src="other1.js"></script>
<script src="other2.js"></script>
<script src="other3.js"></script>

无模块化时代的问题

  • 污染全局作用域
  • 不便于拆分逻辑，维护成本高 • 依赖关系不明显
  • 复用性差

CommonJS 规范

  • CommonJS 是由 node 实现的一套规范，关于 CommonJS 的提出可参考CommonJS 规范
  • require 源码解读可参考 require() 源码解读
  • 模块包装相当于执行如下代码， compiledWrapper 是调用 node 封装的 V8 原生创建函数的方法返回的一个函数
function compiledWrapper(exports, require, module, __filename, __dirname) {
  // 插入文件中的代码
  // 返回导出对象
  return module.exports
}
compiledWrapper.call(exports, exports, require, module, filename, dirname)
  • CommonJS 模块输出的是一个值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值
  • 如下有两个文件，执行命令node index.js，会有什么结果?

lib.js

// lib.js
let counter = 3
function incCounter() {
  counter++
}
module.exports = {
  counter,
  incCounter
}

index.js

// index.js
const mod = require('./lib') // 此处输出值？
console.log(mod.counter)
mod.incCounter() // 此处输出值？
console.log(mod.counter)
  • equire 命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象，下次加载会直接从缓存中取数据
  • 以下是一个循环引用的例子，请问执行 node main.js 后会输出什么？

a.js

// a.js
console.log('a starting')
exports.done = false
const b = require('./b.js')
console.log('in a, b.done = %j', b.done)
exports.done = true
console.log('a done')

b.js

// b.js
console.log('b starting')
exports.done = false
const a = require('./a.js')
console.log('in b, a.done = %j', a.done)
exports.done = true
console.log('b done')

main.js

// main.js
console.log('main starting')
const a = require('./a.js')
const b = require('./b.js')
console.log('in main, a.done = %j, b.done = %j', a.done, b.done)

AMD 规范

  • AMD 是 Asynchronous Module Definition 的简写，即异步模块定义
  • AMD 规范的完整定义可参考 https://github.com/amdjs/amdjs-api/wiki/AMD
  • requirejs 是在浏览器中运行的，所有一些基础库需要先配置，以方便其他库调用，可以理解为 CommonJS 中的 node_modules 下的包。业务模块也可定义在其中，可认为是路径别名。paths 中的路径不能包含扩展名。
require.config({
  paths: {
    // 如果第一个加载失败就会加载第二个
    jquery: ['lib/jquery.min', 'lib/jquery'],
    lodash: 'lib/lodash.min',
    main: './mian' // 入口文件
  }
})

定义模块

/**
* 定义模块，当依赖加载完成后执行回调
* 回调可返回值，返回值会被导出到外部使用
* @param {String} id 模块名称，可省略
* @param {Array} dependencies 依赖的模块
* @param {Function} factory 回调函数
*/
define(id?, dependencies?, factory);


define(['jquery'], function($) {
  $('body').css({ background: 'red' })
  // 导出log函数
  return (...args) => console.log('自定义log', ...args)
})

加载模块

/**
 * 加载模块
 * @param {Array} deps 要加载的模块
 * @param {Function} callback 加载成功回调，回调参数为加载模块导出对象
 * @param {Function} errback 加载失败回调
 */
requirejs(deps, callback, errback)

require(['main'], log => {
  log('我成功加载了‘)
  // do something...,也可以在这里继续require其他js文件
})

requirejs 使用示例

  • 目录结构
.
├── index.html
└── js
    ├── lib
    │   ├── jquery.js
    │   ├── lodash.js
    │   └── require.js
    ├── main.js
    └── time.js
  • index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>requirejs-demo</title>
  </head>
  <body>
    <h1 id="time"></h1>
    <script src="./js/lib/require.js" data-main="./js/main.js"></script>
  </body>
</html>
  • main.js
requirejs.config({
  baseUrl: '/js/‘,
  paths: {
    jquery: './lib/jquery‘,
    lodash: './lib/lodash‘
  }
})�require(['jquery', './js/time.js'], ($, time) => {
  $('#time').text('TIME: ' + time.getTime())
  setInterval(() => {
   $('#time').text('TIME: ' + time.getTime())
  }, 1000)
})
  • time.js
define(['jquery', 'lodash'], ($, _) => ({
  getTime() {
    const time = new Date()
    const year = time.getFullYear()
    const month = _.padStart(time.getMonth() + 1, 2, '0‘)
    const date = _.padStart(time.getDate(), 2, '0‘)
    const hour = _.padStart(time.getHours(), 2, '0‘)
    const minute = _.padStart(time.getMinutes(), 2, '0‘)
    const second = _.padStart(time.getSeconds(), 2, '0‘)
    return `${year}/${month}/${date} ${hour}:${minute}:${second}`
  }
}))

CMD 规范

  • CMD 是 Common Module Definition 的简写，即通用模块定义
  • CMD 规范的完整定义可参考https://github.com/seajs/seajs/issues/242
  • CMD 的主要代表是 seajs。CMD 推崇依赖就近，AMD 推崇依赖前置。即 AMD 在定义模块的时候就必须把依赖包含进来，CMD 是在使用的时候再 require 对应的依赖
  • 当前主流的库对 CMD 支持不是很友好，都需要额外的修改才能工作
  • AMD 与 CMD 写法对比如下
// CMD
// 代码写起来有同步require的感觉
define((require, exports, module) => {
  const $ = require('jquery‘)
  $('title').text('hello')
})

// AMD
// 明显的异步风格
define(['jquery'], $ => {
  $('title').text('hello')
})

seajs 中 require 书写约定

  1. 正确拼写 require
// 错误！
define(function(req) {
  // ...
}) // 正确！
define(function(require) {
  // ...
})
  1. 使用直接量
// 错误！
require(myModule) // 错误！
require('my-' + 'module') // 错误！
require('MY-MODULE'.toLowerCase()) // 正确！
require('my-module')
  1. 不要修改 require
// 错误 - 重命名 "require"！
var req = require,
  mod = req('./mod') // 错误 - 重定义 "require"!
require = function() {} // 错误 - 重定义 "require" 为函数参数！
function F(require) {} // 错误 - 在内嵌作用域内重定义了 "require"！
function F() {
  var require = function() {}
}

seajs 隐藏坑

  • 如下代码输出$为 null
function func(require, exports, module) {
  const $ = require('jquery‘)
  console.log($)
}
func.toString = () => '() => {}'
define(func)

seajs 对于 require 和 define 函数的特殊要求是由于，seajs 原理导致的，seajs 的执行流程大致如下


seajs执行流程

seajs 使用示例

  • 目录结构
.
├── index.html
└── js
    ├── lib
    │   ├── jquery.js
    │   ├── lodash.js
    │   └── sea.js
    ├── main.js
    └── time.js
  • index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="“UTF-8”" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>seajs-demo</title>
  </head>
  <body>
    <h1 id="time"></h1>
    <script src="./js/lib/sea.js" data-main="./js/main.js"></script>
    <script>
       seajs.config({
         base: '/js/‘,
         alias: {
           jquery: './lib/jquery‘,
           lodash: './lib/lodash‘
         }
      })
      // 加载入口模块
      seajs.use('./js/main.js')
    </script>
  </body>
</html>
  • main.js
define((require, exports, module) => {
  const $ = require('jquery‘)
  const time = require('./time.js‘)
  $('#time').text('TIME: ' + time.getTime())
  setInterval(() => {
    $('#time').text('TIME: ' + time.getTime())
  }, 1000)
})
  • time.js
define((require, exports, module) => {
  module.exports = {
    getTime() {
      const $ = require('jquery‘)
      const _ = require('lodash‘)
      const time = new Date()
      const year = time.getFullYear()
      const month = _.padStart(time.getMonth() + 1, 2, '0‘)
      const date = _.padStart(time.getDate(), 2, '0‘)
      const hour = _.padStart(time.getHours(), 2, '0‘)
      const minute = _.padStart(time.getMinutes(), 2, '0‘)
      const second = _.padStart(time.getSeconds(), 2, '0‘)
      return `${year}/${month}/${date} ${hour}:${minute}:${second}`
    }
  }
})

ES Modules

  • ES Modules 是 ECMAScript modules 的简写，也可写为 ESM。 ES Modules 是 js 官方推出的标准
  • ES Modules 相比于其他模块规范是一个静态化的模块解决方案，其他模块化方案都是运行时才能确定输出内容，而 ES Modules 是编译时就确定了的。其他模块化方案导入文件都是整个导入模块，而 ES Modules 可以只导入需要的部分
  • ES Modules 会自动采用严格模式，不需要像 ES5 一样在头部加上”use strict”
  • ES Modules 可运行在服务端（node）和浏览器。目前主流浏览器都已经支持 ES Modules，node 使用 ES Modules 需要在执行时加上--experimental-modules，且要求编写的 js 文件必须以.mjs 为后缀
  • ES Modules 导出的是一个值得引用，即在模块内改变了导出值，那么下一次使用也会得到新的值
  • 如下有两个文件，执行命令node --experimental-modules index.mjs，会有什么结果？

lib.mjs

// lib.mjs
export let counter = 3

export function incCounter() {
  counter++
}

index.mjs

// index.mjs
import * as mod from './lib’

// 此处输出值？�console.log(mod.counter)
mod.incCounter()

// 此处输出值？
console.log(mod.counter)

循环引用

请问执行node --experimental-modules main.mjs后会输出什么内容
a.mjs

// a.mjs
import { bar } from './b.mjs'
console.log('a.mjs')
console.log(bar)
export let foo = 'foo'

b.mjs

// b.mjs
import { foo } from './a.mjs'
console.log('b.mjs')
console.log(foo)
export let bar = 'bar'

main.mjs

// main.mjs
import './a.mjs'

循环依赖问题

  • 在所有的模块规范中都存在循环依赖问题，解决依赖循环的方式都相似，几乎都采用惰性导入的方式来解决。
  • 如下两个文件存在循环引用，当执行 node --experimental-modules a.mjs 时，会报错说 b 未定义，这就是由于循环依赖导致的，如果不使用 b 则不会报错，修改方案如下。其他的模块循环引用也可按照此方法进行修改。
  • CommonJS 也可以使用先导出自身，再引入其他模块的方式尽心避免。同时也可以把 require 放入到函数体中，即在调用的时后才去加载依赖
循环依赖

相关链接

关于作者

欢迎关注 nashaofu

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,607评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,047评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,496评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,405评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,400评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,479评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,883评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,535评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,743评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,309评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,881评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2赞 342

推荐阅读更多精彩内容

  • 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6
    Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载...
    zhoulujun阅读 2,923评论 0赞 14
  • JavaScript 模块讲解
    模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。所谓模块化主要是解决代码分...
    MapleLeafFall阅读 1,165评论 0赞 0
  • 前端模块化详解
    前言在 JavaScript 发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今 CPU、浏览器性能得到了...
    前端一菜鸟阅读 818评论 0赞 9
  • 子愚小鲁 作业四
    第一部分 如果时光定格在那一刻，大概就能看见这位三旬怒父和七八岁的抽泣小女孩，还有一个旧钟，它因女孩生气而被摔得...
    子愚小鲁阅读 232评论 5赞 0
  • 7天殊胜之旅（一）
    拖了2个月的文儿终于启封了，算是自己决定用文字记录生活，记录真实的自己的第一步吧～ 从知道吉祥萨迦红城寺法会到最终...
    zoe不惑阅读 295评论 0赞 0