使用Parcel零配置建立React應用（譯）

時間 2019-11-17

原文原文鏈接

最近常常在一些大牛博客裏看他們提到 Parcel，下意識關注一波，Parcel 官網介紹比較簡單，官網裏看到一篇入門博客，遂譯之。html

咱們都經歷過建立 React 項目時的痛苦，在可以正式編碼以前須要花費數個小時去配置 Webpack。node

Create React App 開源項目讓建立 React 項目變得更加容易和快速，但問題是 create react app將大量的 webpack 配置本身完成了。當項目變得愈來愈大須要使用一些高級特性時，又須要拋棄 create react app 而後去一步一步手動配置 webpack。而後又回到了學習 webapck 的問題上。react

最近一款新的打包工具誕生了 —— Parcel —— 號稱零配置的打包工具。這聽起來太過於美好而讓人不敢相信，由於若是真的這樣的話，它幾乎解決了開發中的大多數問題。webpack

我在一個很大的代碼庫中測試過，它果真開箱即用！它甚至給我打包了一個及其優化的包，而要打出一樣優化的包使用 webpack 要花費我數天時間。git

我認爲它很酷而且頗有潛力，讓咱們從頭開始建立一個 React 應用。github

使用 Parcel 建立 React 應用

第一步：建立一個 npm 項目。web

mkdir react-parcel
cd react-parcel
npm init

npm init 會問你一連串問題，所有按回車鍵跳過設置默認選項便可。npm

第二步：添加 React、Babel 和 Parcel 的依賴。json

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 項目，它僅僅包含兩個文件。

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 中添加 script 腳本，用於啓動咱們的應用。

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

第六步：啓動應用

npm start

確保你的 node 版本大於等於 8.0.0，以後能夠在瀏覽器中輸入 http://localhost:1234 看到應用的內容。

思考

比較了一下，用 parcel 建立 react 應用和用 webpack 建立 react 應用，parcel 不是通常的簡單。

Parcel 在建立 React 項目上看起來是個不錯的選擇，可是它是否適合於大型應用的生成打包？這個如今還不肯定，咱們必須瞭解事物是如何發展的，惟一能夠確定的是：接下來將會頗有趣!

動手試一試！

Parcel 很好！可是不要只相信個人片面之詞，動手試一試吧，親自感覺一下它帶給你的魅力!

（譯文完）

**談下感覺：**小 demo 跑了一遍，過程確實簡單不少，.babelrc 不算 parcel 的配置，確實能夠說是零配置，甚至讓我有種錯覺，這就結束了？但要說有多犀利，如今也還看不出來，期待後續發展！

最後附上做者信息：

原文博客地址：http://blog.jakoblind.no/ Parcel 官網地址：https://parceljs.org/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。