前端开发小工具wakeup

news/2024/2/29 2:21:56

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

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

当然,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。

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


https://www.jiucaihua.cn/news/show-2612431.html

相关文章

【一步步学OpenGL(36)】 -《延迟渲染(二)》

教程 36 延迟渲染(二) 原文: http://ogldev.atspace.co.uk/www/tutorial36/tutorial36.html CSDN完整版专栏: https://blog.csdn.net/cordova/article/category/9266966 理论介绍 上个教程我们学习了延迟渲染的基础原理,并从几何阶段第一个pass计算得到了G-buffer组合数…

python如何与以太坊交互并将区块链信息写入SQLite

关于区块链介绍性的研讨会通常以易于理解的点对点网络和银行分类账这类故事开头&#xff0c;然后直接跳到编写智能合约&#xff0c;这显得非常突兀。因此&#xff0c;想象自己走进丛林&#xff0c;想象以太坊区块链是一个你即将研究的奇怪生物。今天我们将观察该生物&#xff0…

windows下phpstrom使用git命令

1.首先在官网上下载gitbash 下载地址https://gitforwindows.org/ 2.然后安装 找到git的安装地址 将地址填到phpstorm的配置文件中 如下图 若使用过程中出现乱码&#xff0c;请查看&#xff1a;https://blog.csdn.net/resilient/article/details/103979448 执行 # suppo…

【一步步学Metal图形引擎1】-《绘制第一个三角形》

教程 1 绘制第一个三角形 教程源码下载地址&#xff1a; https://github.com/jiangxh1992/MetalTutorialDemos CSDN完整版专栏&#xff1a; https://blog.csdn.net/cordova/category_9734156.html 一、知识点 iOS平台图形框架结构可编程渲染管线Metal API着色器&#xff0…

windows下phpstudy使用php.1.13-nts+Nginx搭建TP5项目

1.首先安装好phpstudy 2.配置nginx文件nginx-conf nginx 重写 配置 if (!-e $request_filename) {rewrite ^(.*)$ /index.php?s/$1 last;break;} 配置文件如下nginx-conf # power by www.php.cn #user nobody; worker_processes 1;#error_log logs/error.log; #error…

01_Redis简述

一&#xff1a;关系型数据库和非关系型数据库的区别&#xff1a; 1&#xff1a;关系型数据库&#xff08;SQL&#xff09;&#xff1a;数据和数据之间&#xff0c;表和字段之间&#xff0c;表和表之间是存在关系的&#xff1b; 优点&#xff1a;数据之间有关系&#xff0c;进行…

【一步步学Metal图形引擎2】-《纹理贴图》

教程 2 纹理贴图 教程源码下载地址&#xff1a; https://github.com/jiangxh1992/MetalTutorialDemos CSDN完整版专栏&#xff1a; https://blog.csdn.net/cordova/category_9734156.html 一、关键词 UV坐标系MTLTextureMTKTextureLoader贴图加载Metal采样对象samplerFilt…

Java逆向基础之初识Byteman

Byteman的是由Jboss发明主要是为了支持多线程和多JVM测试的自动化。Byteman规则语言提供了一组标准的内置操作&#xff0c;这些操作支持特定的上述类别中的任务为了简化测试自动化&#xff0c;Byteman已经与两种流行的测试框架JUnit和TestNG集成在逆向中&#xff0c;我们也可以…

【WEB 工程化学习(1/3)】脚手架

介绍&#xff1a; WEB工程化学习的目标是让项目从"搭建-开发-部署"更加快速以及规范。文章中使用的相关技术栈是ReatJS和NodeJS. 首先&#xff0c;我们一起来了解什么是脚手架&#xff0c;所谓脚手架其实就是帮助我们快速搭建项目的工具&#xff0c;通常只需要跑一个…

TCP/IP协议(一)网络基础知识 网络七层协议

参考书籍为《图解tcp/ip》-第五版。这篇随笔&#xff0c;主要内容还是TCP/IP所必备的基础知识&#xff0c;包括计算机与网络发展的历史及标准化过程&#xff08;简述&#xff09;、OSI参考模型、网络概念的本质、网络构建的设备等 下面是协议层从底层至顶层的一个模型图&#x…