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

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部