编译原理

前端工程化与编译原理

仅作为笔记

一、代码的本质是什么？那编译又是什么？

  代码的本质就是字符串，而对字符串一系列的操作就是编译。

二、代码的编译过程

    function compiler(sourceCode){
        //词法分析
        const tokens = lexer(sourceCode)
        
        //语法分析
        const ast = parser(tokens)
        
        //语义分析
        const analyzedAst = semanticANalysis(ast)
        
        //代码生成
        const code = codeGeneration(analyzedAst)
        
        return code
            
    }

 1.词法分析（lexical Analysis）：将源代码转换成单词流，称为“词法单元“（tokens）， 每个词法但愿包含一个标识符和一个属性值，比如变量名、数字、操作符等等。
 2.语法分析（Parsing）：将词法单元流转换成抽象语法树（Abstract Syntax Tree，简称AST），也就是标记所构成的数据结构，表示源代码的结构和规则。
 3.语义分析（semantic Analysis）：在ASRT上执行类型检查、作用域检查等操作，以确保代码的正确性和安全性。
 4.代码生成（Code Generation）：基于AST生成目标代码，包括优化代码结构、生成代码为本、进行代码压缩等操作。
 
 其中：
 lexer 是词法分析器，将源代码转成语法单元流
 parser 是语法分析器，将词法单元流转成抽象语法树
 semanticAnalysis 是语义分析器，对抽象语法树进行语义分析
 codeGeneration 是代码生成器，将分析后的AST生成目标代码
 

三、babel

babel是一个流行的javeScript的编译器

babel包含以下几个核心内容:
    @babel/core
    @babel/parser
    @babel/traverse
    @babel/generator
    
    
babel的预设：babel-parset-env

四、webpack的打包原理和过程

 webpack的基本配置
     splitChunk
     Tree shaking
     Dll
     Css提取
     Terser压缩
     model、entry、output、module（loader）、resolve、external、plugin
     
 webpack的核心概念
     1.Compiler
     2.Compilation
     3.Module
     4.Chunk
     5.Bundle
     
 webpack的执行过程
     1.初始化：初始化会读取配置信息、统计入口文件、解析loader以及plugin等信息
     2.编译阶段：webpack编译代码，部分毅力啊labbel（less转为css、ts转js等等一些）
     3.输出阶段：生成输出文件，包含文件名、输出路径、资源信息
     
   初始化阶段
 
     1.初始化参数
     2.创建compiler对象实例
     3.开始编译 compiler.run
     4.确定入口，根据entry，找出所有入口文件，调用addEntry
     
   构建阶段
       
       1.编译模块，通过entry对应的dependence对象创建 module对象，调用对应的loader将模块转为js内容，babel将一些内容转为目标内容
       2.完成模块编译，得到一个moduleGraph
       
    生成阶段
    
        1.输出资源组装chunk、chunkGroup，再将Chunk转换为一个单独文件加入到输出列表（afterChunks的这个勾子为最后修改资源内容的时机）
        2.写入文件系统（emitAssets）在确定好输出内容后，根据配置输出到文件中
       
        
           module->chunk->bundle
  
  
 loder
     本质为函数
     
    ```
        const loderUtils = require('loader-utils)
        export = modules.exports = function(source){
               //对souce进行一些处理
               return source
        }
    ```
 plugin
     本质为对象
     
    ```
        export default class CusPlugin{
            contructor(options = {}){
                 this.options = options
            }
            apply(compiler){
            }
        }
        
    ```