parcel 是一个打包工具，号称是 0 配置
这里用它去自动打包 typescript 和 scss 做一个小 demo
会有三个文件，index.html， 1.scss, 1.ts
html 里面会引用这另外的两个文件
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./1.scss">
<script src="1.ts"></script>
<title>scss</title>
</head>
<body>
<h1>dhsfhdzashfoi<span>dhfauw</span>
<div>dbnfu</div>
</h1>
<div class="demo">dasnjhhf</div>
</body>
</html>
scss 文件里面分别使用了 scss 的变量，mixin，和extend 功能
代码如下
$r: red;
@mixin border($border-color: green) {
background-color: $border-color;
}
%box {
box-shadow: 0 0 6px * 3 #020202;
}
h1 {
color: $r;
@include border();
span {
color: green;
@extend %box;
@include border(gray);
}
> div {
border: 1px solid $r;
@extend %box;
@include border(rgb(117, 117, 145));
}
}
.demo {
@extend %box;
}
ts 文件里面则简单很多，只有几行代码，毕竟我也不怎么会(hhh
代码如下
const aaa = (a: string) => {
return a + ' ' + a
}
console.log(aaa('parcel'))
三个文件都写好之后，开始搞 parcel
首先你需要有 node 和npm （废话
其次你需要配置 npm 的淘宝源（不知道怎么配置去搜这句话就好了
然后抄这个命令
npm i -g parcel
这句话是全局下载一个 parcel，这样你在任何一个工程里面都可以用 parcel 了
然后在命令行进入到当前目录
运行命令
parcel index.html
然后等好久，因为它需要自己去下载一些东西，比如解析 scss 的工具，解析 ts 的工具
如果 node-sass 安装失败，复制失败的提示去问搜索引擎，你会发现你不是一个人
很多人都安装失败了
没关系
那些人会给你解决方案的
image.png
当你看到这句话的时候，你已经成功了
你可以通过他给你的 url 去预览项目
dist 目录下是它生成的文件
果然是 0 配置 hhhh
最后 代码链接如下
https://github.com/xianjiezh/parcel-demo
官网文档如下
这是中文的，简直太友好了
网友评论