parcel 中小型项目打包工具

“0配置”打包器(bundler)Parcel

Parcel官网(有中文文档)

webpack 要有大量的配置,这样带来的成本就是复杂性——与此相对的,Parcel 带来了简洁性。Parcel 将自己标榜为“零配置”。

Parcel 内置了一个开发服务器,这个开发服务器能够在我们修改文件之时自动重新构建应用,为了加快开发,它还支持模块热替换。

Parcel 内置支持 JS、CSS、HTML、文件资产等等,这不需要插件,对用户会更加友好;

零配置,内置了 code splitting、热模块加载、CSS 预处理、开发服务器、缓存等等;

Parcel 有更加用户友好的错误日志。

不同场景适用打包器

Parcel:小型到中型规模的项目(代码行小于 15k);

Webpack:大型以及企业级规模的项目;

Rollup:用于 NPM 包。

Parcel简单使用

Parcel 的安装非常简单直接。

npm install parcel-bundler --save-dev

Parcel的入口可以是html或者js文件

dev方式

parcel index.html

parcel的hmr(热替换)也是很快的。

当然我们可以在package.json文件里配置命令:

就可以使用npm run start构建了。

build方式

parcel build index.js

也可以加参数指定构建路径:

parcel build index.js -d build/output

package.json文件里配置后可以使用npm run build命令打包。

集成开发环境

scss

npm i node-sass

执行命令后在js里import进scss文件,这就可以使用啦。

React+babel

npm install --save react react-dom babel-preset-env babel-preset-react

执行后创建.bablerc文件,内容如下:

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

这样就可以写React啦:

index.js

index.html

<div id="root"></div>
<script src="./index.js"></script>
vue+babel

npm i --save vue parcel-plugin-vue babel-preset-env

执行后创建.bablerc文件,内容如下:

{
  "presets": ["env"]
}

index.js

app.vue

index.html

<div id="vue-app"></div>
<script src="./index.js"></script>

注意:

如果你是使用的全局安装的parcel-bundler,可能在构建vue项目时出现上面的错误

问题很明确,找不到该模块,只需要执行npm i --save parcel-bundler在项目里安装后再parcel index.html就好了。

所以开头的vue相关包安装命令可以为npm i --save vue parcel-plugin-vue parcel-bundler babel-preset-env

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Win10 安装 Linux子系统 Ubuntu18.04 / Kali Linux 的体验

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#linux

1106
来自专栏李蔚蓬的专栏

VS历程简单记录

其实也不用重装,本机用的Win10,去控制面板找到VS,双击它,进入“安装程序”,有修改/修复/卸载三个按钮,点击修复就可以了(嗯窗口类似长这样):

542
来自专栏魏艾斯博客www.vpsss.net

Windows VPS 服务器一键 phpStudy 安装环境搭建教程

3352
来自专栏乐百川的学习频道

在计算机中安装Manjaro

前几天我为了尝鲜在电脑中安装了大蜥蜴(OpenSuse),新鲜期过了之后我准备换回原来的ArchLinux,结果发现大蜥蜴把原来的Grub设置覆盖了。如果要恢复...

5298
来自专栏繁花云

Apache默认编码修改

但是PHP文件一运行就闷逼了,显示出来的文字都是乱码,但是源码那么多,一个个改是不可能了。

630
来自专栏逸鹏说道

Win10 安装 Linux子系统 Ubuntu18.04 / Kali Linux 的体验

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#linux

2506
来自专栏逆向与安全

海海DRM视频保护解密流程分析

点击“支付并获取许可证”成功后就可以播放加密的视频了,并在安装包目录下生成了两个重要的文件,indiv3.key与V3.lic

760
来自专栏彭湖湾的编程世界

【npm】如何在Atom中安装emmet和atom-beautify插件?

为了提高编写HTML和CSS的速度,最近尝试着在Atom中安装emmet插件,下面谈谈安装成功的过程 1首先我尝试了网上教程中介绍最多的方法:打开Atom的引导...

2055
来自专栏FreeBuf

偏执的iOS逆向研究员:收集全版本的macOS iOS+越狱+内核调试

Intro 虽然“只有偏执狂才能够生存”这句话已经被假药停给毁了,但是作为一只有逼格的高大上的iOS逆向分析研究员,难道如果有现成的macOS/iOS全版本镜像...

3447
来自专栏逸鹏说道

关于Ubuntu18.04谷歌浏览器经常卡死的解决

老电脑本来用的是Win系列,后来改成Linux后就不卡了,这几天同Notebook运行的Script开始复杂了,Ubuntu经常卡死(发公众号也经常卡死),本来...

1955

扫码关注云+社区