webpack手写——bundler源码编写(三)

最新推荐文章于 2022-02-24 22:09:26 发布
最新推荐文章于 2022-02-24 22:09:26 发布
阅读量163 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20464593/article/details/106520793
版权

项目初始化

新建项目bundler,在目录下新建src目录,在目录新建文件, 目录结构如下:
在这里插入图片描述
word.js

export const word = 'hello'

message.js

import {word} from './word.js'
const message = `say ${word}`
export default message

index.js

import {message} from './message.js'
console.log(message)

实现打包工具

1.分析入口文件

bundler.js

const fs = require('fs') //获取文件信息
// 分析入口文件
const moduleAnalyser = (filename) => {
    //读取文件
    const content = fs.readFileSync(filename, 'utf-8')
    console.log(content)
}
//对index.js进行分析
moduleAnalyser('./src/index.js')

运行node bundler.js,打印出了index.js中的内容:

katedeMacBook-Air:bundler kate$ node bundler.js
import {message} from './message.js'
console.log(message)
katedeMacBook-Air:bundler kate$

让代码高亮显示
安装:

npm install cli-highlight -g

运行node bundler.js | highlight

2.拿到模块的依赖

babel: 帮助我们分析语法
安装:

npm install @babel/parser --save

参考文档: https://www.babeljs.cn/docs/babel-parser
bundler.js

const fs = require('fs') //获取文件信息
const parser = require('@babel/parser')
// 分析入口文件
const moduleAnalyser = (filename) => {
    //读取文件
    const content = fs.readFileSync(filename, 'utf-8')
    console.log(parser.parse(content, {
        sourceType: 'module'
    }))
    // console.log(content)
}
//对index.js进行分析
moduleAnalyser('./src/index.js')

运行node bundler.js | highlight,打印出抽象语法树

katedeMacBook-Air:bundler kate$ node bundler.js | highlight
Node {
  type: 'File',
  start: 0,
  end: 57,
  loc:
   SourceLocation {
     start: Position { line: 1, column: 0 },
     end: Position { line: 2, column: 20 } },
  errors: [],
  program:
   Node {
     type: 'Program',
     start: 0,
     end: 57,
     loc: SourceLocation { start: [Position], end: [Position] },
     sourceType: 'module',
     interpreter: null,
     body: [ [Node], [Node] ],
     directives: [] },
  comments: [] }

使用babel中parse分析抽象语法树
bundler.js

const fs = require('fs') //获取文件信息
const parser = require('@babel/parser')
// 分析入口文件
const moduleAnalyser = (filename) => {
    //读取文件
    const content = fs.readFileSync(filename, 'utf-8')
    const ast = parser.parse(content, {
        sourceType: 'module'
    })
    console.log(ast.program.body)
}
//对index.js进行分析
moduleAnalyser('./src/index.js')

运行node bundler.js | highlight

katedeMacBook-Air:bundler kate$ node bundler.js | highlight
[ Node {
    type: 'ImportDeclaration',
    start: 0,
    end: 36,
    loc: SourceLocation { start: [Position], end: [Position] },
    specifiers: [ [Node] ],
    source:
     Node {
       type: 'StringLiteral',
       start: 22,
       end: 36,
       loc: [SourceLocation],
       extra: [Object],
       value: './message.js' } },
  Node {
    type: 'ExpressionStatement',
    start: 37,
    end: 57,
    loc: SourceLocation { start: [Position], end: [Position] },
    expression:
     Node {
       type: 'CallExpression',
       start: 37,
       end: 57,
       loc: [SourceLocation],
       callee: [Node],
       arguments: [Array] } } ]

两个node里是声明的语句, 声明的语句放置的是入口文件对应的依赖关系

使用babel中的traverse
安装:

npm install @babel/traverse --save

bundler.js

const fs = require('fs') //获取文件信息
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
// 分析入口文件
const moduleAnalyser = (filename) => {
    //读取文件
    const content = fs.readFileSync(filename, 'utf-8')
    const ast = parser.parse(content, {
        sourceType: 'module'
    })
    const dependencies = []
    //对代码分析
    //对ast遍历
    traverse(ast, {
        ImportDeclaration({node}) {
            // console.log(node)
            dependencies.push(node.source.value)
        }
    })
    console.log(dependencies)
}
//对index.js进行分析
moduleAnalyser('./src/index.js')

运行node bundler.js | highlight:

katedeMacBook-Air:bundler kate$ node bundler.js | highlight
[ './message.js' ]

路径是相对路径,需要打印出绝对路径(相对于bundler.js文件):
bundler.js

const fs = require('fs') //获取文件信息
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const path = require('path')
// 分析入口文件
const moduleAnalyser = (filename) => {
    //读取文件
    const content = fs.readFileSync(filename, 'utf-8')
    const ast = parser.parse(content, {
        sourceType: 'module'
    })
    const dependencies = []
    //对代码分析
    //对ast遍历
    traverse(ast, {
        ImportDeclaration({node}) {
            const dirname = path.dirname(filename)
            const newFile = './' + path.join(dirname, node.source.value)
            console.log(newFile)
            dependencies.push()
        }
    })
}
//对index.js进行分析
moduleAnalyser('./src/index.js')

运行node bundler.js | highlight:

katedeMacBook-Air:bundler kate$ node bundler.js | highlight
./src/message.js

存两个路径

const fs = require('fs') //获取文件信息
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const path = require('path')
// 分析入口文件
const moduleAnalyser = (filename) => {
    //读取文件
    const content = fs.readFileSync(filename, 'utf-8')
    const ast = parser.parse(content, {
        sourceType: 'module'
    })
    const dependencies = {}
    //对代码分析
    //对ast遍历
    traverse(ast, {
        ImportDeclaration({node}) {
            const dirname = path.dirname(filename)
            const newFile = './' + path.join(dirname, node.source.value)
            dependencies[node.source.value] = newFile
        }
    })
    console.log(dependencies)
}
//对index.js进行分析
moduleAnalyser('./src/index.js')

运行node bundler.js | highlight:

katedeMacBook-Air:bundler kate$ node bundler.js | highlight
{ './message.js': './src/message.js' }

3.转换成浏览器上可以运行的代码

使用babel中的core
安装:

npm install @babel/core --save

参考文档: https://www.babeljs.cn/docs/babel-core

使用babel中的preset-env
安装: npm i @babel/preset-env --save
bundler.js

const fs = require('fs') //获取文件信息
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const path = require('path')
const babel = require('@babel/core')
// 分析入口文件
const moduleAnalyser = (filename) => {
    //读取文件
    const content = fs.readFileSync(filename, 'utf-8')
    const ast = parser.parse(content, {
        sourceType: 'module'
    })
    const dependencies = {}
    //对代码分析
    //对ast遍历
    traverse(ast, {
        ImportDeclaration({node}) {
            const dirname = path.dirname(filename)
            const newFile = './' + path.join(dirname, node.source.value)
            dependencies[node.source.value] = newFile
        }
    })
    //能在浏览器上运行的模块代码
    const {code} = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"] //es6 => es5
    })
    console.log(code)
    //分析出入口文件和依赖和代码
    return {
        filename, 
        dependencies
        code
    }
}
//对index.js进行分析
moduleAnalyser('./src/index.js')

运行node bundler.js | highlight:

katedeMacBook-Air:bundler kate$ node bundler.js | highlight
"use strict";

var _message = require("./message.js");

console.log(_message.message);

入口文件总的分析

//...
    //分析出入口文件和依赖和代码
    return {
        filename, 
        dependencies,
        code
    }
}
//对index.js进行分析
const moduleInfo = moduleAnalyser('./src/index.js')
console.log(moduleInfo)

运行node bundler.js | highlight:

katedeMacBook-Air:bundler kate$ node bundler.js | highlight
{ filename: './src/index.js',
  dependencies: { './message.js': './src/message.js' },
  code:
   '"use strict";\n\nvar _message = require("./message.js");\n\nconsole.log(_message.message);' }
我是一个脸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写webpack简化版源码
weikehang的博客
07-11 313
1、webpack配置 let path = require("path"); //定义的插件 class A { //apply是固定的格式 apply(compiler) { //挂上每个钩子等待触发 compiler.hooks.parse.tap("xxx", function () { console.log(...
尤大前端新玩具-vite 简介 对比Webpack 手写实现简单的vite实现
欢迎来到iceseasyh的博客
04-14 1712
文章目录Vite定义由来vite创建项目对比差异点vite速度体验viet两个子命令：webpack启动过程：vite启动过程：vite第一次启动时的编译vite的按需请求NPM 依赖解析和预构建：HMR 模块热重载打包和不打包的问题实现原理核心思路手写实现vite小结 Vite 定义 面向现代浏览器的一个更轻，更快的web应用开发工具，基于ECMAScript标准原生模块系统(ES Modules)实现。 Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体
webpack中bundler源码编写
weixin_30826095的博客
05-26 103
新建一个项目，再新建一个src文件夹，里面有三个文件，word.js,message.js,index.js word.js export const word = 'hello'; message.js import { word } from './word.js'; const message = `say ${word}`; export de...
Webpack系列——一个Bundler的编写
Smart_J_King的博客
01-18 204
Bundler 源码编写 模块分析 在项目 src 文件夹下建立下面三个文件： word.js export const word = 'hello'; message.js import { word } from './word.js'; ​ const message = `say ${word}`; ​ export default message; index.js import message from './message.js'; ​ console.log(messa
webpack打包原理:手写一个bundler
qq_34790741的博客
02-20 1658
webpack打包原理:手写一个bundler Webpack 凭借强大的功能与良好的使用体验，已经成为目前最流行，社区最活跃的打包工具，是现代 Web 开发必须掌握的技能之一,在本文中,将会讲解webpack底层,是如何将我们的业务代码打包并编译为浏览器可以运行的代码 准备工作 在讲解webpack打包原理之前,我们先进行一些准备工作,创建一些js文件,来供我们的bundler做打包测试 三个...
如何实现一个 Webpack 的 Bundler 打包机制 ？
五柳
10-04 354
前言 我想这两年，应该是「Webpack」受冲击最明显的时间段。前有「Snowpack」基于浏览器原生ES Module 提出，后有「Vite」站在「Vue3」肩膀上的迅猛发展，真的是后浪推前浪，前浪… 并且，「Vite」主推的实现技术不是一点点新，典型的一点使用「esbuild」来充当「TypeScript」的解释器，这一点是和目前社区内绝大多数打包工具是不同的。 在下一篇文章，我将会介绍什么是「esbuild」，以及其带来的价值。 但是，虽说后浪确实很强，不过起码近两年来看「Webpack」所处的地
webpack系统学习（十六）手写一个简单的打包工具
Niall_Tonshall的博客
02-24 525
这篇文章分析了如何自己手写一个简单的打包工具。 我们先查看当前项目结构： word.js: //word.js export const word = 'hello' message.js: import {word} from "./word.js"; const message = `say ${word}` export default message index.js: //index.js import message from "./message.js"; console.log(m
webpack进阶——缓存与独立打包的用法
12-12
本文介绍了webpack进阶——缓存与独立打包的用法，分享给大家，希望对大家有帮助 先来看看最基础的webpack配置： var path = require('path'); module.exports = { entry: './src/index.js', output: { filename...
浅谈webpack和webpack-cli模块源码分析
11-21
webpack4与webpack3的区别 ...1、当我们安装了webpack模块后，就会在node_modules/.bin目录下生成一个webpack、webpack.cmd，webpack是linux下的命令脚本，webpack.cmd是windows下命令脚本，webpack.cmd可以在wi
详解webpack-dev-middleware 源码解读
10-15
在本文中，我们将深入理解 webpack-dev-middleware 的源码，了解它的工作原理和核心特性。 首先，让我们回顾一下 webpack-dev-middleware 的基本用法。在 Node.js 应用中，通常结合 Express 框架来使用。通过调用 `...
webpack——使用babel处理es6语法(七)
qq_20464593的博客
05-24 2680
1.使用babel 参考链接: https://babeljs.io/setup#installation 安装: npm install --save-dev babel-loader @babel/core 在src目录下新建index.js src/index.js //es6语法 const arr = [ new Promise(() => {}), new Promise(() => {}) ] arr.map(item => { console.l
webpack实战——TS的打包配置(三)
qq_20464593的博客
06-01 951
项目初始 1.新建一项目type-script并初始化 npm init -y 2.新建webpack.config.js 3.新建目录src,在src目录下新建index.tsx 4.安装webpack 和webpack-cli npm install webpack webpack-cli --save-dev index.tsx class Greeter { greeting: string constructor(message: string) { this.
webpack实战——proxy配置(四)
qq_20464593的博客
06-01 708
发送ajax请求 安装: npm install axios --save-dev src/index.js // 安装: npm i react react-dom --save //react: https://babeljs.io/docs/en/babel-preset-react //remove the `import '@babel/polyfill'` call or use `useBuiltIns: 'entry'` instead // import "@babel/polyfi
webpack——加载css、图片和字体(三)
qq_20464593的博客
05-23 604
我们尝试整合一些其他资源，比如图像，看看 webpack 如何处理。 1.加载css 为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader： npm install --save-dev style-loader css-loader webpack.config.js 添加规则 const path = require('path') module.exports = { //默认是
webpack——开发(五)
qq_20464593的博客
05-24 470
1.使用 source map 当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。 为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于
webpack——SplitChunksPlugin配置参数(十二)
qq_20464593的博客
05-28 463
代码分隔底层使用到了SplitChunksPlugin,所以接下来讲解一下SplitChunksPlugin参数的配置。 上一节执行异步代码的生成目录如下: 文件名为0.bundle.js,希望将文件名改为英文的可识别的名字,可以在异步加载组件当中加一段魔法注释: //魔法注释: /* webpackChunkName: “lodash” */ src/index.js function getComponent() { return import(/* webpackChunkName: "lo
webpack实战——Library的打包(一)
qq_20464593的博客
06-01 394
打包库文件 创建一新项目library,并初始化,生成一package.json文件 npm init -y package.json { "name": "library", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { }, "keywords": [], "author": "KATE", "license": "MIT" } 新建一src目录,在src目
webpack 手写plugin
最新发布
09-12
要手写一个webpack插件，你可以按照以下步骤进行操作： 1. 首先，了解webpack自身插件的调用流程。你可以参考webpack内部插件的实现方式来理解。其中一个例子是NodeEnvironmentPlugin插件。 2. 创建一个新的插件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值