Babel 的基本使用
date
Feb 6, 2022
slug
babel-use
status
Published
tags
使用笔记
summary
默认情况下
babel
什么都不会做,仅仅是代码的搬运工,所以需要用配置告诉它干些什么...type
Post
babel-cli
: 在 命令行 下使用 Babel 编译文件的方式
babel-register
:将 文件引入 至项目就可以运行 Babel 的方式
babel-core
:以 编程 的方式使用 Babel,可以获取AST
babel/parser
: 将源代码解析成 ASTbabel/generator
: 将 AST 解码生成新代码babel/traverse
: 用来遍历 AST 进行编辑操作
babel-polyfill
: 对新的 API 进行编译,实现向下兼容
babel-plugin-transform-runtime
:按需引入polyfill
默认情况下
babel
什么都不会做,仅仅是代码的搬运工,所以需要用配置告诉它干些什么.babelrc
{
// 预设,就是已经内置了很多相关配置项
"presets": [
// 插件的命名方式 babel-preset-*, 比如 babel-preset-es2015
// 引入方式使用后缀即可
"es2015", // 用来将代码编译成 ES5
"react",
"stage-2" // 提案阶段,stage-4 阶段为已采纳阶段,未来将会成为标准,会在 es2015 中
],
"plugins": [],
"parser": "babel-eslint" // 静态分析工具
}
babel src -d lib # babel 将 src 目录下所有的内容结合 .babelrc 的配置,打包到 lib 目录下