用Parcel搭建一个react开发环境

无意间看到这个打包工具,小试一下,不知道可不可以替代webpack广泛用于项目中,先自己抽空玩一玩吧.如果可以取代webpack的话那是极好的,毕竟配webpack我还是很嫌麻烦的.

Parcel 是一个网络应用打包工具, 适用于经验不同的开发者. 它利用多核处理提供了极快的速度, 并且不需要任何配置.

• 安装

npm install -g parcel-bundler

• 在你正在使用的项目目录下创建一个 package.json 文件:

npm init -y

• 安装react相关依赖

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

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

• index.js

import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}

var mountNode = document.getElementById("app");
ReactDOM.render(, mountNode);

• index.html

• package.json

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

• 运行

npm start