使用Parcel创建零配置React App
当我们在React入门时,我们都经历了太多痛苦, 常常需要花费数小时来配置webpack
Create React App是为了让我们能够更简单更快速的创建React项目来入门。Create React App的问题在于它隐藏了webpack配置，当程序扩展增长，并且需要一些高级功能时，就不得不 npm run eject 来获取庞大的webpack配置。然后，又回到了需要学习Webpack的问题。
最近看到了一个新的 bundler ———— Parcel - 说0配置，就是不需要配置，便可以打包项目程序。
让我们看看他是如何从头开始创建一个React项目！
使用 Parcel 创建一个React应用
首先，我们创建一个新的npm项目
mkdir react-parcel && cd react-parcell && npm init -y
添加 React, babel和Parcel的依赖项：
yarn add react react-dom
yarn add -D @babel/preset-react @babel/preset-env parcel-bundler
tips:
在这里使用yarn，并没有使用npm的原因，npm下载依赖项在国内相对来说很慢，也可以使用cnpm(详细请看淘宝镜像源)，但这里推荐使用yarn, 因为它打的命令行少。
创建 .babelrc文件。该文件告诉 Parcel 正在使用 ES6和 React JSX。
{
"presets": ["@babel/preset-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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parcel Demo</title>
</head>
<body>
<div id="app"></div>
<script src="./src/index.js"></script>
</body>
</html>
在 package.json 中添加 "start": "parcel index.html"
"scripts: {
"start": "parcel index.html"
},
这里 index.html 是放在根目录，index.js 放在了
src下
到此，一个简单的 React 项目就创建完了。
运行
yarn start
# 或者
npm start
此时，浏览 http://localhost:1234查看项目。
总结
如果使用 webpack，将此方式与必须编写的 webpack 配置相比，简单的太多。
当然，在构建大型项目的环境中，我个人觉得它可能还不是一个最佳的选择，因为零配置意味着几乎不可能根据需求来完美的实现。
网友评论