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

最新推荐文章于 2023-01-20 11:50:09 发布

weixin_33762321

最新推荐文章于 2023-01-20 11:50:09 发布

阅读量290

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b28b21be51d4558a65fe2ad

版权

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);
复制代码