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 initnpm 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：
importReactfrom"react";importReactDOMfrom"react-dom";classHelloMessageextendsReact.Component{render(){return<div>Hello{this.props.name}</div>;}}varmountNode=document.getElementById("app");ReactDOM.render(<HelloMessagename="Jane"/>,mountNode);index.html：
<!DOCTYPE html><html><head><title>React starter app</title></head><body><divid="app"></div><scriptsrc="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 現在是否足夠穩定用於生產環境。不太確定，看看事情怎麼發展吧，不過它值得關注！
