parcel是一个前端打包工具。因其推崇的零配置理念,和webpack形成了鲜明对比。对于我这样一个被后端IDE智能提示宠坏的猿,自然是对webpack提不起爱。平时也都是使用CLI默认配置好webpack。parcel的出现让我眼前一亮,下面我们就讲讲如何使用parcel打造一个react工作流。

初始化项目

mkdir parcel-react-demo
cd parcel-react-demo
npm init -y

此时的package,json是这样的

{
"name": "parcel-react-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

安装依赖

npm i react react-dom
npm i parcel-bundler babel-preset-react --save-dev

编辑package.json的script节点为如下内容

 "scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --public-url ./ -d build"
},

此时的package.json看起来是这样的

{
"name": "parcel-react-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --public-url ./ -d build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.4.1"
}
}

在根目录新增.babelrc文件,来配置babel转换

{
"presets": [
"react"
]
}

添加代码

在根目录新建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='root'></div>
<script src="./src/index.js"></script>
</body> </html>

在根目录新建src文件夹,在src中新建index.js文件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App' ReactDOM.render(React.createElement(App), document.getElementById('root'))

src文件夹中再新建components文件夹,然后再components中新建App.jsx文件

import React from 'react'

export default class App extends React.Component {
render() {
return (
<div>你好parcel!</div>
)
}
}

此时我们的项目结构看起来是这样的

aaarticlea/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAFUANIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDyuirml6XeazqMNhYQtNcSnCqO3qSewHrXp/irwZZ+EfhnKibZr6WeL7RcY68/dX0Ufr1rS5J5JV9ND1eW2FzHpd68BXcJVt3KkeucYxVCvQnkis/+EY1CbWlsY4LGNniXzDJIAzHACjBB6cmhiRwcNrcXEcskMEsiQrukZEJCD1OOg+tPs9OvtQLiysri5KYLCGJn256ZwOK9B0lHgghukit47fV7ySa6jluI4ytsdyKuGIJHzMePQVmaXph0+x8Wadc3S2vkmFDO4YgASHB+UE8jHbvSvqOxx1zaXNlMYbq3lglAyUlQq35GrEui6rDbG5l0y9jgAyZXt2C4+uMV3W3ydUs7Z917caXpc1zb3MoDC4Y/MhXk5Ve306CuEl1bUbmWRpr65kM3Em6U/OM9D7e1VHWXL/W4eY+fQtYtoGnn0q+ihQZaSS3dVA9yRVOe3ntZTFcQyQyAAlJFKnBGRwfauu8diy/4SDUiNRuvtW5f9G8j9391f49/pz92qPjn/kaJP+uEH/otalO9h2/r7jnoYZbiZIYY3klc7VRFJZj6ADrVm70nUrCMSXmn3dshOA00LICfTJFbPh3TJ7LxTpEksloytdoAIbuKU9fRGJH1rV1NfsHh7XJEv21CK8uvKKRhtlswfdlt2CCcYGBj3obtb+u3+Ylq7HK/2DrAt/tB0m+8jZv8z7O+3bjOc4xjHeqkdtcSwSzxwSvDDjzJFQlUz0ye2feuw8WiyzaGTUbqK4/s2HbAkG5G+TjLbxjP0rT0HT5bTSdNsH8gW+ppI99vuI1YK67Y8KxBOPvcA9ad9xLoeeW9rcXkwhtYJZ5W6JEhZj+Aq7/wjut79n9jahvAzt+yvnHr0rbmW78PeEmS2Zobqa/kt7uaM4YBAMJnrg5J965+C+u5Lm2SS6nZUcBQ0hIXJGcU4+87IHorsS70nUtPjWS90+7to2O0NNCyAn0yR1qO0sLzUJGjsrSe5dRuZYYy5A9cCtvxVHNd+NdStkkQZuG2iWZY0HHqxAH51Z0C1msLTxCjvCX/ALNLAwTpKB84/iQkZ9s1Kl7vN5XG1Z2Ocu9PvdPZVvbO4tmblRNEyE/TIqd9B1iK3aeTSb5IVXe0jWzhQvrnGMVsaPd3N/4c1u0vZXmtILYTRGVi3lShgF256ZyRVzxqLH+1Zi2pXSXP2eLFutvlD+7X+Lf/AOy0N2BK/wDXp/mcjcWlzaeX9pt5YfMUOnmIV3KehGeo96T7LcfZftXkS/Z9+zzth2bsZxnpnHavQfE9v/bGj29rDHuvrC0t54wOS8TqFYAezBT+NT/ZrT+y7PQG2Nb2eqW0E5HSSRg5k/U7fwp9WvO342Etk/L9LnAR6Nqs1r9pi028e3xu81YGKY9c4xVGt/Vdf1hfElxOLy4hmhmZI0RyBGAcBQOmOOnek8ZwxQ+K7xYkEYbY7IowFZkBb9SaSd7PuNq2hg0UUUxBRRRQAUUZj/56r+R/wozH/wA9V/I/4VVhcyCrt/qk+oxWccyRqLSAQR7ARlQScnJ681SzH/z1X8j/AIUZj/56r+R/wpWDmL2qapPq1zHNMkcYjiSGOOIEKiKMADJP+TV258UXt3b3cMsVvm7ghhmkCnc3ln5W6/ePesTMf/PVfyP+FGY/+eq/kf8ACjlDmNeHxHqFva2MMTIsljIz28+P3iBuqdcFfYin3fiFbuKZf7F0mGSUANLDAwYe4yxCn6CsXMf/AD1X8j/hRmP/AJ6r+R/wp2DmNzVPEh1d55rnSdOFzMPmnQShwcYyPnx29KNQ8SnU973Wkac07RiPzwJQ4wu0H7+MgAdqw8x/89V/I/4UZj/56r+R/wAKXKHMWdOvpdM1G3voVRpYJBIocEqSPXFWrbXLm2k1BhHDJHfqyzwyAlDk5BGDkEHoc1mZj/56r+R/wozH/wA9V/I/4Uctw5kbt14mN7HGLrSNNmkjhWFZWEobaowOj4z+FUNU1W41bUnvpwiSMFAWIEKgUAADJOOlUcx/89V/I/4UZj/56r+R/wAKOXW4cytY6A+ML+S7uppraynjugpnt5Yi0bsowHxnIbjqCKz73VBdyW7x2FlaCDottGRu5z8xJJPT1rPzH/z1X8j/AIUZj/56r+R/woUbaoLq1i1qV/LqupXF9OqLLO5dggIUH2yTVjSNZl0c3QS3t7iO5i8mWOcMQVyD/CQe1ZuY/wDnqv5H/CjMf/PVfyP+FCjZWByvqa1/4guL2yWxjt7WytAwZobSMqHYdCxJJY/U1NqHiU6nve60jTmnaMR+eBKHGF2g/fxkADtWHmP/AJ6r+R/wozH/AM9V/I/4Ucocxux+LNRh1m21SNYFnt7dbdVCnayBccjPPr9aojV7oafNZ5Uia4W5aXnfvAI659zVDMf/AD1X8j/hRmP/AJ6r+R/wo5f6/ELr+vuOi/4TC5eZbmbTdLmvlGBdyW5MhPZjztLD1IrCuLia7uZLi4kaSaVizu3Uk1FmP/nqv5H/AAozH/z1X8j/AIUcocwUUZj/AOeq/kf8KMx/89V/I/4U7BzIKKMx/wDPVfyP+FFFg5kV6KKKkoKKK9ItvD9hrvgLSYzF9lvobO4uRfniLas7jZKe2ex9c0gPN6KK0vD2nw6t4gsbCdnWKeUIxjIDAe2QaaV3YTdldmbRXYLoHh+9TVbTT7nUDf2EMkwkl2eVKEPzAADI9jn/AAqudI0DSLGxbW5dRlu7yFbgR2RRRFG33clgck9e1JO6uU00cvVqHT7q4sLq+ii3W1qUEz7gNu44XjOTk+ldMfB9pFqk8k17KdFis1vhOijzHjb7qgHjcTx+FWYl0Y+A/EL6Q16MvbCSO72kj95wQVABByeMdqfTz/4NhHDUV6FH4CtIrmDTbm31x7yRQHvYLfNrG7DIHTJAzgnI/CuDu7Z7O8ntZceZDI0bY9QcGlfUOlyGiul07SNF/wCEW/tnVJb3P2w2witiuWGwMPvDjvz+lak/hvwxaajp9tNd6nIuqLHJbeWEBiR8BfMyOTnPTHApta2A4aiuqTw1YadDqN5rVzcG2tbxrKJLUKJJpByTlshRjnvTm8LWeqxabdaBNcfZ7u6+ySJdgF4ZMbs5Xgjbz+FJajem5zun6fdarepZ2UXm3DglU3Bc4BJ5JA6A1Vr0bwrbeGYPGMcGnz6i13AJVWSYIYpiEYNgAZXuRnPSuQvNKgt/DGl6kjyGa7lmR1JG0BCMY4z39aLroFtbFKx0+61OdoLSLzJFjaQjcB8qjJPJ9Kq13uiaXBpevWogeRvtWhPcvvIOGZGyBgDjiqWleE4H0K21K+tNYvDds3lRaZEG2KpwWckHqeg9qHo7f1u1+gk7r+uyf6nH0V3Q8C28Gpamk7X9xBawRTw29sgFxKr+oI424OeK5LVFsEvmXTlu1gAA23e3zFbuDjjrRcdilRRRTEFFFFABRRRQAUUUUAFbV34nv7nwzYeHw/l2NpuJRT/rWLs2W+m7AH41i0UgCtLw9qEOk+ILG/nV2iglDsIwCxHtkis2imnYTV1Y3tH1u20/U9VuZklZLu1nhjCAEhn6Z56etW21fQNXsLFdai1GK7s4VtxJZBCssa/dyGIwR071y1FJKysU22divjCzm1G5hurKUaNNZrYrDG4MkcacowJ4LZyfx9qgk1jQLTw1qWlaZFqDSXbRMJ7kIMlWzghTwAOnXJJ6VytFH9fqI7a88UaPq0i3t5ca9a3bIBNFZyL5TMBjK5OVzj0NYMfhrXr2MXUOlX00c3zrJ5ZbeD3z3rHoosBu3l0bLwz/AGBdW08N9Ffm4dZFwApjAA65z36VPfeILS51Lw/cpHME063gimDKMsUbJ288j0ziubop36/1tYOljr5fEuk6i2q2epW939gur1r23kgC+bE545BOCCPemDxVZ6SNNttDt7g2tpdfa5GuiA8z424wuQo25HfrXJ0UloNu+52+m694T0nXv7WtrXVWkYv+7cR7YdynO3By3XHOOD3rNstX0a48Nw6TrMV8ptZmlgltAhJDdVYMR3HUVzVFFugX1udo/i3S/wC3be8htbmO2h0o2IjIUsG2sBznkcjnr7VXsfEmny6Da6dqUuqW0lmWEM2nuvzoxzhwSOh6GuToo/r+vvEtP6/rsdHBf6J/alxczXmvpt2/ZZ43Rphwd27JGPbBqt4o1qHXdY+1wRSKixJFvlx5ku0Y3vjjcf6Vi0UWGFFFFMQUUUUAFFFFABRRRQAUUV0ng3wbfeL9T8iDMVpGQbi5I4Qeg9WPYUgObora8W6db6R4r1HT7RWW3t5diBjk4AHU+tVdE0mXXNYt9OhdY3mJ+duigAkn34B4prUDPoroH0PS5dSsbLT9ba5kublYJA9m0ZiyQN2CeevTjpUv/CKwza5JpVnqXmyWxc3c8kPlxQov3m3biTjp0HPc9aQ7HNUVq6pY6Rawq2nay19Jv2sjWjRYGPvAknP6VlUCCiiimAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAV0mlePfEuiWCWOm6glvbISQi20R5PUklck+5rm6KQFnUNQutVv5r69l825nbdI+0LuP0AAqXSDENUgaXUH05QSftUaMxjODg4Xnrxx61RopoDvb3X9Ke90OWfUI9Qvba9SWfUEtGixCCPlYYBYjrnFZOm61YW/ifV3ui50/UhPA0sY+ZEdshwD9BxXMUUv+D+IzV1Sw0qzhVrDWlv5GfBRbZ49q+pLd/YVlUUUCCiiimAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFS21tPe3UVtbRPLPKwVI0GSxPYUARUV0/i7whL4Rj0yK5lD3lzC0syr92M5wFHrjua5ikAUV0I8IXUdrFLe6jplhJLH5iW91OVkK9jgA4z7kU208KXNxYQXlzf6dp8dx/qBezlGkH94AA8e5xQBgUV0EPg7VZdYutLxAlxbwGcl5MI6DHKtjHOe+PfFTnwRefZ1u01PSpLHkSXa3B8qJhj5WO3OTkYwDRcDmKK6A+D9R/t+20hZbV5bmLzoJkctFIm0tkEDP8ACR0pZvCF3HZXFxDfaddPapvnt7effJGvckYwcd8E0Dsc9RXQWvhO5msbe7utQ03T0uRmBbyco0i/3gADge5xSw+DNVm1C/sW+zwzWUYlkMsmFKEj5g2MYwc5OOKBHPUVtan4autNsYL5LqzvbWaQxCWzkLhX67TkA5q43gjUAGi+2aeb9Y/MawE+ZwMZxjGM45xmi4HM0V0Fr4RurjS7TUZdQ060tbrd5b3MxTkMRjG088E8Z464rS0Pwcv/AAkV9pusSWyNbQMwRpWG/Kkq6kDlRwT/ACoel/IDjaK6GHwlNKs839q6XHZxSCIXbzsIpHK7tq/LkkDrxWLeWxs7yW2M0M3ltt8yF9yN7g9xQMgooopiCiiigAooooAKKKKACiiigArf8L+LLnwndSXVlYWE9y42iW5R2ZB3C4YAZ/OsCikB0HivxhqHjC6t7jUIbWJ4EKKLdWUEE55yxrABwQfSkopp21QHa+IdPtvEepSa3Z61pkcNzGrtDdXAjliYKAVK9T04xTL+0tvE9jpNzbavp9tJbWcdpPBe3AiKlM/MM9Qc9q42il0sB6A+sae19qEEN5G0dr4faxjnZtgnkXH3c9c84HtWHFdQD4c3FqZ4xcNqauId43FfLxnHXGe9c3RQ9d/61uNO39eVj0zRrq2uNf8AB6RXMbtFp0iS+W4YxnY/Bx0PtWRpdraeGItS1CfWNOuvNtJLe3htpvMeRn4BZeqj1zXOaBq39h6xDqHked5auvl79udyleuD61m0NX/ru3/mCdreVvwO01O0tvFMGm3trq+m2rxWkdtNBeXAiaNk4yM9VPXirt3rWnzR61Bb3iMkOkQ2UUrttNwyMMlQeT3/AAFefUUPW67/AK/8OJdPK34f8MdZpWpW1n4MTzJY2mh1mK48jeN5RU5IHXHbNdLf6rINTm1bS73wmImzNHNKiLcjI6MMbt3b3ry6ihq479P6/rU6LW7uGfwt4diSeN5YluPNjVgShMmRkdsiulOpac/ji2dr+2WGXSRbmcyAoshiIwzdufWvOKKGr/j+N/8AMT1d/wCt0/0O40O3utPinsX1Tw3dWJmHnWt3dKUY7Qd6H1wcZB6g8VzGvJp0eu3iaSxawEn7kkk8d8E84znHtWdRR1uMKKKKYgooooAKKKKACiiigAooooAKKKKACinxQvPII41yx55OAB6knoK6FYra2ija+ntpLV0URRhSSGAG4ggeueh571cYXVzOdRR0Oborb1OxmFrDmWG4ky0gMQ2nysDGBgZHXoMDmsSplFxdioTUldBRW54Y0+0urq5u9RiMmn2MDTTIGK7z0VcgggliPyo13QzaeJ206xQvHcOrWYz95JMFOSffGT6UuqRRh0Vvt4K8RJBLM2mttiDFlEiF8A4JC53EcdQOar2HhjWNTtUurOz8yByyiQyIoBXGc5Ix1HWkBkUVd1PSb7Rrr7NqFu0MpUMASCCD3BGQR9Ktvb39xommQppdv5c0zrbzxIPOnbIyrEHJAyMcCj0Ax6K3Ljwfrlo8CT2iIZ5hBH/pERzIRkKcNweO+KpDRdRIvybYqLDi5LOq+Wc4xyeTnsM5ouBQooopgFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAEkMzQSblCnIIZWHBB6iugW3tL9IoJLeW3SCJWWUSAKd2CVyR1yTjk5Nc3TjI7IqF2Kr91SeBVxnZWZnOnzO6djcvbyOK1t54bIwyoXgTzmyUCgcgYHPzHrmsGnPI8m3e7NtGFyc4HpTaUpczuOEOVWO3t10vRvBEEGrJeF9Xk88i1ZFby0OFB3A8EkmtBFsdYt/DmpaYtxt02/ispRcFTJsLAoSVAGAcgcd684q5pN3HYaxZXkoYxwTpKwUckKwJx78Ul8V/P+vwK6HfwaHqln8Qp9eu3VNNiuZJnvDKu3ZyNvXOf4cVSbTb3XvAVvHpUW/OpTS/ZlYBivYgE84z+tcZql0l9q97dxBhHPO8qhhyAzEjPvzV241WCbwpY6UqSCeC5klZiBtIYDGOc549KzS937vzRT+K/9bP8AzN7W9Kvbmz8P+HIlW41e1gmeaMSr+7BO4KSTjIA6Zp1m9/FoPhN9MVGvVvLkxK5ADHK8HJA5+tcba/ZvtcX2zzfs24eZ5ON+3vjPGfrWtrurWN1Yafpmlx3C2VkHIe52+ZI7nJJC8AcDFV5/13Bf191jodc8Ntc29tcx6ZJpWtXN2IxZifes2RkyKOqgH8BVnxZINW0K4j065E8umzL/AGoUTH2lggXzvcAgj9a85opW0sF9bhRRRVCCiiigAooooAKKKKACiiigAooooAKKKKACiiugPhdhqP2b7WBGtuJ5JTH90c8YzzVRg5bESqRh8Rz9FW7+3tLeRBZ3v2pGXJbyim0+nNVKlqxSd1cKK1dRtWuL4JZaJc2W23WRoMvI2AMmTkZAPX0qrdaXqFjEkt5YXVvG/wBx5oWQN9CRzSGVKK2NH0K+vLyylk027k0+SdFklET7CpYA/MP8aXVtJf8A4SnUdO0uzmlWK4kWOGFWkYKDj3Jo62HbS5jUVcbStRW5kt20+6E8aGR4jC25VH8RGMge9Qi1uGtWuhBKbdW2NMEOwN6Z6Z9qBENFX8Rf2Bn+y5PM+04+3722Y2/6vGNue+c5ps+kanbWourjTruK3OMSyQMqHPTkjFMClRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAWbGz+3XHlfaIIMDO+d9q//rrpbq8Nx4hMmm6nbQGCBY/MlcBJOeQPWuRoq4z5VZGU6XM7tm74mls5Z7doTbtc7P8ASXt/uM3se/esKiipk7u5cI8kVE9QWd7bxpPPEQJItA3qSM8iIEVhaTe3GpeC/ES6hdTTxxyW0gMjlipMmGIz6iuWOo3xlaU3twZGj8ov5rZKYxtzn7uOMdKijubiKCWCOeVIZsebGrkK+ORkd8e9St7/ANb3KWkUv62SPR9RHiFfiLarYi8XTkkhEHk7hCIMLnp8uMZzVhPIEfi1lS/e4/tMiYac4WfysnHUH5c5zivOU1rVYrZbaPU7xLdMbYlnYKuORgZx1qOLUr+C8e7hvbmO6ckvMkrB2z1ywOTSt0/roO+n3fr/AJndHULy61nw7BpdlqcV1bGQCbU8EyREgsGOBlQN30Bqn4ygE0OmQ6BF5uiyO/kJApYtOWO4EdSemPbpXKSazqk0rSy6lePI8ZiZ2nYlkPVSc9Paks766hMUCahcW1v5yyHy3bCN034B6gfjTte39f1/mK9v6/r/AIY6O3E9r4HtwLdmuIteGIHQ5LCP7pHXrxir/iKObWdH1LWFk1awZHQ3VhelvKYlsDyzx0PYisnWdSsbfQoNM0/UpNQnN417NebHjw+NoA3ck9yfWsO71bUtQjWO91C7uUU5VZpmcA+wJoev9eSGtP69SnRRRTEFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFdJb6HY6VZpfeInkUyrut7CI4lkHqx/hX9azqVY01r16dWNK5zdFSTvHJcSPFEIo2YlYwxbaPTJ61HVrYQUVrtpcA8IJq2+T7Q18bYrkbdoQNnGM5z71kU+tgCigckCtbxNpcGi+IrrT7ZpHhh27TIQWOVB5wB60AZNFFa/hnS4Na16CwuXkWKRZCTGQG+VGYdQe4oAyKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA6PwvbQwRX2vXUHnQ6cqlIiOHlY4XPsOp/Cti8u21vwtqmr6tplrb7mjWznSPEkj55+Y8sMfhwcdK5vQ/El/4fM/2TymjnADxzJuU46HHrUeseINT12RW1C5Mip9yMAKq/QD+defPD1J1uZ7XWt9bLpbzfXsXGSSMyiirOn6hdaXfRXtlL5VxESUfaGxxjoQR3r0CDrNN1O90n4b/arDCTf2oy+dsDGMGIdM9Cema0fJvteg8M6k4tv7XkM7PNcR/K8UZyHcAc47cc1yNj4p1nToXhtLzy4pJWmdDEjBmIAJIIOeg46U2TxNrMurRao9/IbyEbY5AAAg9AoGMe2KT1d/T8g6WOy1S5TVvA+qzS6w2sNbTwtHM9n5PlFmwQpPUEdsDFS6/wCItasfH66dZYS3kkhBgESkXG5VyWyMnPT2xXGXvivW9RtJrW6vd9vNt3xiJFU7TkcADBz6de9WD468SksTqZ3Nxu8mPcvGPlO3K/hij+vyB6qx2C2+naFba7eWV8dNYaobYXUVr57RptB2AZG0ZJ59gKgsdS07U/GeizWt0bu8W3nS7uTb+T5pEbbSVyeccZ9q4bTNf1TR5JnsbtozP/rQyhw/1DAgn3qSTxNq8uqRak12PtUKGONxEgCqQQQFAx3PbvStpby/SxV9b/1ubn9p3em/DfTzZTvbyy3symWNtrhcDIBHIzx09Kn1nWNR8L2uk2eiy/ZbaWyjuHlRATPI33iWIOcdMVyD6hdSadFp7y5tYZGkSPaOGPU5xntWhYeLNb0yyWztb3bbodyI8SSbD7bgcfhTf9fcStF9/wCZkSyPNM8shy7sWY4xknrTKdJI80ryyMWd2LMT3J602hbDYUUUUxBRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRT4opJ5ViiRnkc4VVGSTU4066P2rbEWNqcTBedvJH5cVLlFbsqMJS2RVooqxYw21xfRRXd19kt2OHn8svsHrtHJqiSvRT5lRJpFik8yNWIV9uNw7HHamUgCitTQ9H/tma8j8/yfs1pJc52bt2wfd6jGfWsugdtLhRRRTEFFaWsaT/AGSbEef5v2qzjuvubdu7Py9TnGOtVrSwub4XBtovMFvEZpeQNqDGTz9RQBWooooAKK04NI87w5d6v5+Ps86Q+Vs+9uBOc546elZlLrYOlwooopgFFFFABRRRQAUUUUAFFFFABRRRQB0Ph51NtcwWkiQ6rJxDJIOq45VT2aq2iQaiuru0EnkPDk3Ekp+VVzzu9fp/+usgEgggkEdCKkNxMRKDK5847pOfvHrzXPKi7yt9rudUa6tFSXw9v638+xZ1eS0l1Sd7FNtuT8oxgH1IHYZq54RghufFumQzxJLE84DJIoZWHoQetYtW9L1CbSdTt7+BUaWBw6iQEqT74IremlFJdjmrSdRyl3OqtXstN8L6rfNplnc3EeqeVAZ4gyoCp6juMZ46ZxWhBpOna/ceGr+Wwgt1uo7hrqG1Xy1k8rpgDpnviuLk1q5k0q408pF5M919qZgDuD4IwOenNWIPE+o2sGlR25jiOmNI0Dqp3HecsGycEdugpRWn9dv8xyt+f5nUeHNeTVJNaiGkadaY0y4aN7WDy2UY+6SPvD6+lS2unWek6FpLRnw8JrqAXE7asrM75PCr8pAUDjjnNYH/AAm92iXS22l6Va/aonimMFuVLhhgnO7/AOt7VWs/FVxb6bDYXNhp+oQwE+T9shLtGD1AII49qLf194X0t6/odHbaXo2r69q2gWCW5tpgLi1vY03fZ2ABZS3XYckflXMeKZIBrUlpa2a2sFn/AKOi+WFd9vBZz3YnnmmN4iufsd9bQW9rareyK8rW8ZQ4HRBzgLnnGM+9SXXiae9mlnurDT5riW1Fs8rwksccCTrw/uPyott/X9dhX/r+vvOm1TWYNOk8OQnSbC7aTTrbzXuoRISvICrnhe/Pv7VatDHoOv8Ai7T7WztGggtJZ0EsIc4+Q7CT1Tn7tcJfaxcahNZSSpErWcEdvHsB5VOhPPXmr6+Lr8a/eau0Fo8l5GYp4HjJidCACMZz2Heqerfz/HYS0/A1YdQtrfwa+rtpGmy3kuqNGu+2Uoi+WDgL6eg6ck1p3l3p1lrOhRw6BpmzVooJ7kSQBgN5CkRg/cAwTx3NcZea5Neac9h9mtYLdro3QWFCu1iu3A5+7gfX3pbjxBd3N3ply8cIfToo4oQqnDBDkbueT64xRpf7vy/zH0/rudFqFpFYeGfE1pCMRQ6siIM9AN2K4iti78R3l5bajBJHAFv7kXUpVTkMM8Lz0575rHqYp9fL8kDt08/zYUUUVQgooooAKKKKACiiigAooooAKKKKACitjQfD8mti7l+1Q2ttaR+ZNLLk7Rz2HXoaj0PSBreqfYFvIrd3U+U0gOHbsvHr/SsnWgua7+Hcdupl0VNeWsllez2k2PMhkaN8HjIODUNaJpq6Bq2gUUUUxBRRV7TdLn1QXhgeNfsts9y+8kZVcZAwDzzQBRooooAKKKKACiir2kaXPrWpxafbPGksu7aZCQvCknoD6UAUaKKKACipbaBrq6ht0IDyuqKW6Ak45qTULKXTdRubGZkaW3kaNyhJUkHHGe1ICtRVuxsftv2j/SrW38mFpf8ASJNm/H8K+rHsKqUwCiiigAooooAKKKKACiiigDtfCvlL4O8SNAxkvGt8SRP8qrHg/MDjk8tx7Vi+DzKvi3TTDGsj+dwrNgYwc8/TmpPDWu2ukx6ha31vLNa30PlSGFgHXr0z9ar+HdTtNH1pL+4gmmEILQojhfn7ZPpjNcDpzXttL3289LFbxsO8Vrar4o1AWskkiGdy5kGCHydwHsDTPDFlb6j4m06zuo/MgmmCum4jI+o5qlqF42oalc3jKEaeVpCoOcZOcVq+C/8Akc9J/wCvha7KEXGEYvpYms9JNGzYWnhzWNam0CDSZIJG8xIL77S7NuUEgsh+XBx0/wD10eG9DhutPtnm8Ly3qvIRNdzXnkIBnH7sZAbA+vPFV7jxTY2F/fT6focdvqkhkjN19oZlQkkMyoRwTz3OM1DF4rsmstNS90Rbq605BHBN9pZEwDkbkA5/PnvThsn6Dn1Rdm8O6Vodxrd5fxSXlpY3Itre2EhTzGYZG5hyAB6daf4Y+zazqOq2+laYli0ukzRCMTs6s5YAHLcjqPyqg/jJLjUdVe80xbjT9RcSSWjTEFGHRlcDg/hVWLxBY2U942naS1tHc2L2hU3RchmP38kdsDgAURvb3u36f5g/Lv8AqWr/AE7SrTWLPQrewuby4hlC3k0W4STN3SNTwAPXGT/PU1jwzbjwxf3raCNIubR4zGFvfO8xWbaQwJOCPwrNt/GxS70/ULjTln1O1Bje583b58ZBXDDH3gDw2fzqGXxPp6aLqGmadon2RL3YWkN0ZGBVs9xyPbjv1p+oK1zSuLTw3pGvW/h+40iS7lDRx3F4bl0be2CdqjjAz3/+vVyLwhZf2nr08eni6hs7kW9tZNdeSpJ5JZ2IOAO2cmlsLqfWdc0+4u/CMz6oTHuvGaRIyBjEjJtxwOeuOPwrM1HxPbw6/r1vNZpqOl3lyWMfmlDuU8OrDOP60ne/3/p/wRLb7v1G+JPDUcSaZLZWkNjcXRdJbQ3qSIjLyCHLYAI9TTvCGl3WmeNdNFz5H7wS7fKuI5ekbddjHHXvXO6pd6ddPH/Z2mGxRQdwa4aUufqQMfgKdoGrf2HrUGo+R5/lBv3e/bnKleuD601s/mNmtaWmk6V4ZttW1KxOoT3srpDCZmjSNU4LEryTntWhH4Y03XJtGvbGOSxsr3zRcQ+Z5hiMQydpPJyPXpWLp3iG3i0j+ytU0wahaJIZYcTGJ4mPXDAHg+mKmfxhPDqGnTabaRWdrp4YQWu4uDu+/uY8sWo6i6D49R0O41Szh07Qfsjfa4vLuDdO7YDj7ynjn26VreLtLsdFutSvNRg+1X2o3ErWke5gkKbvvsVIy3ov51hXGt6L50dxY+Hvss6TpLu+2M6jByQFxxn8cVPP4uF8mp2+oWH2izu5nngi87DWsjHOVbaeOeRjB/Ok07f15f1/Vyl1+X6lTw5p9rfrq5uYvM+z6bLPF8xG11xg8Hnr0PFbtto+mL4atb210P8AtomEteSpeMslu/8Ad8tew65IOabpEaC11rUItKk06y/sZ4t0jsyySMQAQzD+L0FZ2k+JtO0YQ3NpoeNSiiKC4N42xmIwWMeP0zinLsv63JXf+uhK1to2gaNps1/ph1K8v4jOQ1w8SRJnAA29SfetS18NaLPrtlP5Eo0q/wBPkuhCZCWhZQcgEYJwRxnrWFb+JLOXS7ex1nSBqAtSfs8qXBhdFJyVOAcjP5VIvjBxrAvPsKLbxWj2dvapIQIkKkDkgknnJ9aUr628/wAnb9A7fL81/wAEmNvomseGNUu7HS2sLnTjG4YXDSeajNtw27gHvxiuTrU0/WPsGj6rYeRv+3pGu/fjy9rbumOc/hWXT6j0sFFFFMQUUUUAFFaWj6Ffa5JMtmqbYV3yySOFVB7k/Sm6To11rV81nZmIzBCwDyBd2OwPc1m6sFe7238h2Zn1JDPNbTJNBK8UqHKvGxVlPqCOlE8EltcSQTIUljYo6nsQcEVHVp31QmujFZmdizEsxOSSckmkoooAKKKs2en3V+Lg20XmfZ4Wnl+YDai9TyeevQc0wK1FFFAGgdd1c232Y6rfG327PKNw+3b6YzjFZ9FFIAooq3Jpl5FpcOpPDizmkMccm4csOoxnP6UAVKKKKYBRRRQBak1K+ms0s5b25e1j+5C0rFF+i5wKq0UUgCiiimAUUUUAFFFFABRRRQB2vhZEi8G+JJ1kE0kkGxrdMbkAB+c5PTk9PSsXwg5j8W6awheUiYfImM9Dzz6dfwq14U1bT7GDVbLUZJIY7+DyhOibtnXqPxqr4XvLHTfEEV9ezSpFb5dPLTcXboB7ZBNee4yXttL3289LFPWI3xXDHB4o1BY7lLgNO7llGNpJJK/UdKg8PafDq3iCxsJ2dYp5QjGMgMB7ZBqDVLtL/Vry8RCiTzPIqnqASTWn4L/5HPSf+vha7MPFqEYy8iaz+Jo07bQPDmpajPo1jdaj/aShxFNJs8mR1BJGANwBwcHP+FV/D+iaTqNvCtxb63c3Ekm2Q2MIMcAzgbiQcnvxjirf9teHtG1W81KwttQbVMyLFHKU8mJ2yCQR8xAycAj/ABp1t4s0v+ytLhuH1eGSxQK1vaSKsE5DZ3Mc5ye/FVF3SfoOWl7Fb/hFLTT7rV5dXuphp+nTCAG3UeZO7cqBngccnNWvDkOn3V5rEGhRXzebo8yeXclWcuSAANoHHSo7nxXpWo32swX1tdnS9QmWeNogomhdRgHBODkcEZqpp+s6Rod5eyaW2pYnsJII5JQgdZSQQflPCjA7k0Rvb3u36f5g/Lv+pDqGj6Rpl3Z6bNezPe7x9uliw0cP+woAyzDuc4/pf1HwtY/8I7d6pY22s2jWrpldRjUCVWOMqQByD160+28WaT/bGn65c2Uw1SMlbvyVXy5cqQJFyeHGc4xg+1F54o0s6BqlhBPrN3PeeWVmv3VsbWzjAY447859sU/UFa42Tw/4c0/U7fRdRudSbUn2LNLBs8qJ2wQuCMnGRk//AKqlj8FW/wDaetFk1G4sdPmEKRWiB55WP4YAA5JxUkGp6D4g8S2N/JZ6l/a0skQeCLZ5LyDADZ+8BxkjH+NPv/Elna6/4i068N2LO5uzIs9k4Esci8cZwCD0PNJ3v9/6CW33fqYvibw5HpFrY31tFfQ293uUw30e2WNlPOcAAg5yOKba+Hra60fR7n7Q0U19fNbOzkbEUYwcdc8+tNu7zQ7nULVZLrXJ7BQxmMzoZM442DJA98mr0/2WPwToYuxN9le/nYiMgSGPgEjPGaa0/rzB7q39aMbrXh7TrXUI9JsrfVodQkuVhja9CCKVSdu5cAHrj14qYaJ4VOs/2F9s1T7b5n2cXWE8nzc4+7jdtzx1ouPFllaaRDZaY+o3bQ3UdxE+o7f3GzkBApPXvyKT+2/Cw1j+3Vs9T+3eZ9oFqWTyfNzn733tueelC8/62/4I35EUPh7SrHQ7i+1qa8E0GoPZNDalfnKqDwWHHc5/Ss/xJo9pphsLnT5ZpLK+txNF5+N6c4KnHBwfSlvdeS+8OyWcyubyXUnvXYAbMMuMDnOc+1M1nV7fUdJ0W0hSVZLGBopS4ABJbPHPT64pO+ny/LX8Q6/f+f8AkYtFFFUIKKKKACiiigAooooAKKKKACiiigAqeyvbjTr2G8tZPLnhbcj7QcH6HioKKA3HSSNLK8jnLuxZj6k02iikAUUUUwCiiigDfXxt4hS3EKahsUR+WGWGMOFxjG8Lu/WsEksSSSSeSTSUUvMOliW2uJbS6iuYG2TROHRsA4IOQcHirWqazqGtTRy6hcmZo12INoVVHsqgAflVCimAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH/2Q==" alt="项目结构">

运行开发调试

parcel内建开发服务器,并支持模块热替换我们运行npm start来执行parcel index.html启动开发者服务器,下面是运行结果

aaarticlea/jpeg;base64,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lvbDImlZAcO3da9nrw345Xf2XXNNIigkLW33ZkDfxN0zTQmee/Z9L/556X/4GS/4UVm/2w//AD46f/4DLRVCPZfgB/yCNa/6+I//AEE17DXj3wA/5BGtf9fEf/oJr2GpluNBRRRSGFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAV4F8fv8AkY9I/wCvRv8A0M177XgXx+/5GPSP+vRv/QzVREzySiiiqJPd/gB/yCNa/wCviP8A9BNew1498AP+QRrX/XxH/wCgmvYaiW5SCiiikMKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigArwL4/f8jHpH/Xo3/oZr32vAvj9/yMekf9ejf+hmqiJnklFFFUSe7/AD/kEa1/18R/8AoJr2GvHvgB/yCNa/6+I//QTXsNRLcpBRRRSGFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAV4x8YopZvE+mKkFu6fZfnkmRW2Dc3QEjr7elez14r8arS3uNYs3nhmlaO1G0Qn5uXbOB0poTOC/sy9/599J/8B1orP+zRf8+mu/p/8TRVCPVvgB/yCNa/6+I//QTXsNePfAD/AJBGtf8AXxH/AOgmvYamW40FFFFIYUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABXhHx3u7i28Q6WIJ5It9od2xsZw5r3evAvj9/yMekf9ejf+hmqiJnl39pX/8Az+3P/f1v8aKq0VRJ7v8AAD/kEa1/18R/+gmvYa8e+AH/ACCNa/6+I/8A0E17DUS3KQUUUUhhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFeBfH7/kY9I/69G/8AQzXvteBfH7/kY9I/69G/9DNVETPJKKKKok93+AH/ACCNa/6+I/8A0E17DXj3wA/5BGtf9fEf/oJr2GoluUgooopDCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK8E+PEZm8U6LEpAZ7YqM9OXr3uvF/jD9u/wCEt0j7I+2P7OPO+ZRkbz6/j0pxEzy//hD9Q/57Wv8A303/AMTRXb80U7hY6D4Af8gjWv8Ar4j/APQTXsNePfAD/kEa1/18R/8AoJr2GlLcEFFFFIYUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABXg/wAc3WLxfoMjnCrBuJ9AJK94rwL4/f8AIx6R/wBejf8AoZqoiZi/8JLpH/P3/wCQ3/worz6inYVz3f4Af8gjWv8Ar4j/APQTXsNePfAD/kEa1/18R/8AoJr2GpluNBRRRSGFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAV4F8fv+Rj0j/r0b/0M177XgXx+/wCRj0j/AK9G/wDQzVREzySiiiqJPd/gB/yCNa/6+I//AEE17DXj3wA/5BGtf9fEf/oJr2GoluUgooopDCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK8C+P3/Ix6R/16N/6Ga99rxH42aW2peINO2SbXjtcBSv3sue+eKcRM8VorsP+ETtf+e0n5UVQrHo/wAAP+QRrX/XxH/6Ca9hrx74Af8AII1r/r4j/wDQTXsNTLcaCiiikMKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigArxn4xwm58QabAyq0LxJ5oLYO3e39cV7NXgvx4mkt/FOizRNtkS1YqcZwd5poTOb/sHS/wDnxH/fx/8AGiuZ/wCEj1b/AJ/G/wC+F/woqhHsfwA/5BGtf9fEf/oJr2GvHvgB/wAgjWv+viP/ANBNew1MtxoKKKKQwooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACvAvj9/yMekf9ejf+hmvfa8C+P3/Ix6R/16N/6GaqImeSUUUVRJ7v8AP+QRrX/XxH/wCgmvYa+WvBfxFvPA9pdQWlhBc/aZA7NKxGMDAAx+NdP/wv/WP+gLY/99v/AI1LV2Ume/UV4B/w0BrH/QFsf++3o/4aA1j/AKAtj/329HKFz3+ivAP+GgNY/wCgLY/99vR/w0BrH/QFsf8Avt6OULnv9FeAf8NAax/0BbH/AL7ej/hoDWP+gLY/99vRyhc9/orwD/hoDWP+gLY/99vR/wANAax/0BbH/vt6OULnv9FeAf8ADQGsf9AWx/77ej/hoDWP+gLY/wDfb0coXPf6K8A/4aA1j/oC2P8A329H/DQGsf8AQFsf++3o5Que/wBFeAf8NAax/wBAWx/77ej/AIaA1j/oC2P/AH29HKFz3+ivAP8AhoDWP+gLY/8Afb0f8NAax/0BbH/vt6OULnv9FeAf8NAax/0BbH/vt6P+GgNY/wCgLY/99vRyhc9/orwD/hoDWP8AoC2P/fb0f8NAax/0BbH/AL7ejlC57/RXgH/DQGsf9AWx/wC+3o/4aA1j/oC2P/fb0coXPf6K8A/4aA1j/oC2P/fb0f8ADQGsf9AWx/77ejlC57/RXgH/AA0BrH/QFsf++3o/4aA1j/oC2P8A329HKFz3+ivAP+GgNY/6Atj/AN9vR/w0BrH/AEBbH/vt6OULnv8ARXgH/DQGsf8AQFsf++3o/wCGgNY/6Atj/wB9vRyhc9/orwD/AIaA1j/oC2P/AH29H/DQGsf9AWx/77ejlC57/RXgH/DQGsf9AWx/77ej/hoDWP8AoC2P/fb0coXPf6K8A/4aA1j/AKAtj/329H/DQGsf9AWx/wC+3o5Que/0V4B/w0BrH/QFsf8Avt6P+GgNY/6Atj/329HKFz3+ivAP+GgNY/6Atj/329H/AA0BrH/QFsf++3o5Que/0V4B/wANAax/0BbH/vt6P+GgNY/6Atj/AN9vRyhc9/orwD/hoDWP+gLY/wDfb0f8NAax/wBAWx/77ejlC57/AEV4B/w0BrH/AEBbH/vt6P8AhoDWP+gLY/8Afb0coXPf6K8A/wCGgNY/6Atj/wB9vR/w0BrH/QFsf++3o5Que/0V4B/w0BrH/QFsf++3o/4aA1j/AKAtj/329HKFz3+ivAP+GgNY/wCgLY/99vR/w0BrH/QFsf8Avt6OULnv9FeAf8NAax/0BbH/AL7ej/hoDWP+gLY/99vRyhc9/orwD/hoDWP+gLY/99vR/wANAax/0BbH/vt6OULnv9FeAf8ADQGsf9AWx/77ej/hoDWP+gLY/wDfb0coXPf6K8A/4aA1j/oC2P8A329H/DQGsf8AQFsf++3o5Que/wBFeAf8NAax/wBAWx/77ej/AIaA1j/oC2P/AH29HKFz3+ivAP8AhoDWP+gLY/8Afb0f8NAax/0BbH/vt6OULnv9FeFWvxz1i5guZP7JsV8hN+Nznd+tVf8AhoDWP+gLY/8Afb0uULnv9eBfH7/kYtI/69G/9DNJ/wAL/wBY/wCgLY/99vXLfETxTc+KdS0+e6t4oXjtuPKzghjnvTSsDZx1Fb3/AAjf/T3/AOQ//r0UxH//2Q==" alt="调试结果">

异步组件

在单页应用开发中,为了减少首屏加载时间,异步组件是很常用的做法,parcel对异步组件功能也进行了内置,下面我们就来实现一个react的异步组件。

在components文件夹新增Loading.jsx文件,此组件在异步组件还未加载时起到占坑作用

import React from 'react'

export default class extends React.Component {
render() {
return (
<div>正在加载</div>
)
}
}

在components文件夹新增MyComponent.jsx文件,这是我们要异步加载的组件

import React from 'react'

export default class extends React.Component {
render() {
return (
<div>我的组件</div>
)
}
}

修改App.jsx为下面代码

import React from 'react'
import Loading from './Loading.jsx' export default class App extends React.Component { constructor() {
super();
this.state = {
AsyncComponent: Loading
}
} componentDidMount() {
import('./MyComponent.jsx').then(rsp => {
setTimeout(() => {
this.setState({
AsyncComponent: rsp.default
})
}, 1000)
})
} render() {
return (
<this.state.AsyncComponent></this.state.AsyncComponent>
)
}
}

parcel支持使用import()来异步加载文件,并返回一个promise,我们在组件挂在后异步获取Muconponent组件,并赋值给this.state.AsyncComponent

打包

parcel的打包也是及其友好,只需于心parcel build index.html就可以,不过我们需要对生成传入一些参数,来生成我们需要的程序路径运行npm run build 来执行parcel build index.html --public-url ./ -d build顺利执行后你会发现在项目根目录生成了一个build文件夹,直接部署就可以了。

使用parcel打造一个零配置的react工作流的更多相关文章

  1. 从零配置webpack(react+less+typescript+mobx)

    本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...

  2. Parcel.js + Vue 2.x 极速零配置打包体验

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...

  3. Parcel + Vue 2.x 极速零配置打包体验

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...

  4. Parcel极速零配置Web应用打包工具

    当听到极速零配置打包,我不经兴奋起来,零配置!!!想起在webpack打包的配置,这个零配置着实让我好奇不已,迅速学习一波. Parcel(parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl])有以 ...

  5. 【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)

    本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢 ...

  6. 【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具

    前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...

  7. 一个简单的零配置命令行HTTP服务器

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  8. 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  9. 详解Parcel:快速,零配置web应用打包工具。

    译者按: 新一代Web应用打包工具Parcel横空出世,快速.零配置的特点让人眼前一亮. 原文: Everything You Need To Know About Parcel: The Blazi ...

随机推荐

  1. Xamarin android spinner的使用方法

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  2. bzoj 4868: [Shoi2017]期末考试

    Description 有n位同学,每位同学都参加了全部的m门课程的期末考试,都在焦急的等待成绩的公布.第i位同学希望在第ti天 或之前得知所.有.课程的成绩.如果在第ti天,有至少一门课程的成绩没有 ...

  3. MySQL安装的三种方式

    .markdown-preview:not([data-use-github-style]) { padding: 2em; font-size: 1.2em; color: rgb(171, 178 ...

  4. js设置元素class方法小结及classList相关

        给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法 一.el.setA ...

  5. 通过pyenv和virtualenv创建多版本Python虚拟环境

    虚拟环境使用第三方工具virtualenv创建,首先输入以下命令检查系统是否已经安装virtualenv. $ virtualenv --version 如果显示virtualenv版本号,则说明已经 ...

  6. jQuery实现移动端评测问卷功能

    效果图: 需求: 1.有10道测试题目,单选,选中答案之后,500ms后自动跳转至下一题 2.如果当前题目没有选择答案,将弹窗提示"请选择答案!" 3.点击"上一题&qu ...

  7. Android-AnsyncTask异步任务

    同步和异步的概念区别: 同步,必须执行完成某个问题后才能继续执行其他的. 异步,我会去先执行其他问题,你执行完之后返回给我一个结果就可以. android中为什么要引用异步任务呢 android启动的 ...

  8. RPC-非阻塞通信下的同步API实现原理,以Dubbo为例

    Netty在Java NIO领域基本算是独占鳌头,涉及到高性能网络通信,基本都会以Netty为底层通信框架,Dubbo 也不例外.以下将以Dubbo实现为例介绍其是如何在NIO非阻塞通信基础上实现同步 ...

  9. php写一个简洁的登录页面

    在学php中,刚刚看完实战演练就写了个登录页面 1.表单解析图 这是我们要写的 先用html写个表单先 <html> <head> <title>login< ...

  10. KinectFusion解析

      三维重建是指获取真实物体的三维外观形貌,并建立可复用模型的一种技术.它是当下计算机视觉的一个研究热点,主要有三方面的用途:1)相比于二维图像,可以获取更全面的几何信息:2)在VR/AR中,建立真实 ...