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: 将源代码解析成 AST
    • babel/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 目录下
 

© jianxiaoBai 2021 - 2024