前端开辟小工具wakeup

2023年2月26日 231次阅读 来源: channg

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。

运用它，你只须要像最初的前端去编写代码

    原文作者：channg
    原文地址: https://segmentfault.com/a/1190000016268764
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞