简单 babel plugin 开发-使用lerna 工具
babel在现在的web 应用开发上具有很重要的作用,帮助我们做了好多事情,同时又有
比较多的babel plugin 可以解决我们实际开发上的问题。
以下只是学习下如果编写一个简单的babel plugin,项目使用lerna 进行代码包管理
插件开发模型
项目准备
- lerna 项目初始化
lerna init
- 创建plugin package
lerna create MyFirstBabelPlugin
- 创建使用plugin 的package
lerna create PluginUsage
- 项目结构
├── README.md
├── lerna.json
├── package.json
└── packages
├── MyFirstBabelPlugin
│ ├── README.md
│ ├── lib
│ │ └── MyFirstBabelPlugin.js
│ └── package.json
└── PluginUsage
├── README.md
├── babel.config.js
├── lib
│ └── PluginUsage.js
├── package-lock.json
└── package.json
编写代码
- babel plugin 代码
packages/MyFirstBabelPlugin/lib/MyFirstBabelPlugin.js
// basic babel plugin
module.exports= function ({types: t}) {
return {
visitor: {
Identifier(path) {
let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
path.node.name = name.split('').reverse().join('');
}
}
};
}
- 调用plugin 的代码
主要是babel 配置文件的使用
packages/PluginUsage/babel.config.js
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];
const plugins = [
"module:myfirstbabelplugin"
]
module.exports = { presets,plugins };
- 调用plugin package package.json 配置
packages/PluginUsage/package.json
{
"name": "pluginusage",
"version": "1.0.0",
"description": "demo",
"author": "dalongrong <1141591465@qq.com>",
"homepage": "",
"license": "ISC",
"main": "lib/PluginUsage.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"publishConfig": {
"registry": "https://registry.npm.taobao.org"
},
"scripts": {
"build": "babel lib -d dist"
}
}
- 调用plugin package 添加依赖包
babel 以及自己编写的插件
babel 依赖
npm install @babel/core @babel/cli @babel/preset-env --save-dev
自己编写babel plugin 的添加(使用lerna)
cd packages/PluginUsage
lerna add myfirstbabelplugin
执行
为了方便添加了全局的npm script (lerna 项目根目录)
{
"name": "root",
"private": true,
"devDependencies": {
"lerna": "^3.8.0"
},
"scripts": {
"build":"lerna run build"
}
}
- 执行
lerna 项目根目录
yarn run v1.13.0
$ lerna run build
lerna notice cli v3.8.0
lerna info Executing command in 1 package: "npm run build"
lerna info run Ran npm script 'build' in 'pluginusage' in 1.1s:
> pluginusage@1.0.0 build /Users/dalong/mylearning/babel-plugin-demo/packages/PluginUsage
> babel lib -d dist
Successfully compiled 1 file with Babel.
lerna success run Ran npm script 'build' in 1 package in 1.1s:
lerna success - pluginusage
✨ Done in 1.94s.
- 效果
说明
代码很简单,只是学习下开发的流程,建议看看后边的几个参考资料,开发中一个方便的ast 查看工具 https://astexplorer.net/,可以帮助我们
更好的了解ast
参考资料
https://github.com/kentcdodds/babel-plugin-handbook/blob/master/README.md
https://github.com/rongfengliang/babel-plugin-demo
http://www.startupboost.io/posts/babel-plugin-css-in-js-example-learn
https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md
https://babeljs.io/docs/en/usage
https://astexplorer.net/
简单 babel plugin 开发-使用lerna 工具的更多相关文章
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- Navisworks API 简单二次开发 (自定义工具条)
在Navisworks软件运行的时候界面右侧有个工具条.比较方便.但是在二次开发的时候我不知道在Api那里调用.如果有网友知道请告诉我.谢谢. 我用就自己设置一个工具.界面比较丑!没有美工. 代码: ...
- [.net 面向对象程序设计进阶] (22) 团队开发利器(一)简单易用的代码管理工具VSS
[.net 面向对象程序设计进阶] (22) 团队开发利器(一)简单易用的代码管理工具VSS 本篇要点:在进阶篇快要结束的时候说说源代码管理器,我们的开发,不是一个人可以完成的事,团队协作很重要,而且 ...
- 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)
EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...
- MS CRM 2011的自定义和开发(11)——插件(plugin)开发(三)
http://www.cnblogs.com/StoneGarden/archive/2012/02/06/2340661.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- Xamarin+Prism开发详解七:Plugin开发与打包测试
有了上章[Xamarin+Prism开发详解六:DependencyService与IPlatformInitializer的关系]的基础,现在来理解Plugin开发就简单了. 本文实例代码地址:ht ...
- QCAD Plugin 开发
QCAD Plugin 开发 eryar@163.com Abstract. QCAD是基于GPL协议的开源CAD软件,核心功能基于Qt使用C++开发,界面及其交互使用Javascript脚本进行开发 ...
- babel plugin和presets是什么,怎么用?
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...
- ETH&EOS开发资源及工具集合(完整汇总版)
ETH&EOS开发资源及工具集合(完整汇总版) 3113 ETH开发资源篇 一.开发语言 · Solidity - 官方推荐以太坊智能合约开发语言,也是目前最为主流的智能合约语 ...
随机推荐
- Xcode清理存储空间
文章来自 枣泥布丁 http://www.cocoachina.com/ios/20170711/19814.html 请针对性的选择删除 移除 Xcode 运行安装 APP 产生的缓存文件(Deri ...
- 二十. Python基础(20)--面向对象的基础
二十. Python基础(20)--面向对象的基础 1 ● 类/对象/实例化 类:具有相同属性.和方法的一类人/事/物 对象(实例): 具体的某一个人/事/物 实例化: 用类创建对象的过程→类名(参数 ...
- fast-rcnn里的一些具体内容
NMS:Non-Maximum Suppression(非极大值抑制) 假设从一个图像中得到了2000个region proposals,通过在RCNN和SPP-net之后我们会得到2000*4096 ...
- Linux学习 : 移植qt 5.6.3 及 tslib 1.4
(一) 移植 qt5.6.3 一.qt简介: Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具 ...
- 完全卸载vs2013 2015
/uninstall /force 解压你的vs2013的安装包(iso格式). cd到解压后的文件夹 vs_ultimate.exe /uninstall /force 或者创建一个快捷方式到桌面 ...
- Java 利用poi生成excel表格
所需jar包,如下所示 写一个excel工具类 ExcelUtils .java import java.lang.reflect.Field; import java.util.Iterator; ...
- B2C B2B C2C O2O模式的介绍
b2c:天猫 商家对客户 c2c:淘宝 客户到客户(卖家也是阿里公司的客户) o2o:美团 线上花费,下 ...
- netty pipeline.addLast
pipeline有一个主要的实现类 DefaultChannelPipeline ,addLast顾名思义,就是在处理器链的最后添加一个channelHandler. 代码如下:@Override ...
- 设置table中的td一连串内容自动换行
遇到一长串字母撑出了td宽度,导致整个表格错乱,如图: , 解决办法: 第一: table 加上css: table-layout: fixed;(此css属性 表示 列宽由表格宽度和列宽度设定.不会 ...
- array_udiff_uassoc
PHP array_udiff_uassoc 函数 一.函数功能: 计算出第一个数组与其他数组的差集(考虑键名和键值,对键名和键值的比较都使用自定义函数).比较两到多个数组,找出第一个数组中不包含在其 ...