Create React App From Scratch

606 阅读3分钟

create-react-app等工具将新建一个完整的React项目所需的步骤抽象了出来,让开发者能够将工作重点放在开发项目上,而不用大费精力去关注新建项目的细节。作为React的初学者,了解React项目是如何工作的,如何集成Typescript、Yarn 2和Webpack,有助于更好地理解React架构。

本文将介绍在不使用create-react-app的情况下如何一步步地新建一个包管理工具为Yarn 2(berry)、构建工具为Webpack、使用Typescript编写的React项目。

1. 新建项目目录,并初始化项目

# 新建目录
mkdir create-react-app-from-scratch
cd ./create-react-app-from-scratch

# 初始化,根据提示输入信息
yarn init
# yarn版本默认为1,需要手动设置为2
yarn set version berry

这样一个基于yarn2的项目就新建好了,yarn2默认开启了zero-installs特性,不包含node_modules文件夹,但是想用上yarn2的一些其他特性,还需要费上不少功夫。

2. 安装相关包

  1. 安装babel,webpack

    # babel, webpack相关依赖
    yarn add @babel/core @babel/preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader css-loader style-loader --dev
    
  2. 安装typescript,并配置yarn

    yarn add typescript ts-loader --dev
    # yarn的typescript插件,安装包时会自动安装@types/...包
    yarn plugin import typescript
    
    # 因为没有node_modules目录,pnpify能将关于node_modules的调用转到PnP
    yarn add @yarnpkg/pnpify --dev
    # vscode支持
    yarn pnpify --sdk vscode
    
  3. 安装react

    yarn add react react-dom
    

yarn2的zero-installs特性: 安装完上述包后可以发现项目路径下并没有node_modules目录,如果将项目上传到远程仓库,然后克隆到本地,不需要运行yarn install安装依赖就可以直接运行。

yarn的typescript插件:package.json中可以看见,yarn自动安装了@types/react, @types/react-dom依赖。

3. 创建入口文件

  1. 项目html入口,public/index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Music</title>
      </head>
    
      <body>
        <div id="root"></div>
        <noscript> You need to enable JavaScript to run this app. </noscript>
      </body>
    </html>
    
  2. React入口,src/index.tsx

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    
    const App = () => {
      return (
        <div>
        	<h1>Create React App From Scratch</h1>
        	<p>
        		Create webpack-typescript-yarn-berry-based react app from scratch.
        	</p>
        </div>
      )
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

4. 配置Webpack

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
  template: './public/index.html',
  filename: './index.html'
})

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, '.public'),
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /(.yarn)/,
        use: [
          {loader: 'ts-loader'}
        ]
      }
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  plugins: [htmlPlugin]
};

5. 配置Babel

.babelrc

{
  "presets": ["@babel/preset-react"]
}

6. 配置Typescript

配置tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "CommonJS",
    "lib": ["dom", "ESNext"],
    "target": "es2020",
    "jsx": "react",
    "allowJs": true
  },
  "include": ["./src/**/*"],
  "exclude": [".yarn/**/*", "dist/**/*"]
}

4. 配置Webpack已配置过ts-loader。

7. 配置package.json

添加运行和打包命令

{
  "scripts": {
    "start": "webpack serve",
    "build": "webpack build"
  }
}

8. 运行!!!

  1. 运行yarn start,打开浏览器进入127.0.0.1:8080

    image-20210531232713559.png

    大功告成,可以看出项目已经成功运行了!

  2. 运行yarn build,项目成功打包在dist目录下,打开index.html显示与上图相同。

    image-20210531233922362.png

至此已经成功一步一步地搭建了基于Typescript、Yarn 2和Webpack的项目!

麻雀虽小,五脏俱全。

9. 后话

当前的webpack配置只支持对ts文件的解析,如果还需css、scss等文件的解析,需要在webpack.config.js中配置对应的loader。项目中其他配置文件也需要随着项目的需求逐个完善。

最后如果项目要上传github的话,可以按照如下配置。

.gitignore

/.yarn/*
!/.yarn/releases
!/.yarn/plugins
!/.yarn/sdks

# Swap the comments on the following lines if you don't wish to use zero-installs
# Documentation here: https://yarnpkg.com/features/zero-installs
!/.yarn/cache
#/.pnp.*

# dist
/dist

.gitattributes

/.yarn/** linguist-vendored