使用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/