本帖最后由 neekin 于 2018-1-25 21:41 编辑
2017年末，出现了一款名叫parcel的打包工具，短短时间就在github上吸粉无数。与webpack相比，无需繁琐的配置以及轻量化是它的优点，大大的简化了使用web应用的工具的难度。
parcel的一些特性：
1. 相比webpack gulp,打包时间极快极短
2.parcel对html和js、css以及其他一些assets文件是开箱即用，不需要额外的插件
3.零配置，Parcel内置支持代码拆分，热模块重新加载（hmr），CSS预处理器，开发服务器，缓存等在web打包上用到的功能。
安装parcel
使用npm安装
npm install -g parcel-bundler
简单的测试一下
创建一个文件夹 里面包含有index.html和index.js两个文件
index.html内容为
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Parcel示例</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
index.js的内容为
[JavaScript] 纯文本查看 复制代码 document.write("Parcel示例");
执行parcel,运行开发服务器
[Shell] 纯文本查看 复制代码 $ parcel index.html
Server running at http://localhost:1234
∞ Building...
∞ Building index.html...
∞ Building index.js...
√ Built in 6.43s.
开发服务器的默认端口为1234，打开浏览器输出 http://localhost:1234/即可访问。 指定开发服务器的端口 [Shell] 纯文本查看 复制代码 parcle index.html -p 8888 parcel的开发服务器是内置支持热模块替换，至此不需要做任何配置。 parcel可以接受任何类型的文件作为入口文件，但推荐使用html或js文件。 集成SCSS安装node-sass [Shell] 纯文本查看 复制代码 npm install node-sass
创建style.scss文件，内容如下 [Sass] 纯文本查看 复制代码 body{
background: blue;
color: white;
}在index.js导入style.scss [JavaScript] 纯文本查看 复制代码 import './style.scss'
document.write("Parcel示例")Parcel会自动把scss转换为对应的css，也无需任何配置。 Parcel产品构建使用build命令构建产品 [Shell] 纯文本查看 复制代码 parcel build index.js
使用parcel的默认构建产品，parcel会帮我们做了这几件事： - 关闭监听模式
- 关闭热模块替换（hmr）
- 开启 minifier 来减少输出包文件的大小，其中Parcel 使用的压缩的工具有JavaScript 的uglify-es，CSS 的 cssnano以及HTML 的 htmlnano
指定输出目录 parcel build index.js -d build/output设置public url parcel build index.js --public-url /myassets/构建的访问url为： 禁用压缩 parcel build index.js --no-minify禁用文件系统缓存 parcel build index.js --no-cache
| 
收藏
淘帖
踩
