Parcel，零配置開發 React 應用！

02-02

本文首發 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-parcelncd react-parcelnnpm init n

npm init 會詢問你一些問題，直接按 enter 鍵使用默認值即可。

下一步安裝 React、babel 和 Parcel 依賴：

npm install --save reactnnpm install --save react-domnnpm install --save-dev babel-preset-reactnnpm install --save-dev babel-preset-envnnpm install --save-dev parcel-bundler n

接下來，創建 .babelrc 文件，告訴 parcel 我們使用 ES6 和 React JSX：

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

創建 React App，就兩個文件：

index.js：

import React from "react";nimport ReactDOM from "react-dom";nnclass HelloMessage extends React.Component {n render() {n return <div>Hello {this.props.name}</div>;n }n}nnvar mountNode = document.getElementById("app");nReactDOM.render(<HelloMessage name="Jane" />, mountNode);n

index.html：

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

現在，只需要在 package.json 添加一個啟動腳本就可以把我們的應用跑起來了：

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

搞定，啟動：

npm start n

訪問 http://localhost:1234 就可以打開我們的 App 了。

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

Github 開源

在 Github 上可以找到完整的代碼。如果你覺得有幫助，歡迎。

比起 webpack 一堆繁瑣的配置，這個要簡單多了！

Parcel 或許是 Create React App 一個不錯的替代。你肯定關心 parcel 現在是否足夠穩定用於生產環境。不太確定，看看事情怎麼發展吧，不過它值得關注！