“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

parcel 中小型项目打包工具的更多相关文章

  1. Java项目打包工具安装失败解决方法

    在学习Java的时候我们打包项目但遇到例如以下情况:(提示没有找到java的执行环境! ) 网上眼下有两中的解决方式: (1)选择本地jdk环境; (2)下载Download 可是第一种选择本地老是失 ...

  2. 前端项目打包工具weexpack的安装

    最下面是本人安装时候的系统环境,本篇文章只限于参考,不一定非得是这样,原因你懂得. 打包的过程中出现的问题 1.执行到weexpack run android的时候,到了resolving class ...

  3. parcel (另一个打包工具)知识点

    ParcelJS 本身是 0 配置的,但 HTML.JS 和 CSS 分别是通过 posthtml.babel 和 postcss 处理的,所以我们得分别配 .posthtmlrc..babelrc ...

  4. 制作VB项目打包工具与安装程序

    该原因起于错误429. 当然比起自制我更推荐使用其他的功能完整的打包软件. 犹豫各种原因,导致三分钟热情被浇灭...本来想划四个部分详细讲教程的,大家看成品源码就好了,心好累. http://www. ...

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

    当听到极速零配置打包,我不经兴奋起来,零配置!!!想起在webpack打包的配置,这个零配置着实让我好奇不已,迅速学习一波. Parcel(parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl])有以 ...

  6. 原创全新打包工具Parcel零配置VueJS开发脚手架

    parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/p... 初 ...

  7. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  8. 详解Parcel:快速,零配置web应用打包工具。

    译者按: 新一代Web应用打包工具Parcel横空出世,快速.零配置的特点让人眼前一亮. 原文: Everything You Need To Know About Parcel: The Blazi ...

  9. 项目前端打包工具从 NEJ 切换成 webpack

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...

随机推荐

  1. 使用docker方式安装etcd集群,带TLS证书

    网上文档也多,安装的时候,还是踩了几个坑. 现在作一个安装记录吧. 1,先作自签名的证书ca-csr.json(为了和k8s共用根证书,可能将信息调为k8s). { "CN": & ...

  2. python的学习和使用

    1.python的官网:https://www.python.org/ Python简介: .Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. .Python 的设计具有 ...

  3. WPF多屏最大化

    如果计算机存在多个显示器,这时设置wpf窗口为最大化,窗口只能在主显示器中实现最大化,如果想要实现窗口拉伸至多屏,需要获取所有显示器分辨率之和.这时用到了System.Windows.SystemPa ...

  4. 【UOJ244】【UER #7】短路

    题解: 感觉贪心水平有所提高.. 首先比较显然的事情是我们可以枚举最深进行到哪一层 我们会发现,当且仅当该层是最小值才会使用决策, 并且是从该层的左上,走到右下 另外中间步骤就是(好难描述啊)一个单调 ...

  5. 【Android】Android 代码判断是否获取ROOT权限(一)

    [Android]Android 代码判断是否获取ROOT权限 方法比较简单,直接粘贴代码 public synchronized boolean getRootAhth() { Process pr ...

  6. zabbix_agent YUM源配置

    wget http://repo.zabbix.com/zabbix/3.0/rhel/5/x86_64/zabbix-release-3.0-1.el5.noarch.rpm rpm -ivh za ...

  7. Python 经典类和新式类

    #!/usr/bin/env python# -*- coding:utf-8 -*-# 作者:Presley# 邮箱:1209989516@qq.com# 时间:2018-10-21# 新式类和经典 ...

  8. ubuntu镜像下载地址

    下载地址: http://mirror.pnl.gov/releases/xenial/ Ubuntu 14.04.5 LTS (Trusty Tahr)http://releases.ubuntu. ...

  9. 011 pandas的常见操作

    一:对索引进行操作 1.reindex重新索引 pandas提供了一个方法来创建一个适应新索引的新对象. Series通过调用reindex方法会根据新的索引顺序重新排序,如果新的索引中存在原索引不存 ...

  10. 002 如何在一台PC上装两个版本的python

    在之前学习爬虫的时候,使用的是python2.7,现在主流已经是3.7了. 在这里,写了一下如何在2.7的基础上安装python3.6 一:检查python版本 1.cmd 二:安装python3 1 ...