黑马程序员技术交流社区

标题: 【广州前端】及时行乐 01 ‘零配置’的前端开发工具-parcel [打印本页]

作者: neekin 时间: 2018-1-25 21:22
标题: 【广州前端】及时行乐 01 ‘零配置’的前端开发工具-parcel
本帖最后由 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

如果安装失败建议使用cnpm

创建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

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2