如何实现一个min-webpack?

最新推荐文章于 2023-01-29 21:33:22 发布
最新推荐文章于 2023-01-29 21:33:22 发布
阅读量968 收藏 1
点赞数
分类专栏： webpack 文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37846579/article/details/122777567
版权
本文详细介绍了如何一步步构建一个简单的Webpack打包工具，包括解析文件依赖、转换ESModule为CommonJS、生成IIFE模块以及输出bundle.js的过程。通过AST和Babel库处理代码，最终实现在浏览器中运行的模块打包。
摘要由CSDN通过智能技术生成

今天来实现一个简单的打包工具

文件依赖

src
├─ a.js
├─ b.js
├─ c.js
└─ index.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xXKFCW02-1643883138652)(https://raw.githubusercontent.com/nxl3477/md-img-storage/study/2022/202201271747838.png)]

文件内容如下

// src/index.js
import { aInit } from './a.js'

aInit()

// src/a.js
import b from './b.js'
import c from './c.js'
export const aInit = () => {
  console.log('a init')
}

// src/b.js
console.log('b import')

// src/c.js
console.log('c import')

思路

核心原理是三大阶段 解析-转换-生成

解析

解析的是文件的依赖关系， 将其全部收集起来，用于之后的转换

转换

  1. 将 es module 导入语法转换为 commonjs 导入语法
  2. 利用 iife 实现模块化

生成

将转换完的代码输出到 bundle.js 文件

总结

有了宏观上的三大流程， 我们就可以思考怎么去实现这个打包工具了：

  1. 读取文件内容
  2. 分析文件内容， 找出它的子依赖
  3. 保存当前文件的 code 和 子依赖列表， 并且如果有子依赖则回到第一步挨个处理子依赖， 全部处理完毕后生成 依赖关系图
  4. 将 es module 转换为 common js, 以兼容浏览器
  5. 生成iife代码，以实现模块化
  6. 输出为bundle.js

开始动手

首先我们在根目录创建一个 mini-webpack.js 文件， 用来编写我们的mini-webpack

1. 读取文件内容

利用 fs模块， 并将入口文件地址传入， 并将文件路径和读取到的内容导出

const fs = require('fs');

function createAsset(filePath) {

	const originCode = fs.readFileSync(filePath, 'utf8')
	
	return {
	
			filePath,
			
			code: originCode,
		
		}

}

createAsset('./src/index.js')

2. 分析文件内容， 找出它的子依赖

如何才能知道一个文件的依赖呢， 大体上有两个方案

  1. 使用正则去匹配 import from 等关键字， 缺点就是比较不灵活
  2. 使用 ast

我们这里当然使用 ast， 说到ast 那 babel 就是好东西了，对babel不熟悉的同学可以看之前写的这篇文章: 一文看懂 webpack 的所有 source map ！🤔

利用 @babel/parser 生成 ast ， 然后利用 @babel/traverse 对ast进行处理, 将分析到的依赖加入 deps 数组中，并导出

const parser = require('@babel/parser')
const traverse = require('@babel/traverse')
function createAsset(filePath) {
	const originCode = fs.readFileSync(filePath, 'utf8')
	
	const ast = parser.parse(originCode, {
		// 需要声明是 es module 
		sourceType: 'module'	
	});

	// 收集到内部import依赖
	const deps = []
	traverse.default(ast, {
		// 找到import 
		ImportDeclaration(path) {
			const node = path.node
			// 收集到依赖数组
			deps.push(node.source.value)
		}
	})

	return {
		filePath,
		code,
		deps
	}
}

3. 保存当前文件的 code 和 子依赖列表， 并且如果有子依赖则回到第一步挨个处理子依赖

利用广度优先遍历，以入口为起点，将所有资源的依赖收集到 graph 中

function createGraph (entryFile) {
  const entryAsset = createAsset(entryFile)
  // 首先是将入口文件加入
  const graph = [ entryAsset ]
  
  // 遍历图中所有资源
  for (const asset of graph) {
    // 如果当前资源存在子依赖
    asset.deps.forEach(relativePath => {
      const childAsset = createAsset(path.join(__dirname, 'src', relativePath))
	  // 将子依赖资源加入到 graph 数组，后续for循环自然也会将其处理
      graph.push(childAsset)
    })
  }

  return graph
}
// 调用
const graph = createGraph('./src/index.js')

我们看一下此时 graph的输出结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JBfZOOtG-1643883138653)(https://raw.githubusercontent.com/nxl3477/md-img-storage/study/2022/202201271842498.png)]

我们拿到了每个文件的文件路径， 文件内容，还有子依赖

4.将 es module 转换为 common js, 以兼容浏览器

这个转换 ，babel 同样可以做到， 此时我们修改一下 createAsset 方法， 利用 @babel/core 的
transformFromAst ，在将 ast 转回 code 的阶段使用@babel/preset-env 实现转换

const { transformFromAst } =require("@babel/core")

function createAsset(filePath) {
  const originCode = fs.readFileSync(filePath, 'utf8')

  const ast = parser.parse(originCode, {
    sourceType: 'module'
  });

  // 收集到内部import依赖
  const deps = []
  traverse.default(ast, {
    ImportDeclaration(path) {
      const node = path.node
      // 检测到的依赖都添加到数组里
      deps.push(node.source.value)
    }
  })


  // 将 es module 转换为 common js, 以兼容浏览器
  const { code } = transformFromAst(ast, originCode, {
    "presets": ["@babel/preset-env"]
  })


  return {
    filePath,
    code,
    deps
  }
}

再来看一下 graph的输出结果

可以看到里面 code ,已经不再是上一阶段的 import ,而是使用 require 进行引入

5. 生成iife代码，以实现模块化

虽然我们又了文件的依赖关系， 也将es module 转换为 common js ， 但目前还是无法在浏览器中使用， 为此我们要实现iife 模块化，我们来看看如何编写

首先，我们的目的是把下图的这些文件， 都打入到最终的 bundle.js

所以我们先手动把所有文件内容都放入bundle.js 看看

// index.js
import { aInit } from './a.js'
aInit()

// a.js
import b from './b.js'
import c from './c.js'
export const aInit = () => {
  console.log('a init')
}

// b.js
console.log('b import')

// c.js
console.log('c import')

显然，这样直接放在一起是无法运行的
首先需要将 esmodule 手动改为 common js

// index.js
const { aInit } = require('./a.js') 
aInit()

// a.js
const b = require('./b.js') 
const c = require('./c.js') 
module.exports.aInit = () => {
  console.log('a init')
}

// b.js
console.log('b import')

// c.js
console.log('c import')

改为 require 后同样是无法运行的， 因为浏览器里根本没有 require 方法， 所以我们需要给他一个

// index.js
function indexJs(require, module, exports) {
  const { aInit } = require('./a.js') 
  aInit()
}

// a.js
function aJs(require, module, exports) {
  const b = require('./b.js') 
  const c = require('./c.js') 
  module.exports.aInit = () => {
    console.log('a init')
  }
}
// b.js
function bJs(require, module, exports) {
  console.log('b import')
}

// c.js
function cJs(require, module, exports) {
  console.log('c import')
}

把每个文件都看成是一个 function , 它会接收 require, module, exports 三个参数, 现在 require 有地方取了， 但是我们还没做具体实现， 所以我们需要继续改造。

(function (moduleMap) {
  function require(filePath) {
    const fn = moduleMap[filePath]

    const module = {
      exports: {}
    }
    fn(require, module, module.exports)
    return module.exports
  }

  require('./index.js')
}({
  './index.js': function (require, module, exports) {
    const { aInit } = require('./a.js')
    aInit()
  },
  './a.js': function (require, module, exports) {
    const b = require('./b.js') 
    const c = require('./c.js') 
    module.exports.aInit = () => {
      console.log('a init')
    }
  },
  './b.js': function (require, module, exports) {
    console.log('b import')
  },
  './c.js': function (require, module, exports) {
    console.log('c import')
  }
}))

使用 iife 进行包裹，将文件映射作为参数传入， 并在函数内构造 require 方法， 其内部本质是从文件映射中获取相应的 function, 构造一个 module 对象，调用 function 并传入

并且最后调用一下入口文件

现在我们在浏览器里加载一下这个代码， 看看能否运行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ubfzV3ku-1643883138655)(https://raw.githubusercontent.com/nxl3477/md-img-storage/study/2022/202201271916623.png)]

ok , 没有问题

6. 输出为bundle.js

如何动态构造iife 呢，比较方便的方法就是使用模版引擎

我们编写一个 build 方法, 使用 bundle.ejs 模版进行渲染

function build(graph) {
  const template = fs.readFileSync('./template/bundle.ejs', { encoding: 'utf-8' })
  
  const ejsData = graph.map(asset => ({
    filePath: asset.filePath,
    code: asset.code
  }))
  console.log(ejsData)

  const code = ejs.render(template, { ejsData })

  fs.writeFileSync('./dist/bundle.js', code)
}

const graph = createGraph('./src/index.js')


build(graph)

bundle.ejs 模版内容如下 【 ejs模版引擎具体语法可取官方文档查看】

// bundle.ejs
(function (moduleMap) {
  function require(filePath) {
    const fn = moduleMap[filePath]

    const module = {
      exports: {}
    }
    fn(require, module, module.exports)
    return module.exports
  }

  require('./index.js')
}({
  <% ejsData.forEach(item => { %>
  "<%- item["filePath"] %>": function (require, module, exports) {
    <%- item["code"] %>
  },
  <% }) %>
}))

ejsData 是我们需要注入的变量， 就是我们的 资源关系依赖图， 对其进行forEach , 循环出所有资源

此时最终文件如下：

(function (moduleMap) {
  function require(filePath) {
    const fn = moduleMap[filePath];

    const module = {
      exports: {},
    };
    fn(require, module, module.exports);
    return module.exports;
  }

  require("./index.js");
})({
  "./src/index.js": function (require, module, exports) {
    "use strict";

    var _a = require("./a.js");

    (0, _a.aInit)();
  },

  "/Users/nxl3477/Documents/study_space/mini-series/mini-webpack/my-mini-webpack/src/a.js":
    function (require, module, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true,
      });
      exports.aInit = void 0;

      var _b = _interopRequireDefault(require("./b.js"));

      var _c = _interopRequireDefault(require("./c.js"));

      function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : { default: obj };
      }

      var aInit = function aInit() {
        console.log("a init");
      };

      exports.aInit = aInit;
    },

  "/Users/nxl3477/Documents/study_space/mini-series/mini-webpack/my-mini-webpack/src/b.js":
    function (require, module, exports) {
      "use strict";

      console.log("b import");
    },

  "/Users/nxl3477/Documents/study_space/mini-series/mini-webpack/my-mini-webpack/src/c.js":
    function (require, module, exports) {
      "use strict";

      console.log("c import");
    },
});

我们发现产出的文件有一些问题，
我们实际 require 的是文件的相对路径， 而传入的 moduleMap 很多资源是绝对路径，所以，比如 require(’./a.js’) 是找不到的， 所以我们得再想办法改造一下

iife 代码改造为如下，我们赋予所有的 资源模块一个 id ,并携带一个用于 相对路径映射实际id 的对象


(function (moduleMapping) {
  function require(moduleId) {
	// 取出函数和 映射对象
    const [ fn, mapping ] = moduleMapping[moduleId]

	// 对 require 包装一层， 先通过自身的 mapping 取出实际的id， 然后再调用 require 取出实际的资源
    function localRequre(filePath) {
      const _moduleId = mapping[filePath]
      return require(_moduleId)
    }

    const module = {
      exports: {}
    }

    fn(localRequre, module, module.exports)
    return module.exports
  }

  require(0)
}({
  // 改为传入数组， 第一个元素为函数， 第二个是用来映射相对路径的对象
  // ./index.js
  0: [function (require, module, exports) {
    const { aInit } = require('./a.js')
    aInit()
  }, { './a.js': 1 }],
  // ./a.js
  1: [function (require, module, exports) {
    const b = require('./b.js') 
    const c = require('./c.js') 
    module.exports.aInit = () => {
      console.log('a init')
    }
  }, { './b.js': 2, './c.js': 3 }],
  // './b.js'
  2: [function (require, module, exports) {
    console.log('b import')
  }, {}],
  // './c.js'
  3: [function (require, module, exports) {
    console.log('c import')
  }, {}]
}))

根据上面这个代码，我们更新一下 ejs模版

// bundle.ejs
(function (moduleMapping) {
  function require(moduleId) {
    const [ fn, mapping ] = moduleMapping[moduleId]

    function localRequre(filePath) {
      const _moduleId = mapping[filePath]
      return require(_moduleId)
    }

    const module = {
      exports: {}
    }

    fn(localRequre, module, module.exports)
    return module.exports
  }
  // 入口Id 为0
  require(0)
}({
  <% ejsData.forEach(item => { %>
  "<%- item["id"] %>": [function (require, module, exports) {
    <%- item["code"] %>
  }, <%- JSON.stringify(item.mapping) %> ],
  <% }) %>
}))

mini-webpack.js 也要进行调整：

  1. 为每个资源模块生成一个 id
  2. 为每个资源模块构造 mapping 用来映射子依赖的模块id
let uid = 0

function createAsset(filePath) {
  const originCode = fs.readFileSync(filePath, 'utf8')

  const ast = parser.parse(originCode, {
    sourceType: 'module'
  });

  // 收集到内部import依赖
  const deps = []
  traverse.default(ast, {
    ImportDeclaration(path) {
      const node = path.node
      // 检测到的依赖都添加到数组里
      deps.push(node.source.value)
    }
  })

  const { code } = transformFromAst(ast, originCode, {
    "presets": ["@babel/preset-env"]
  })

  return {
    filePath,
    code,
    // 新增 mappping
    mapping: {},
    deps,
	// 新增 id
    id: uid++
  }
}


// 完善mapping数据
function createGraph (entryFile) {
  const entryAsset = createAsset(entryFile)
  const graph = [ entryAsset ]
  
  // 遍历图中所有资源
  for (const asset of graph) {
    // 编译每个资源的依赖
    asset.deps.forEach(relativePath => {
      const child = createAsset(path.join(__dirname, 'src', relativePath))
      // 将子依赖的id 写入父资源模块的
      asset.mapping[relativePath] = child.id
      graph.push(child)
    })
  }

  return graph
}


// 完善 ejsData 的数据
function build(graph) {
  const template = fs.readFileSync('./template/bundle.ejs', { encoding: 'utf-8' })
  
  const ejsData = graph.map(asset => ({
    filePath: asset.filePath,
    code: asset.code,
    id: asset.id,
    mapping: asset.mapping
  }))
  console.log(ejsData)

  const code = ejs.render(template, { ejsData })

  fs.writeFileSync('./dist/bundle.js', code)
}

好此时，我们再来看看生成的代码

(function (moduleMapping) {
  function require(moduleId) {
    const [fn, mapping] = moduleMapping[moduleId];

    function localRequre(filePath) {
      const _moduleId = mapping[filePath];
      return require(_moduleId);
    }

    const module = {
      exports: {},
    };

    fn(localRequre, module, module.exports);
    return module.exports;
  }

  require(0);
})({
  0: [
    function (require, module, exports) {
      "use strict";

      var _a = require("./a.js");

      (0, _a.aInit)();
    },
    { "./a.js": 1 },
  ],

  1: [
    function (require, module, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true,
      });
      exports.aInit = void 0;

      var _b = _interopRequireDefault(require("./b.js"));

      var _c = _interopRequireDefault(require("./c.js"));

      function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : { default: obj };
      }

      var aInit = function aInit() {
        console.log("a init");
      };

      exports.aInit = aInit;
    },
    { "./b.js": 2, "./c.js": 3 },
  ],

  2: [
    function (require, module, exports) {
      "use strict";

      console.log("b import");
    },
    {},
  ],

  3: [
    function (require, module, exports) {
      "use strict";

      console.log("c import");
    },
    {},
  ],
});

然后去浏览器执行一下

ok， 完美， 一个简单的打包工具就完成了

完整代码已上传至github: mini-webpack

参考资料：
手摸手带你实现打包器 仅需 80 行代码理解 webpack 的核心

倪晓磊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack + typescript + babel打包*.min.js文件的环境配置
weixin_30625691的博客
06-20 533
将多个*.ts文件打包成一个*.min.js文件的开发配置 1、初始化 npm init 新建以下文件目录： 2、安装依赖： "devDependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "babel-loader": "^8.0.6", ...
svelte-webpack:使用Webpack和Bootstrap苗条
04-01
这个应用程序是一个简单的模板，展示了如何利用Svelte的精简特性，结合Webpack的强大功能以及Bootstrap的响应式设计，打造一个既高效又美观的前端项目。下面我们将详细介绍每个步骤。 1. **安装**： 在开始之前，...
mini-webpack实现
qq_41801117的博客
06-15 176
最近在通过对webapck的学习，自己手写实现一个mini-webpack，特地在此进行记录。 准备工作 我们首先需要准备一份待打包的文件进行测试。
从零实现一个迷你 Webpack
趣谈前端
11-17 147
大厂技术坚持周更精选好文webpack 是当前使用较多的一个打包工具，将众多代码组织到一起使得在浏览器下可以正常运行，下面以打包为目的，实现一个简易版 webpack，支持单入口文件的打包，不涉及插件、分包等。前置知识举个????，先来看看下面这个 demo，例子很简单，一个 index.js，里面引用了一个文件 a.js，a.js 内部引入了 b.js，通过 webpack 最简单的配置，将 ...
手写一个mini-webpack
lotte
01-03 185
前言 webapck 相关的内容： 手写一个 JavaScript 打包器 所有配置项 优化 90% 打包速度 优化包体积 优化首屏加载时间与页面流畅度 构建包分析 详细配置 手写一个 webapck 插件（模拟 HtmlWebpackPlugin 的实现） webapck4 核心源码解读 webap...
手写一个简易版的mini-webpack
weixin_44303404的博客
09-10 163
在写一个mini-webpack之前，需要先了解一个概念：AST。 AST（abstract syntax tree）抽象语法树 抽象语法树：在计算机科学中，抽象语法树，或者成为语法树，是源代码语法结构中的一种抽象表示。它以树状的形式表现编程语言的语法结构。树上的每个节点都表示源代码中的每个结构。 个人理解就是：AST抽象语法树根据JavaScript代码解析得到，JavaScript代码中的各个部分都可以在AST中表示出来。 AST的形成了反映出各部分代码之间的关系。 手写Webpack的核心思想 我们可
vue-cli webpack 引入swiper的操作方法
10-18
在Vue.js项目中，使用Vue CLI和Webpack搭建的环境，引入第三方库Swiper可以实现复杂的轮播图功能。Swiper是一款强大的触摸滑动组件，适用于移动设备和桌面浏览器。以下是详细的操作步骤： 1. **下载资源**：首先，...
webpack-5_frontend_starter:一个惊人的 webpack 5 starter 满足我的前端需求
08-05
豆豆网页设计网络包 :glowing_star: :glowing_star: :glowing_star: :glowing_star: :glowing_star: 下一个前端项目的 5 启动器。特征网络包 5 服务器 - 启用人力资源JS ES6 通天塔ESLint EJS 模板引擎更漂亮图像...
webpack中引用jquery的简单实现
11-22
var webpack = require("webpack"); var path = require("path"); module.exports = { entry:{ home:"./src/js/home.js", …… }, output:{ path:__dirname+"/dist/js", filename:"[name].min.js" }, ...
详解webpack分离css单独打包
12-10
`extract-text-webpack-plugin` 是一个非常有用的 Webpack 插件，它能够帮助我们将 CSS 从 JavaScript 模块中提取出来，形成独立的 CSS 文件。 1. **安装插件** 使用 npm 安装 `extract-text-webpack-plugin`： ...
手写 mini 版 Webpack
Lyrelion的博客
12-30 859
手写 mini 版 Webpack
Webpack 设计理念，实现mini-webpack
最新发布
guorui999的博客
01-29 154
Webpack 设计理念，实现mini-webpack
Webpack 入门指迷
weixin_33701564的博客
02-11 109
这个文章太老了. 去中文官网看教程吧. https://doc.webpack-china.org/大致内容还对, 但是注意 Webpack 已经升级了多个版本. 大概算是一份教程吧, 只不过效果肯定不如视频演示之类的好..Webpack 最近在英文社区上经常看到, 留了心, 但进一步了解是通过下边的视频:视频: How Instagra...
手把手教你写一个迷你 Webpack
华章IT官方博客
11-23 229
一、前言最近正好在学习 Webpack，觉得 Webpack 这种通过构建模块依赖图来打包项目文件的思想很有意思，于是参考了网上的一些文章实现了一个简陋版本的 mini-webpack，通...
mini-webpack 源码浅析
小平果的欢乐谷
01-08 644
minipack 源码简析 其实“打包”对于前端来说再熟悉不过了，但是深入其中的原理，却不是人人都熟悉。由于webpack功能的强大和盛行，我们大部分都是所谓的“配置工程师”。借此，特地简单分析了一官方文档中提到的一个minipack项目的源码，以此深入了解下什么是打包？以及打包的原理是什么？ 文章写的比较平，是按照分析代码的顺序写的，细微有些总结，有错误或不妥之处，恳请指出。 前置知识 首先...
webpack从index.html中引入vue.min.js改为webpack引入vue包
youyudexiaowangzi的专栏
01-05 749
原项目是vue，在index.html中通过script的方式引入vue、element-ui等重要库。现将其改为通过npm install 的方式引入package
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值