专栏首页编程Parcel,零配置开发 React 应用!

Parcel,零配置开发 React 应用!

本文译自 Create a React app with zero configuration using Parcel。

webpack 已经经历三四年的发展,社区和技术趋于成熟,它已经成为了前端开发中的必备工具。那问题来了,会有新的工具来挑战 webpack 的地位吗?各位不妨看看本文的 Parcel,说不定就是未来的主角。

一开始使用 React 的痛苦想必大家都经历过。在真正进入编码之前,需要花大量的时间搞清楚如何配置 webpack。

Create React App 项目的流行就是因为它简化了配置,加快了项目初始化的速度。俗话说,成也风云,败也风云。将 webpack 配置隐藏既是它的优点,也是它的缺点。随着项目不断地扩大,你可能想做一些高级配置,就需要将 webpack 配置从 Create React App “拖”(eject)出来,这段配置异常复杂,这就回到了老问题——webpack 还是得学习啊!

最近,一个新的构建工具 Parcel 出现了,它是零配置的!真的不敢相信有这么好的东西,看起来所有问题都将迎刃而解。

我在一个大项目中尝试使用 Parcel,效果拔群。build 出包经过优化,要知道用 webpack 的时候,我需要花数天时间来实现相同的优化。

我想这个工具潜力无限,我们一起来看看如何使用它来轻松搭建一个 React 应用。

使用 Parcel 开发 React 应用

首先,创建一个 NPM 项目:

会询问你一些问题,直接按 键使用默认值即可。

下一步安装 React、babel 和 Parcel 依赖:

接下来,创建 文件,告诉 parcel 我们使用 ES6 和 React JSX:

创建 React App,就两个文件:

index.js:

index.html:

现在,只需要在 添加一个启动脚本就可以把我们的应用跑起来了:

搞定,启动:

访问 就可以打开我们的 App 了。

目前 parcel 仅支持 node 8 或者以上版本。

Github 开源

在 Github 上 可以找到完整的代码。如果你觉得有帮助,欢迎 ★。

比起 webpack 一堆繁琐的配置,这个要简单多了!

Parcel 或许是 Create React App 一个不错的替代。你肯定关心 parcel 现在是否足够稳定用于生产环境。不太确定,看看事情怎么发展吧,不过它值得关注!

本文来自企鹅号 - 前端外刊评论媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 人工智能在医疗行业的6大最新进展

    [ 亿欧导读 ]1、赛诺菲巴斯德利用AI研发流感疫苗;2、两大计算机网络助力葛兰素史克研发新药;3、人工智能不到1秒就能诊断结直肠癌,准确率达86%;4、诊断乳...

    企鹅号小编
  • 重新带你了解React.js

    走进 前端学习 React.js,你了解吗? 在进入react.js的讲解之前吗,我们现在了解下2018年react.js的发展趋势吧。 React Nativ...

    企鹅号小编
  • React多页面应用1

    1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,...

    企鹅号小编
  • sentinel 集群流控原理

    为什么需要集群流控呢?假设需要将某个API的总qps限制在100,机器数可能为50,这时很自然的想到使用一个专门的server来统计总的调用量,其他实例与该se...

    luoxn28
  • 2018年react新款组件库,难道你还在用17年的?

    腾讯NEXT学位
  • React 中无用但可以装逼的知识

    最近看了Dan Abramov的一些博客,学到了一些React的一些有趣的知识。决定结合自己的理解总结下。这些内容可能对你实际开发并没有什么帮助,不过这可以让你...

    嘿嘿嘿
  • 【Linux环境下】绝对要掌握的创建/查看指令

    mkdir mkdir [-p] A/B/C 递归创建(带父目录) mkdir A 在当前路径下创建的A文件夹 tree:以目录树的方式显示文件夹结构 cat...

    吴柯
  • 机器人真空夹具改用人造肌肉?

    据外媒报道,在工厂中使用的机器人通常配备真空夹具,用于夹住平面物体。通常,这些夹具由压缩空气提供动力,但这具有一些缺点。然而,现在科学家已经开发出一种使用人造肌...

    机器人网
  • ng6中,在HTTP拦截器里,异步请求数据,之后再返回拦截器继续执行用户请求的方法研究

          我现在项目就是利用拦截器,在请求头里增加:'Authorization': this.storage.token 的请求头。

    申君健
  • 微信小程序调用接口获取登录获取用户信息

    沈唁

扫码关注云+社区

领取腾讯云代金券