前端开发小工具wakeup
发布于 1 年前 作者 channg 681 次浏览 来自 分享

https://github.com/channg/wakeup

wakeup是我最近开发的一个小工具,目的是为了让我们更快捷的使用需要编译的代码。

当我们编写了一个html

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>Title</title> </head> <body> <script src=“index.js”></script> </body> </html>

如果不经过编译,那么我们在index.js只能使用浏览器支持的语法去编写代码。

但是有了wakeup我们可以编写任何代码在index.js,比如说引用一个nodejs库等等

import moment from 'moment’ export defalut { mm:moment }

只要安装wakeup,接着运行wakeup watch,wakeup 会帮助你自动编译index.js并开启一个服务,承载这个html

你不用配置,就得到了一个拥有babel,commonjs,esm的环境。

当然,wakeup还支持对stylesheet的支持

<head> <meta charset=“UTF-8”> <title>Title</title> <link rel=“stylesheet” href=“wake.css”> <link rel=“stylesheet” href=“wake1.less”> <link rel=“stylesheet” href=“wake2.styl”> <link rel=“stylesheet” href=“wake3.sass”> </head>

你只需要像曾经写css一样的方式引用这些stylesheet文件,设置可以直接引用less,sass,styl

当然,这些依然不需要配置,但是可能需要在你的本地install less,sass,styl的node module。

script 也可以直接引用其他后缀的文件,包括.ts,.vue

<script src=“index.ts”></script> <script src=“index2.vue”></script> <script src=“index3.js”></script>

而且这些文件默认会已umd的形式导出。当然这些还是不需要任何配置

有时候我们只是想简单的试一试这些小组件,并不想构建一个特别庞大的webpack配置。因为这个初衷,我才编写了wakeup。

使用它,你只需要像最初的前端去编写代码

1 回复

有点类似parcel

回到顶部