美文网首页程序员我爱编程
Parcel,一个很方便的打包工具

Parcel,一个很方便的打包工具

作者: flow__啊 | 来源:发表于2018-03-13 14:17 被阅读137次

    先说一下我对打包的浅显理解,主要是为了减少前端中的网络请求,减少css的互相引用,减少js的互相引用,减少html的互相引用,将文件变得尽可能的数量少。次要的,也方便了我们开发时不用每一个页面都写相同的<link>、<script>,比如需要jq时。

    webpack,呃,不说了吧,太TM烦了。

    Parcel,一个适合人类使用的打包工具

    但是目前(2018-3-11)还不能很方便的建立一个vue项目,我们还是可以用它方便的学习less,sass,typescript等技术,而且没有那么多的配置。

    能有多方便?以less为例。

    1 先安装parcel:
    Yarn:
    yarn global add parcel-bundler
    npm:
    npm install -g parcel-bundler
    2 初始化,得要有个package文件吧
    yarn init -y or npm init -y
    3 建两个文件。
    main.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/1.less">
    </head>
    <body>
        <div id="test1">
            大家好,我是渣渣辉
        </div>
    </body>
    </html>
    

    1.less

    @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    #test1 {
      color: @light-blue;
    }
    

    然后只要输入命令:parcel main.html 就。。。。结束啦!!!!这期间我没有安装任何的依赖,全自动的。
    亮点是这货还自己带了一个http的服务器,它会帮你的项目搞到http://localhost:1234上去,而且你保存了文件,它会自动帮你更新http://localhost:1234里的内容,美滋滋。

    其它

    js的使用,支持require/ES6。支持Babel,PostCSS,PostHTML。
    更详细内容-> 伪中文官网

    相关文章

      网友评论

        本文标题:Parcel,一个很方便的打包工具

        本文链接:https://www.haomeiwen.com/subject/etpaxxtx.html