用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 <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
"scripts": {
  "start": "parcel index.html",
},
  • 运行

npm start

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容