先说一下我对打包的浅显理解,主要是为了减少前端中的网络请求,减少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。
更详细内容-> 伪中文官网
网友评论