[TOC]
# 插件
大多数人使用 Babel 的内建预设就足够了,不过 Babel 提供了更多更细粒度的能力。
`@babel/preset-*` 就是一些预先配置好的插件的集合,如果你想要做一些不一样的事情你会手动去设定插件,这和使用预设几乎完全相同。
```js
{
"plugins": [
- "transform-es2015-classes"
+ ["transform-es2015-classes", { "loose": true }] // "宽松"模式,通过放弃一些标准中的行为来生成更简化且性能更好的代码
]
}
```
# 自定义插件
**自定义插件原理:自定义的babel插件实际上是定义一个实例化的visitor对象,来处理一系列的AST节点,进而操作代码。**
# Visitor 对象
babel在处理一个节点时,是以访问者的形式获取节点的信息,并进行相关的操作,这种操作是通过visitor对象实现的。
在visitor 中定义了处理不同节点的函数。
# 参考
* [官网-Babel 插件](http://babeljs.io/docs/plugins/)
* [Babel 插件开发指南](https://github.com/brigand/babel-plugin-handbook/blob/master/translations/zh-Hans/README.md)
* [《从 0 到 1 手写 babel》思路分享](https://juejin.cn/post/6962861837800964133)
* [从零开始编写一个 babel 插件](https://juejin.im/post/5a17d51851882531b15b2dfc)
* [写一个 babel 插件](https://cnodejs.org/topic/5a9317d38d6e16e56bb808d1)
- 讲解 Markdown
- 示例
- SVN
- Git笔记
- github 相关
- DESIGNER'S GUIDE TO DPI
- JS 模块化
- CommonJS、AMD、CMD、UMD、ES6
- AMD
- RequrieJS
- r.js
- 模块化打包
- 学习Chrome DevTools
- chrome://inspect
- Chrome DevTools 之 Elements
- Chrome DevTools 之 Console
- Chrome DevTools 之 Sources
- Chrome DevTools 之 Network
- Chrome DevTools 之 Memory
- Chrome DevTools 之 Performance
- Chrome DevTools 之 Resources
- Chrome DevTools 之 Security
- Chrome DevTools 之 Audits
- 技巧
- Node.js
- 基础知识
- package.json 详解
- corepack
- npm
- yarn
- pnpm
- yalc
- 库处理
- Babel
- 相关库
- 转译基础
- 插件
- AST
- Rollup
- 基础
- 插件
- Webpack
- 详解配置
- 实现 loader
- webpack 进阶
- plugin 用法
- 辅助工具
- 解答疑惑
- 开发工具集合
- 花样百出的打包工具
- 纷杂的构建系统
- monorepo
- 前端工作流
- 爬虫
- 测试篇
- 综合
- Jest
- playwright
- Puppeteer
- cypress
- webdriverIO
- TestCafe
- 其他
- 工程开发
- gulp篇
- Building With Gulp
- Sass篇
- PostCSS篇
- combo服务
- 编码规范检查
- 前端优化
- 优化策略
- 高性能HTML5
- 浏览器端性能
- 前后端分离篇
- 分离部署
- API 文档框架
- 项目开发环境
- 基于 JWT 的 Token 认证
- 扯皮时间
- 持续集成及后续服务
- 静态服务器搭建
- mock与调试
- browserslist
- Project Starter
- Docker
- 文档网站生成
- ddd