使用parcel打造一个零配置的react工作流

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文件夹,直接部署就可以了。

以上是 使用parcel打造一个零配置的react工作流 的全部内容, 来源链接: utcz.com/z/384230.html

回到顶部