实现一个简易版webpack

概述现实 webpack 的打包产物 大概长这样(只把核心代码留下来)：     实现一个简版的webpack 依葫芦画瓢，实现思路分2步： 1. 分析入口文件，把所有的依赖找出来（包括所有后代的依赖） 2. 拼接出类似上面的立即执行函数 找依赖 const fs = require(‘fs‘);const path = require(‘path‘);const parser = requi

现实 webpack 的打包产物

大概长这样(只把核心代码留下来)：

 

 

实现一个简版的webpack

依葫芦画瓢，实现思路分2步：

1. 分析入口文件，把所有的依赖找出来（包括所有后代的依赖）

2. 拼接出类似上面的立即执行函数

找依赖

const fs = require(‘fs‘);const path = require(‘path‘);const parser = require(‘@babel/parser‘);const traverse = require(‘@babel/traverse‘).default;const { transformFromAST } = require(‘@babel/core‘);// 分析一个文件，转成Commonjs Module，并找出它的依赖function readCode(filePath) {    // 读取文件字符串    const content = fs.readfileSync(filePath,‘utf-8‘);    // 语法解析成 AST    const ast = parser(content,{        sourceType: ‘module‘    })    // 获取本文件的依赖    const dependIEnces = [];    // 遍历 AST，每当触发依赖钩子，就往依赖数组添加    traverse(ast,{        importDeclaration({node}) {            // 把对应的以来路径存起来            dependIEnces.push(node.source.value)        }    })    // 把 es6 转成 es5 字符串    // 最重要的是把 esModule 的 import export，转成 es5 能认识的 commonjs写法    const { code } = transformFromAST(ast,null,{        presets: [‘@babel/preset-env‘]    })    return {        filePath,code,dependIEnces    }}// 广度优先算法，深入找出所有的依赖function getAllDependencIEs(filePath) {    const entryObj = readCode(filePath);    const dependencIEs = [entryObj];    for (const dependency of dependencIEs) {        const curDirname = path.dirname(dependency.filePath)        for (const relativePath dependency.dependencIEs) {            const absolutePath = path.join(curDirname,relativePath);            const child = readCode(absolutePath);            child.relativePath = relativePath;            dependencIEs.push(child);        }    }    return dependencIEs;}

ps: 我们用的是babel的配套工具来做语法分析和转化，但是真正的webpack用的是webassemblyJs的配套工具

 

 

拼写立即执行函数

function bundle(filename) {    const dependencIEs = getAllDependencIEs(filename);    const modulesstr = ‘‘;    dependencIEs.forEach(dependency => {        const key = dependency.relativePath || dependency.filePath;        modulesstr += `‘${key}‘: function(module,exports,require) {            ${ dependency.code }        }`    })    return `(function(modules) {        const installedModules = {};        function require(ID) {            // 解决循环依赖            if (installedModules[ID]) {                return installedModules[ID].exports;            }            var module = installedModules[ID] = {exports: {}};            modules[ID].call(module.exports,module,module.exports,require);            return module.exports;        }        return require(‘${filename}‘)    })({${modulesstr}})`}

总结

以上是内存溢出为你收集整理的实现一个简易版webpack全部内容，希望文章能够帮你解决实现一个简易版webpack所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。