频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
【前端语言学习】学习minipack源码,了解打包工具的工作原理-个人文章-SegmentFault思否
2019-04-30 19:50:26           
收藏   我要投稿

作者:王聪

世界杯投注官网

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

通过minipack这个项目的源码学习了解上边提到的整个工作流程

demo目录

.
├── example
      ├── entry.js
      ├── message.js
      ├── name.js

入口文件 entry.js:

// 入口文件 entry.js
import message from './message.js';
console.log(message);

message.js

// message.js
import {name} from './name.js';
export default `hello ${name}!`;

name.js

// name.js
export const name = 'world';

入口文件

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

createAsset:生产一个描述该模块的对象

createAsset 函数会解析js文本,生产一个描述该模块的对象

function createAsset(filename) {
  /*读取文件*/
  const content = fs.readFileSync(filename, 'utf-8');
  /*生产ast*/
  const ast = babylon.parse(content, {
    sourceType: 'module',
  });
   /* 该数组将保存此模块所依赖的模块的相对路径。*/
  const dependencies = [];
   /*遍历AST以尝试理解该模块所依赖的模块。 为此,我们检查AST中的每个导入声明。*/
  traverse(ast, {
    ImportDeclaration: ({node}) => {
    /*将导入的值推送到依赖项数组中。*/
      dependencies.push(node.source.value);
    },
  });
  const id = ID++;
 /* 使用`babel-preset-env`将我们的世界杯指定投注平台转换为大多数浏览器可以运行的世界杯指定投注平台。*/
  const {code} = transformFromAst(ast, null, {
    presets: ['env'],
  });
  /*返回这个描述对象*/
  return {
    id,
    filename,
    dependencies,
    code,
  };
}

createGraph: 生产依赖关系图

function createGraph(entry) {
  // 解析入口文件
  const mainAsset = createAsset(entry);
  /*将使用队列来解析每个模块的依赖关系。 为此,定义了一个只包含入口模块的数组。*/
  const queue = [mainAsset];
 /*我们使用`for ... of`循环迭代队列。 最初,队列只有一个模块,但在我们迭代它时,我们会将其他新模块推入队列。 当队列为空时,此循环将终止。*/
  for (const asset of queue) {
   /*我们的每个模块都有一个它所依赖的模块的相对路径列表。 我们将迭代它们,使用我们的`createAsset()`函数解析它们,并跟踪该模块在此对象中的依赖关系。*/
    asset.mapping = {};
    // This is the directory this module is in.
    const dirname = path.dirname(asset.filename);
    // We iterate over the list of relative paths to its dependencies.
    asset.dependencies.forEach(relativePath => {
      // Our `createAsset()` function expects an absolute filename. The
      // dependencies array is an array of relative paths. These paths are
      // relative to the file that imported them. We can turn the relative path
      // into an absolute one by joining it with the path to the directory of
      // the parent asset.
      const absolutePath = path.join(dirname, relativePath);
      // Parse the asset, read its content, and extract its dependencies.
      const child = createAsset(absolutePath);
      // It's essential for us to know that `asset` depends on `child`. We
      // express that relationship by adding a new property to the `mapping`
      // object with the id of the child.
      asset.mapping[relativePath] = child.id;
      // Finally, we push the child asset into the queue so its dependencies
      // will also be iterated over and parsed.
      queue.push(child);
    });
  }
  // At this point the queue is just an array with every module in the target
  // application: This is how we represent our graph.
  return queue;
}

通过createGraph函数 生成的依赖关系对象:

[ 
  { id: 0,
    filename: './example/entry.js',
    dependencies: [ './message.js' ],
    code: '"use strict";\n\nvar _message = require("./message.js");\n\nvar _message2 = _interopRequireDefault(_message);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconsole.log(_message2.default);',
    mapping: { './message.js': 1 } },
  { id: 1,
    filename: 'example/message.js',
    dependencies: [ './name.js' ],
    code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\n\nvar _name = require("./name.js");\n\nexports.default = "hello " + _name.name + "!";',
    mapping: { './name.js': 2 } },
  { id: 2,
    filename: 'example/name.js',
    dependencies: [],
    code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nvar name = exports.name = \'world\';',
    mapping: {} } 
]

bundle 打包

bundle函数把上边得到的依赖关系对象作为参数,生产浏览器可以运行的包

function bundle(graph) {
 let modules = '';
 graph.forEach(mod => {
   modules += `${mod.id}: [
     function (require, module, exports) {
       ${mod.code}
     },
     ${JSON.stringify(mod.mapping)},
   ],`;
 });
 const result = `
   (function(modules) {
     function require(id) {
       const [fn, mapping] = modules[id];
       function localRequire(name) {
         return require(mapping[name]);
       }
       const module = { exports : {} };
       fn(localRequire, module, module.exports);
       return module.exports;
     }
     require(0);
   })({${modules}})
 `;
 // We simply return the result, hurray! :)
 return result;
}

参考例子,最终生产的世界杯指定投注平台:

(function (modules) {
    function require(id) {
        const [fn, mapping] = modules[id];
        function localRequire(name) {
            return require(mapping[name]);
        }
        const module = { exports: {} };
        fn(localRequire, module, module.exports);
        return module.exports;
    }
    require(0);
})({
    0: [
        function (require, module, exports) {
            "use strict";
            var _message = require("./message.js");
            var _message2 = _interopRequireDefault(_message);
            function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : { default: obj };
            }
            console.log(_message2.default);
        },
        { "./message.js": 1 },
    ],
    1: [
        function (require, module, exports) {
            "use strict";
            Object.defineProperty(exports, "__esModule", {
                value: true
            });
            var _name = require("./name.js");
            exports.default = "hello " + _name.name + "!";
        },
        { "./name.js": 2 },
    ],
    2: [
        function (require, module, exports) {
            "use strict";
            Object.defineProperty(exports, "__esModule", {
                value: true
            });
            var name = exports.name = 'world';
        },
        {},
    ],
})

分析打包后的这段世界杯指定投注平台
这是一个自执行函数

(function (modules) {
...
})({...})

函数体内声明了 require函数,并执行调用了require(0);
require函数就是 从参数modules对象中找到对应id的 [fn, mapping]
如果模块有依赖其他模块的话,就会执行传入的require函数,也就是localRequire函数

function require(id) {
        // 数组的解构赋值
        const [fn, mapping] = modules[id];
        function localRequire(name) {
            return require(mapping[name]);
        }
        const module = { exports: {} };
        fn(localRequire, module, module.exports); // 递归调用
        return module.exports;
    }

接收一个模块id,过程如下:

第一步:解构module(数组解构),获取fn和当前module的依赖路径
第二步:定义引入依赖函数(相对引用),函数体同样是获取到依赖module的id,localRequire 函数传入到fn中
第三步:定义module变量,保存的是依赖模块导出的对象,存储在module.exports中,module和module.exports也传入到fn中
第四步:递归执行,直到子module中不再执行传入的require函数

要更好了解“打包”的原理,就需要学习“模块化”的知识。

参考:

minipack minipack源码分析
点击复制链接 与好友分享!回本站首页
相关TAG标签
上一篇:您的四月份前端补给包已到,请查收~-前端小册子-SegmentFault思否
下一篇:mouseover,mousedown才显示时dom的查看-前端-SegmentFault思否
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站