Webpack入门到精通(AST、Babel、依赖)

最新推荐文章于 2025-05-14 03:34:58 发布

落落落落克

最新推荐文章于 2025-05-14 03:34:58 发布

阅读量621

点赞数 1

文章标签： vue python js java javascript

本文链接：https://blog.youkuaiyun.com/qq_34998786/article/details/120213472

版权

❝
读者投稿：作者：一咻，原文地址：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以及项目依赖

对使用到的包进行说明详细内容请参考: 理解babel的基本原理和使用方法

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

语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js，实现）
源码转换 (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（截取一部分）：

最低0.47元/天解锁文章