使用parcel打造一个零配置的react工作流
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>
)
}
}
此时我们的项目结构看起来是这样的
运行开发调试
parcel内建开发服务器，并支持模块热替换我们运行npm start来执行parcel index.html启动开发者服务器，下面是运行结果
异步组件
在单页应用开发中，为了减少首屏加载时间，异步组件是很常用的做法，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文件夹，直接部署就可以了。
