本文译自 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 现在是否足够稳定用于生产环境。不太确定,看看事情怎么发展吧,不过它值得关注!
领取专属 10元无门槛券
私享最新 技术干货