Parcel,零配置开发 React 应用!

Parcel,零配置开发 React 应用!

寸志寸志
本文首发 qianduan.group译自 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 项目:

mkdir react-parcel
cd react-parcel
npm init 

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

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

npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-env
npm install --save-dev parcel-bundler 

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

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

创建 React App,就两个文件:

index.js:

import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

var mountNode = document.getElementById("app");
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>React starter app</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="index.js"></script>
    </body>
</html>

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

"scripts": {
  "start": "parcel index.html",
}, 

搞定,启动:

npm start 



访问 http://localhost:1234 就可以打开我们的 App 了。

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

Github 开源

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

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

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

「真诚赞赏,手留余香」
还没有人赞赏,快来当第一个赞赏的人吧!
文章被以下专栏收录
17 条评论