✨ 酷炫升级 ✨
最牛逼的 Babel 插件
这个插件灵感主要来自 @justin.makes.things 在 Instagram 上的一个短视频:https://www.instagram.com/reel/Cwn5KYtIWDm/
我看完后震惊了。我觉得这个创意很独特,所以我说"好啊"然后开始大展身手。懂的人都懂。
这是我在 Instagram 上的模仿视频:https://www.instagram.com/reel/Cxvwz76vBus/
或者,看看我的 YouTube 短视频 #点赞并订阅
它是做什么的?
它将网络俚语转换成有效的 JavaScript 代码。
这是一个有趣的项目,可以提高我对抽象语法树的掌握。我现在是 Babel 的忠实粉丝了 👉👈
如何使用
- 安装
npm install babel-plugin-glowup-vibes --save
- 设置 babel 并将
babel-plugin-glowup-vibes
添加到你的插件列表中 - 开始大展身手。使用 选项 中列出的选项。运行你的构建命令应该会是一个重大胜利。在你设置的输出位置寻找强大的 JavaScript 效果(在我们下面的例子中,它会在
lib/compiled.js
中)
如果你需要更详细的说明:
要设置 babel,创建一个 babel.config.json
文件并添加以下内容:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
],
"plugins": ["babel-plugin-glowup-vibes"]
}
在你的 package.json
文件中添加类似这样的内容:
"scripts": {
"build": "babel ./src/script.js --out-file ./lib/compiled.js"
},
注意:这是使用 Babel 7 设计的,我没有在其他版本上测试过。我不能保证这完全没有问题。
选项
你的代码 | JS |
---|---|
noCap | true |
cap | false |
onGod | true |
lowkey.stan("消息") | console.log("消息") |
lowkey.sus("消息") | console.warn("消息") |
lowkey.crowed("消息") | console.debug("消息") |
lowkey.cringe("消息") | console.error("消息") |
lowkey.tea("消息") | console.info("消息") |
throw new L("消息") | throw new Error("消息") |
yeet(new L("消息")) | throw new Error("消息") |
ghosted | return null |
drop(要返回的东西) | return 要返回的东西; |
itsGiving(要返回的东西) | return 要返回的东西; |
PERIODT | break |
period | break |
skrt | break |
holdUp(非常酷的函数) | async function 非常酷的函数() |
letItCook(要等待的东西) | await 要等待的东西 |
grab("stash") | require("stash") |
module.ship = vibe | module.exports = vibe |
fr(断言) | assert(断言) |
outOfPocket | Infinity |
"BLAT".based() | "BLAT".toLowerCase() |
"blat".goated() | "blat".toUpperCase() |
dis | this |
clapback(1) | yield 1 |
finna("消息") | confirm("消息") |
document.vibeOnEvent(事件, 函数, 选项); | document.addEventListener(事件, 函数, 选项); |
highkey("消息") | alert("消息") |
Bet | Promise |
chill(参数) | setTimeout(参数) |
贡献
如果你能想到让这个插件变得更酷的方法,我欢迎你提交 PR。
如果你做以下这些事情,你的 PR 会更快被合并:
- 更新 README 中的表格
- 在 example.js 中提供一个例子
- 通过运行
npm run build
并检查compiled.js
来测试你的工作是否按你的预期运行 - 通过运行
npm run test
来格式化你的代码 - 如果你写了测试,那就更好了
如果你想贡献,但不知道从哪里开始,那太好了!观看这个 YouTube 视频来了解更多关于 Babel 插件的信息:https://www.youtube.com/watch?v=aK6n0pYcOe8
AST 探索器也是一个学习 AST 和测试一些想法的好工具。https://astexplorer.net/
这在(插入编程语言)中存在吗?
有一个 C++ 版本!https://twitter.com/lauriewired/status/1684329735399313409
@renancaraujo 创建了一个 Dart 版本:https://pub.dev/packages/glowup_vibes
@chelseas 创建了一个 Julia 版本:https://github.com/chelseas/GlowupVibes.jl
除此之外,答案可能是否定的。但你应该创建一个!
值得一提的是:Thy Script,1500 年代版本 https://github.com/dlustre/babel-plugin-thy-script
许可证
你可以根据 MIT 许可证自由使用这个插件。
版权所有 (c) 2023,Christina Martinez
特此免费授予任何获得本软件及相关文档文件("软件")副本的人不受限制地处理本软件的权利,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利,并允许向其提供软件的人这样做,但须符合以下条件:
上述版权声明和本许可声明应包含在软件的所有副本或大部分内容中。
本软件按"原样"提供,不提供任何明示或暗示的保证,包括但不限于适销性、特定用途适用性和非侵权性的保证。在任何情况下,作者或版权持有人均不对任何索赔、损害或其他责任负责,无论是在合同诉讼、侵权行为还是其他方面,由软件或软件的使用或其他交易引起的或与之相关的。