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 条评论
登录 后参与评论

相关文章

来自专栏jiajia_deng

RESTful API 调试工具 insomnia

1565
来自专栏青玉伏案

JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎

上篇博客我们聊了《JavaEE开发之SpringBoot工程的创建、运行与配置》,从上篇博客的内容我们不难看出SpringBoot的便捷。本篇博客我们继续在上篇...

2255
来自专栏一“技”之长

使用Jenkins配置iOS自动化构建工具 原

      关于iOS自动化构建其实并不复杂,通过一些简单的Git与Xcode指令,加上UI,我们自己也可以动手编写一款自动化构建工具。这在之前的博客中也有涉及...

751
来自专栏Petrichor的专栏

pycharm: 配置远程repo

842
来自专栏salesforce零基础学习

salesforce 零基础学习(二十九)Record Types简单介绍

在项目中我们可能会遇见这种情况,不同的Profile拥有不同的页面,页面中的PickList标签可能显示不同的值。这个时候,使用Record Types可以很便...

1936
来自专栏屈定‘s Blog

Alfred插件开发--了解Alfred的数据流动

最近发现要记住的长命令太多了,因此打算开发一款Alfred插件帮助自己记录. 先展示下成品,大概就是输入关键词->搜索展示->复制到指定位置这一流程,借此开分析...

1363
来自专栏Java帮帮-微信公众号-技术文章全总结

springboot入门(4)_web开发

springboot入门(4)_web开发 摘要: 前几篇大概介绍了demo的搭建运行,Thymeleaf模板引擎的整合还有运行原理(主要是自动默认配置star...

4399
来自专栏Java技术

使用Generic Webhook Trigger插件实现Jenkins+WebHooks(码云)持续集成

我们在开发的时候,特别是前后端分离的时候,前端需要我们后端提供的API接口,可能需要每次有一个接口的变动都需要重新部署到dev环境上,例如:最常见的Git工作流...

1963
来自专栏jiajia_deng

RESTful API 调试工具 insomnia

1205
来自专栏咖啡的代码人生

IntelliJ IDEA 使用JSTL标签库(IDEA 加载 tld文件)

这两天在 IntelliJ IDEA 中 使用 C标签(JSTL)的时候发现引入进来有问题,不但没提示而且还有红色警告,所以经过一番谷歌的查找之后解决了这个问...

5054

扫码关注云+社区