实现webpack小型打包工具|原理篇 | 前端进阶之旅

该工具可以实现以下两个功能

将 ES6 转换为 ES5
支持在 JS 文件中 import CSS 文件

通过这个工具的实现，大家可以理解到打包工具的原理到底是什么

实现

因为涉及到 ES6 转 ES5，所以我们首先需要安装一些 Babel 相关的工具

yarn add babylon babel-traverse babel-core babel-preset-env

@前端进阶之旅: 代码已经复制到剪贴板

接下来我们将这些工具引入文件中

const fs = require('fs')
const path = require('path')
const babylon = require('babylon')
const traverse = require('babel-traverse').default
const { transformFromAst } = require('babel-core')

@前端进阶之旅: 代码已经复制到剪贴板

首先，我们先来实现如何使用 Babel 转换代码

function readCode(filePath) {
  // 读取文件内容
  const content = fs.readFileSync(filePath, 'utf-8')
  // 生成 AST
  const ast = babylon.parse(content, {
    sourceType: 'module'
  })
  // 寻找当前文件的依赖关系
  const dependencies = []
  traverse(ast, {
    ImportDeclaration: ({ node }) => {
      dependencies.push(node.source.value)
    }
  })
  // 通过 AST 将代码转为 ES5
  const { code } = transformFromAst(ast, null, {
    presets: ['env']
  })
  return {
    filePath,
    dependencies,
    code
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

首先我们传入一个文件路径参数，然后通过 fs 将文件中的内容读取出来
接下来我们通过 babylon 解析代码获取 AST，目的是为了分析代码中是否还引入了别的文件
通过 dependencies 来存储文件中的依赖，然后再将 AST 转换为 ES5 代码
最后函数返回了一个对象，对象中包含了当前文件路径、当前文件依赖和当前文件转换后的代码

接下来我们需要实现一个函数，这个函数的功能有以下几点

该工具可以实现以下两个功能

将 ES6 转换为 ES5
支持在 JS 文件中 import CSS 文件

通过这个工具的实现，大家可以理解到打包工具的原理到底是什么

实现

因为涉及到 ES6 转 ES5，所以我们首先需要安装一些 Babel 相关的工具

yarn add babylon babel-traverse babel-core babel-preset-env

@前端进阶之旅: 代码已经复制到剪贴板

接下来我们将这些工具引入文件中

const fs = require('fs')
const path = require('path')
const babylon = require('babylon')
const traverse = require('babel-traverse').default
const { transformFromAst } = require('babel-core')

@前端进阶之旅: 代码已经复制到剪贴板

首先，我们先来实现如何使用 Babel 转换代码

function readCode(filePath) {
  // 读取文件内容
  const content = fs.readFileSync(filePath, 'utf-8')
  // 生成 AST
  const ast = babylon.parse(content, {
    sourceType: 'module'
  })
  // 寻找当前文件的依赖关系
  const dependencies = []
  traverse(ast, {
    ImportDeclaration: ({ node }) => {
      dependencies.push(node.source.value)
    }
  })
  // 通过 AST 将代码转为 ES5
  const { code } = transformFromAst(ast, null, {
    presets: ['env']
  })
  return {
    filePath,
    dependencies,
    code
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

首先我们传入一个文件路径参数，然后通过 fs 将文件中的内容读取出来
接下来我们通过 babylon 解析代码获取 AST，目的是为了分析代码中是否还引入了别的文件
通过 dependencies 来存储文件中的依赖，然后再将 AST 转换为 ES5 代码
最后函数返回了一个对象，对象中包含了当前文件路径、当前文件依赖和当前文件转换后的代码

接下来我们需要实现一个函数，这个函数的功能有以下几点