Parcel React 开发服务器热更新实战

1,587 阅读1分钟

parcel

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

内容

官网教程没有实现devSever和动态更新相结合具体部署步骤。

本文通过极少的配置项实现基于Parcel打包,React开发环境实时热更新,作为官网教程的延申。

安装依赖

npm init -y
npm install babel-preset-react react react-dom react-hot-loader react-router
npm install --dev parcel-bundler

配置项

package.json

选择项目启动的根文件

"scripts": {
    "start": "parcel src/index.html", 
    "build": "rm -rf dist && parcel build src/index.html"
  }

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>Document</title>
</head>
<body>
    <div id="container"></div>
    <script src="./main.js"></script>
</body>
</html>

.babelrc

{
    "presets": [
        "react"
    ],
    "plugins": [
        "react-hot-loader/babel"
    ]
}

main.js

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

const App = ()=>(<div >hello world</div>)

const HTMLContainer = document.getElementById('container')

ReactDOM.render(<App/>,HTMLContainer);

目录结构

目录结构

启动

npm start

可以体验React啦。

项目仓库地址

github.com/zjcwill/hot…