Parcel - 极速零配置Web应用打包工具

fireflow 发布于2019-08-21 18:24 / 3534人阅读

摘要：极速零配置应用打包工具的优势极速打包时间使用进程去启用多核编译。的缺点缺乏插件新出的打包工具，还在成长当中，插件的数量和这种成熟的工具是无法相比的。不太适合大项目毕竟配置，无需过多的配置即可使用。

开发项目或者写 demo 的时候，还在为 webpack 的配置而烦恼？还在编写臃肿的 gulpfile.js？也许你需要 Parcel 来拯救你的时间。

Parcel - 极速零配置Web应用打包工具

Parcel 的优势：

极速打包时间

Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。

将你所有的资源打包

Parcel 具备开箱即用的对 JS, CSS, HTML, 文件及更多的支持，而且不需要插件。

自动转换

如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

零配置代码分拆

使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆，因此你只需要在初次加载时加载你所需要的代码。

热模块替换

Parcel 无需配置，在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

友好的错误日志

当遇到错误时，Parcel 会输出语法高亮的代码片段，帮助你定位问题。

Parcel 的缺点：

缺乏插件

新出的打包工具，还在成长当中，插件的数量和 webpack, gulp 这种成熟的工具是无法相比的。

不太适合大项目

毕竟 0 配置，无需过多的配置即可使用。但是，若项目有复杂的文件处理，也许花点时间在配置上面更能提高效率。

使用 Parcel 开发

安装 Parcel

$    npm install parcel-bundler --global

新建项目

$    mkdir parcel-demo
$    cd parcel-demo
$    npm init -y

处理 js 文件

一般情况下，都是使用 es6 开发，然后使用 babel 编译成浏览器能运行的 js 代码，这时需要安装 babel 的插件。

$    yarn add babel-preset-env --dev
#    如果需要编译其他版本的请自行安装。

新建 babel 的配置文件 .babelrc ，这里只展示最基础的配置：

{
  "presets": [
    "env"
  ],
  "plugins": []
}

处理 css 文件

在 Parcel 中，使用 postcss 去处理各种各样的 css 和 scss 文件：

$    yarn add postcss autoprefixer node-sass --dev

新建 postcss 配置文件 .postcssrc :

{
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

autoprefixer 的浏览器兼容性配置文件 .browserlistrc ，具体的配置可以到这里查看。

> 1%
last 2 versions
iOS 8

处理 html 文件

~~暂无，正在寻找能将小图片转换为 base64 Parcel 插件~~

开发环境

如果需要监听文件并启动一个 HRM 服务器的话，请使用 parcel xxx.html

如果只需要监听并编译某个文件的话，请使用 parcel watch xxx.html, 该命令不会启动热更新服务器，当时会监听文件的变化。

打包代码

$    parcel build entry.js -d output_dir --public-url public_dir

entry.js 为打包的入口文件，可以是 HTML 文件。

--out-dir / -d 为设定打包后文件存放的路径，默认为 ./dist

--public-url 为设定打包后的引入文件的路径，默认为 /dist/。若为 ./ 则打包后所有的文件都应放置在同一个目录下；若为 custom_dir 则打包后，除了入口 html 文件，其余文件应当放置在 custorm_dir 目录下。建议设置为绝对路径，此处有多文件资源引入的坑，已提交 issue。

Enjoy Coding with zero configurations.

附上一个简易的 Parcel 项目架构，GitHub 。拉下即可开始开发。

GPU云服务器云服务器开发工具浏览器web应用 java web应用多台服务器配置打包工具 python打包工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90436.html

Parcel上手——又一个打包工具

摘要：是什么极速零配置应用打包工具说到打包工具，大多人应该都用过，也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下，修改文件内容并不会实时更改页面效果，内部引入时无此问题。 Parcel是什么？极速零配置Web应用打包工具说到打包工具，大多人应该都用过Webpack，Parcel也是这一类工具。 Parcel相比Webpack有什么优势？配...

Dr_Noooo 2019-08-01 18:25 评论0 收藏0
Parcel上手——又一个打包工具

摘要：是什么极速零配置应用打包工具说到打包工具，大多人应该都用过，也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下，修改文件内容并不会实时更改页面效果，内部引入时无此问题。 Parcel是什么？极速零配置Web应用打包工具说到打包工具，大多人应该都用过Webpack，Parcel也是这一类工具。 Parcel相比Webpack有什么优势？配...

cyqian 2019-08-22 13:56 评论0 收藏0
Parcel上手——又一个打包工具

摘要：是什么极速零配置应用打包工具说到打包工具，大多人应该都用过，也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下，修改文件内容并不会实时更改页面效果，内部引入时无此问题。 Parcel是什么？极速零配置Web应用打包工具说到打包工具，大多人应该都用过Webpack，Parcel也是这一类工具。 Parcel相比Webpack有什么优势？配...

printempw 2019-08-29 14:17 评论0 收藏0
深入 Parcel--架构与流程篇

摘要：本篇文章是对的源码解析，代码基本架构与执行流程，带你了解打包工具的内部原理，在这之前你如果对不熟悉可以先到官网了解介绍下面是偷懒从官网抄下来的介绍极速零配置应用打包工具极速打包使用进程去启用多核编译。 showImg(https://segmentfault.com/img/bVbpZRp?w=1241&h=893); 本篇文章是对 Parce 的源码解析，代码基本架构与执行流程，带你...

yuxue 2019-08-23 16:00 评论0 收藏0
一篇文章学会 TypeScript

摘要：接下来来看一段代码示例语法与语言比较当类型不对的时候，会提示错误编译后语法联想大致可以把它看成是加了类型系统的。一篇文章学会 TypeScript （内部分享标题：TypeScript 基础）这篇文章是我在公司前端小组内部的演讲分享稿，目的是教会大家使用 TypeScript，这篇文章虽然标着基础，但我指的基础是学完后就能够胜任 TypeScript 的开发工作。从我分享完的效果来...

itvincent 2019-08-23 17:54 评论0 收藏0