Parcel配置react应用

使用Parcel可以快速搭建web应用程序，避免了花费大量的时间去配置webpack等构建工具，详情可以点击这里。

接下来我们将利用Parcel搭建一个react应用。

创建npm项目

mkdir parcel-react
cd parcel-react
npm init

一路回车即可。

安装依赖

安装react和react-dom
```
yarn add react react-dom
```
安装parcel-bundler
```
yarn add parcel-bundler -D
```
安装babel的各种插件
```
yarn add @babel/core -D
yarn add @babel/preset-react -D
yarn add @babel/preset-env -D
yarn add @babel/polyfill
```
有一些功能需要安装额外的插件，比如@babel/plugin-proposal-class-properties

配置.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true,
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

polyfill的按需加载还可以通过@babel/plugin-transform-runtime，具体可以查看这篇文章。

创建index.html以及js文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import '@babel/polyfill';
import { Grid, Button, Well } from 'react-bootstrap';
import { Transition } from 'react-transition-group';

class Example extends React.Component {
    state = {
        show: false,
        entered: false,
    };

    render() {
        const { show } = this.state;
        return (
            <Grid style={{ paddingTop: '2rem' }}>
                <Button
                    onClick={() => {
                        this.setState(state => ({
                            show: !state.show,
                        }));
                    }}
                >
                    Toggle
                </Button>
                <Well style={{ marginTop: '1rem' }}>
                    <Transition
                        in={show}
                        timeout={1000}
                        unmountOnExit
                    >
                        {state => {
                            switch (state) {
                                case 'entering':
                                    return 'Entering…';
                                case 'entered':
                                    return 'Entered!';
                                case 'exiting':
                                    return 'Exiting…';
                                case 'exited':
                                    return 'Exited!';
                            }
                        }}
                    </Transition>
                </Well>
            </Grid>
        );
    }
}

ReactDOM.render(
    <Example />,
    document.getElementById('app')
);

自行安装npm包。

启动

parcel index.html

建议在package.json中配置

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html"
  }
}

执行

yarn start