脚本宝典收集整理的这篇文章主要介绍了Parcel - 极速零配置Web应用打包工具,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
开发项目或者写 demo 的时候,还在为 webpack 的配置而烦恼?还在编写臃肿的 gulpfile.js?也许你需要 Parcel 来拯救你的时间。
Parcel - 极速零配置Web应用打包工具
Parcel 的优势:
- 极速打包时间
Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。
- 将你所有的资源打包
- 自动转换
- 零配置代码分拆
使用动态 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 - 极速零配置Web应用打包工具全部内容,希望文章能够帮你解决Parcel - 极速零配置Web应用打包工具所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。