【Webpack】1080- Webpack入门到精通(AST、Babel、依赖)

向右看齐 2022-09-11 09:12 26阅读 0赞

> ❝
> 
> 读者投稿：作者：一咻，原文地址：https://juejin.cn/post/6975885302493609991?share\_token=68a0b777-70c1-4021-a894-3ed9f8c107e9
> 
> ❞

## babel与AST ##

### 初始化项目 ###

mkdir webpack-study
    cd webpack-study
    yarn init -y

此时在package.json里面加入以下依赖

{
      "name": "01",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "dependencies": {
        "@babel/core": "7.12.3",
        "@babel/generator": "7.12.5",
        "@babel/parser": "7.12.5",
        "@babel/preset-env": "7.12.1",
        "@babel/traverse": "7.12.5",
        "ts-node": "9.0.0",
        "typescript": "4.0.5"
      },
      "devDependencies": {
        "@types/babel__core": "7.1.12",
        "@types/babel__generator": "7.6.2",
        "@types/babel__parser": "7.1.1",
        "@types/babel__preset-env": "7.9.1",
        "@types/babel__traverse": "7.0.15",
        "@types/node": "14.14.6"
      }
    }

### babel以及项目依赖 ###

![02edca3f7d246584080929b31c8e0dc3.png][]对使用到的包进行说明 详细内容请参考: 理解babel的基本原理和使用方法

*  @babel/core Babel 是一个 JavaScript 编译器， Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

1.  语法转换
2.  通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js，实现）
3.  源码转换 (codemods)

*  @babel/generator
    
    这个过程已经在上面的实例中有所展现，使用的插件是@babel/generator，其作用就是将转换好的ast重新生成代码。这样的代码就就可以安全的在浏览器运行。
 *  @babel/parser
    
    在babel中编译器插件是@babel/parser，其作用就是将源码转换为AST，
 *  @babel/preset-env （预设(preset)——babel的插件套装）
    
    那么问题来了新语法新特性那么多，难道我们要挨个去加吗？当然不是，babel已经预设了几套插件，将最新的语法进行转换，可以使用在不同的环境中，如下：

@babel/preset-env
    @babel/preset-flow
    @babel/preset-react
    @babel/preset-typescript

从名字上就能看出他们使用的环境了，需要注意的是env，他的作用是将最新js转换为es6代码。预设是babel插件的组合，我们可以看下package.json（截取一部分）：

![aab1b909e0112f84917b85442165d05e.png][] image.png

*  @babel/traverse

ast进行遍历parse

*  ts-node 使用.d.ts文件 既然要开发一个项目，显然不会只有这些代码。肯定要用到内建模块和第三方模块。然而，直接导入模块，在.ts文件中是不行的。例如：

![a417dcc857d1e1386496fe585b59d220.png][]这是由于typescript自身的机制，需要一份xx.d.ts声明文件，来说明模块对外公开的方法和属性的类型以及内容。感觉有一些麻烦。好在，官方以及社区已经准备好了方案，来解决这个问题。

在TypeScript 2.0以上的版本，获取类型声明文件只需要使用npm。在项目目录下执行安装:

npm install --save-dev @types/node

就可以获得有关node.js v6.x的API的类型说明文件。之后，就可以顺利的导入需要的模块了:

import * as http from 'http';

### 小试牛刀 ###

我们安装好依赖之后，编写以下代码

touch var_to_let.ts

import { parse } from '@babel/parser'
    import traverse from '@babel/traverse'
    import generate from '@babel/generator'
    
    //将一段代码(字符串)转换成 AST
    
    let code = `let a = 'str'; let b = 2`
    
    const ast = parse(code, { sourceType: 'module' })
    
    console.log(ast)

在vscode里面打上断点

![7ba8ef395f60cbb6dbcc302737ac6ebf.png][]接着我们在终端运行

![73f0a7645e6c84d2e450875938908f65.png][]就可以进行断点调试了，我们可以看到parse()函数把字符串的代码转换后的结果

![9023c4d147ddd1ae4314ea1e61d97162.png][] image.png

我们在这个ast树形结构里面找到以下几个属性，不难发现ats就是把一个字符串代码，表示成一个树形结构。

![384aa47fa6ada128ed08900119c614e4.png][] image.png

### 把let变成 var ###

traverse(ast, {
      //遍历每一个节点都会进入的回调函数。
      enter: item => {
        if(item.node.type === 'VariableDeclaration') {
          if(item.node.kind === 'let') {
            item.node.kind = 'var'
          }
        }
      }
    })
    
    const result = generate(ast, {}, code)
    console.log(result)

看下面的结果，我们修改了ats对象里面的属性的值，最终通过generate函数生成了一个新的字符串代码片段。成功的将原始代码里面的let转化成了var。嗯？Es6转Es5就这么简单？我们继续![b2c90a10076e3ed8de41351183daba22.png][]

### 为什么用AST? ###

1.  很难用正则表达式来替换，正则表达式很容易把`let a = 'let'`，替换成`var a = 'var'`
2.  在修改的时候需要知道每一个单词的意思，才能做到只修改用于`变量声明`的`let`
3.  而AST能明确的告诉你每个`let`的意思

### 把代码转化为ES5 ###

//使用@babel/core 和 @babel/preset-env把代码自动转化成ES5
    
    import { parse } from '@babel/parser'
    import * as babel from '@babel/core'
    
    let code = `let a = 'str'; let b = 2; const c = 100`
    
    //把字符串转成ast
    const ast = parse(code, { sourceType: 'module' })
    
    //把ats变成字符串
    const result = babel.transformFromAstSync(ast, code, {
      presets: ['@babel/preset-env']
    })
    
    console.log(result)

得到以下结果，可以看到`const`和`let`都被转化成了ES5的代码了。下面我们接着写，我们把code字符串代码放在文件里面，把生成的结果写入到另一个.es5.js结尾的文件中。![76f7ec310f10cc7a5710d926bdac42e2.png][]

//使用@babel/core 和 @babel/preset-env把代码自动转化成ES5
    
    import { parse } from '@babel/parser'
    import * as babel from '@babel/core'
    import * as fs from 'fs'
    
    //从文件中读取源代码，并转成字符串
    let code = fs.readFileSync('./test.js').toString()
    
    //把字符串转成ast
    const ast = parse(code, { sourceType: 'module' })
    
    //把ats变成字符串
    const result = babel.transformFromAstSync(ast, code, {
      presets: ['@babel/preset-env']
    })
    
    //把生成好的字符串写入文件里面
    let fileName = 'test.es5.js'
    fs.writeFileSync(fileName, result.code)

通过以上代码我们就将一个源文件是`ES6`的`js`代码转换成了`ES6`的代码

![f53ab98f0efad89631ab82b0ea6008a3.png][] image.png

### 分析index.js的依赖 ###

在当前目录下新建project-01目录，新建三个文件`a.js`,`b.js`,`index.js`分别写下以下内容

a.js

var a = {
      value: 100
    }
    
    export default a

b.js

var b = {
      value : 100
    }
    
    export default b

index.js

import a from './a'
    import b from './b'
    
    var sum = a.value + b.value 
    
    console.log(sum)

因为当前我们的环境是`node`环境，为了在`node`里面让`import`生效，我们使用以下方法。

全局安装 babel-cli

npm install babel-cli -g

安装 babel-preset-env

npm install babel-preset-env -D

然后原来是 node server.js，改为这样调用：babel-node --presets env server.js

> ❝
> 
> 需要注意的是如果只是为了 babel-node 这一个命令，安装 babel-cli 会加载安装很多资源和模块，出于性能考虑不推荐在生产环境使用。自己在开发调试的时候，可以鼓捣着玩玩
> 
> ❞

下面我们在命令行执行以下操作，便可以看到结果。呀是不是有点跑偏了的感觉，我们是来分析`index.js`文件的依赖项的呀，赶紧回到正题。

![d7728d7fde65140f0fd540a1c12b79d8.png][] image.png

在项目下新建`deps.ts`文件，在文章最后面我会把完整的代码放上来，一段一段贴代码，太浪费空间了。

最终我们得到了想要的结果。

![f268cd9fc0f458adffb70f425131e20b.png][] image.png

### 递归分析嵌套的依赖 ###

下面我们再加一点难度，假如我们的`a.js`又依赖了其他的文件呢？`b.js`也同样依赖了其他文件呢？我们又该如何获取到其内部文件依赖的依赖呢？我们继续

cp -r project-01/ project-02

cd project-02
    
    mkdir lib

a.js

import a1 from "./lib/a1.js"
    
    var a = {
      value: 'a'
    }
    
    export default a

b.js

js
    import b1 from "./lib/b1.js"
    
    var b = {
      value : 100
    }
    
    export default b

在之前的`a.js`和`b.js`里面分别把这两个文件`import`进去， 这样就有更深层次的依赖关系了，我们下面只需要在遍历`AST`语法树的时候，当发现这个节点是`ImportDeclaration`的时候，再获取这个节点的值，组装一下真实的文件路径，再递归调用把组装好的路径传入`collectCodeAndDeps`便可以继续分析了。

### 什么是循环依赖? ###

index.js

import a from './a.js'
    import b from './b.js'
    
    console.log(a)
    let sum = a.value + b.value
    
    console.log(sum)

a.js

import b from './b.js'
    
    var a = {
      value: b.value + 1
    }
    
    export default a

b.js

js
    import a from './a.js'
    
    var b = {
      value: a.value + 1
    }
    
    export default b

我在node版本为`v16.3.0`下面测试得到的结果。

![3277db3bf9226f673c42918857ce2892.png][] image.png

如果我们把上面value的值换成一个常量的话，就可以正常执行完代码了。

### 静态分析循环依赖 ###

在遍历`AST`的时候如果发现在之前的记录里面已经有了，就不再进行遍历了。

//分析index.js里面代码依赖的文件
    import { resolve, relative, dirname } from 'path'
    import { readFileSync } from 'fs'
    
    import { parse } from '@babel/parser'
    import traverse from '@babel/traverse';
    
    
    //设置项目根目录
    
    
    const projectRoot = resolve(__dirname, 'project-02')
    
    //声明最终结果的类型
    var result = {
      'index.js': {
        deps: ['a.js', 'b.js'],
        code: "import a from './a'\r\nimport b from './b'\r\n\r\nvar sum = a.value + b.value \r\n\r\nconsole.log(sum)"
      }
    }
    
    type DepRelation = {
      [key: string]: {
        deps: string[],
        code: string
      }
    }
    
    interface a {
    
    }
    //初始化
    
    const depRelation: DepRelation = {}
    
    function collectCodeAndDeps(filepath: string) {
      let key = getProjectPath(filepath)
      if (Object.keys(depRelation).includes(key)) {
        // 注意，重复依赖不一定是循环依赖
        return
      }
      //先读取index文件的内容
      //把字符串代码转换成ats
      let code = readFileSync(resolve(filepath)).toString()
    
      //把入口文件的文件名当做map的key
      depRelation[key] = {
        deps: [],
        code
      }
    
      let ast = parse(code, {
        sourceType: 'module'
      })
    
      //遍历ast
    
      traverse(ast, {
        enter: path => {
          //如果发现当前语句是 import 就把inport的value 写入到依赖中去
          if (path.node.type === 'ImportDeclaration') {
            //当前文件的上一级目录 与获取到当前文件的依赖文件进行拼接。
            let depAbsolutePath = resolve(dirname(filepath), path.node.source.value)
            //获取当前文件与根目录的相对路径
            const depProjectPath = getProjectPath(depAbsolutePath)
            // 把依赖写进 depRelation
            depRelation[key].deps.push(depProjectPath)
            //拿到依赖文件的真实路径进行再一次依赖分析
            collectCodeAndDeps(depAbsolutePath)
          }
        }
      })
    }
    
    collectCodeAndDeps(resolve(projectRoot, 'index.js'))
    
    console.log(depRelation)
    
    //获取文件相对跟目录的相对路径
    /*
    C: \\Users\\code\\zf\\webpack\\01\\project - 01
    C: \\Users\\code\\zf\\webpack\\01\\project - 01\\index.js
    
    //得到的结果就是index.js
    */
    function getProjectPath(path: string) {
      return relative(projectRoot, path).replace(/\\/g, '/')
    }

### 总结 ###

#### AST相关 ####

1.  parse：把代码转换成AST
2.  traverse：遍历AST，并在需要的时候可以进行修改
3.  generate：把AST再转换成代码code2

#### 工具相关 ####

1.  babel 可以把高级代码转换成ES5代码
2.  @babel/parser
3.  @babel/traverse
4.  @babel/generate
5.  @babel/core
6.  @babel-preset-env 获取您指定的任何目标环境并根据其映射检查它们以编译插件列表并将其传递给 Babel

#### 代码技巧 ####

用哈希表来存储映射关系 通过检查哈希表的key来检测重复

#### 循环依赖 ####

有的循环依赖可以正常执行 有的循环依赖不可以正常执行 但是两者都可以进行静态分析

![7e0fbbf8d28463d48d8bc16fdb197072.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![02ac851ee0555c1c78020f09ea5ba318.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[02edca3f7d246584080929b31c8e0dc3.png]: /images/20220828/99451514b4be4b5daa072b8fd258330b.png
[aab1b909e0112f84917b85442165d05e.png]: /images/20220828/038f5d6d709a48ae81878ccf56638c91.png
[a417dcc857d1e1386496fe585b59d220.png]: /images/20220828/acc7ede9921947cdb40c8fb39a0c604a.png
[7ba8ef395f60cbb6dbcc302737ac6ebf.png]: /images/20220828/01934fb9b29044f39f3bbeb63fd21a5a.png
[73f0a7645e6c84d2e450875938908f65.png]: /images/20220828/2fa1b51562db4d1290819030db84d085.png
[9023c4d147ddd1ae4314ea1e61d97162.png]: /images/20220828/b133fb11172445b49e967398d1699848.png
[384aa47fa6ada128ed08900119c614e4.png]: /images/20220828/fbbaf80d4c9141269d1a9b0d9c82847e.png
[b2c90a10076e3ed8de41351183daba22.png]: /images/20220828/c6903a21804e404b990f6d775eea6554.png
[76f7ec310f10cc7a5710d926bdac42e2.png]: /images/20220828/ac3066afa92d49c3a24213d9d1dc12de.png
[f53ab98f0efad89631ab82b0ea6008a3.png]: /images/20220828/49451238a7074a71993f5c7b8a24ae7c.png
[d7728d7fde65140f0fd540a1c12b79d8.png]: /images/20220828/03ef7ee3898d481faabc8cd1574414e1.png
[f268cd9fc0f458adffb70f425131e20b.png]: /images/20220828/8db6e341cf464c16827963285cf75819.png
[3277db3bf9226f673c42918857ce2892.png]: /images/20220828/6957eb4687cd4f9ab9670b83329deedb.png
[7e0fbbf8d28463d48d8bc16fdb197072.gif]: /images/20220828/d93d1f5be41c42bf91c3f8c97d0dbf10.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[02ac851ee0555c1c78020f09ea5ba318.gif]: /images/20220828/477ea993805149a8a0c671ea56524484.png