Parcel+TypeScript+Mobx开发React脚手架

前言

随着React生态圈的不断发展，各种构建工具层出不穷，让人眼花缭乱。其中，Parcel脱颖而出，凭借其简单易用、快速构建的特点，深受广大开发者的喜爱。

准备工作

在开始之前，你需要确保你的电脑已经安装了Node.js和npm。你可以从Node.js官网下载并安装Node.js。然后，在终端中运行以下命令安装npm：

npm install -g npm

创建项目

首先，你需要创建一个新的项目目录。你可以使用以下命令在终端中创建一个名为"my-react-project"的项目目录：

mkdir my-react-project
cd my-react-project

然后，你需要在项目目录中初始化一个新的npm项目。你可以使用以下命令在终端中初始化一个新的npm项目：

npm init -y

安装依赖

接下来，你需要安装必要的依赖。你可以使用以下命令在终端中安装Parcel、TypeScript和Mobx：

npm install --save-dev parcel-bundler typescript @parcel/transformer-typescript mobx mobx-react

创建React项目

现在，你可以使用以下命令在终端中创建一个新的React项目：

parcel init

这将在项目目录中创建一个新的"src"目录。所有React代码都应该放在"src"目录中。

配置TypeScript

接下来，你需要在"src"目录中创建一个新的"tsconfig.json"文件。你可以使用以下命令在终端中创建一个新的"tsconfig.json"文件：

touch tsconfig.json

然后，你需要将以下内容添加到"tsconfig.json"文件中：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true
  }
}

创建主组件

现在，你可以使用以下命令在终端中创建一个新的"App.tsx"文件：

touch src/App.tsx

然后，你需要将以下内容添加到"App.tsx"文件中：

import React, { Component } from 'react';
import { observer } from 'mobx-react';

@observer
class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default App;

运行项目

最后，你可以使用以下命令在终端中运行项目：

parcel src/index.html

这将在浏览器中打开一个新的选项卡，显示"Hello, world!"。

总结

现在，你已经成功地使用Parcel、TypeScript和Mobx创建了一个简单的React项目。你可以在这个项目的基础上进一步开发你的React应用。