Tools like create-React-app abstract away the steps required to create a full React project, allowing developers to focus on developing the project instead of focusing on the details of how to create it. As a beginner to React, understanding how the React project works and how to integrate Typescript, Yarn 2, and Webpack will help you better understand the React architecture.
This article describes how to create a Typescript React project with the package management tool Yarn 2(Berry) and build tool Webpack without using create-React-app.
1. Create a project directory and initialize the project
Create a directory
mkdir create-react-app-from-scratch
cd ./create-react-app-from-scratch
Initialize, enter the information as prompted
yarn init
The default yarn version is 1. You need to manually set it to 2
yarn set version berry
Copy the code
So we have a new project based on Yarn2. By default, Yarn2 has zero-消 息 enabled, which does not include the node_modules folder, but we will have to wait for some other features of Yarn2 to be used.
2. Install related packages
-
Install Babel, Webpack
# Babel, webpack related dependencies yarn add @babel/core @babel/preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader css-loader style-loader --dev Copy the code
-
Install typescript and configure YARN
yarn add typescript ts-loader --dev # yarn typescript plugin that automatically installs @types/... package yarn plugin import typescript Since there is no node_modules directory, pnpify can forward calls on node_modules to PnP yarn add @yarnpkg/pnpify --dev # vscode support yarn pnpify --sdk vscode Copy the code
-
Install the react
yarn add react react-dom Copy the code
After installing the package, you can discover that there is no node_modules directory under the project path. If you upload the project to the remote repository and clone the project to the local computer, you can run the operation without running yarn Install.
As you can see in package.json, YARN automatically installs @types/react and @types/react-dom dependencies.
3. Create an import file
-
Project HTML entry, public/index.html
<! DOCTYPEhtml> <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> Copy the code
-
React entry, 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')); Copy the code
4. Configuration 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]
};
Copy the code
5. Configuration Babel
.babelrc
{
"presets": ["@babel/preset-react"]}Copy the code
6. Configuration Typescript
Configuration tsconfig. Json
{
"compilerOptions": {
"outDir": "./dist/"."module": "CommonJS"."lib": ["dom"."ESNext"]."target": "es2020"."jsx": "react"."allowJs": true
},
"include": ["./src/**/*"]."exclude": [".yarn/**/*"."dist/**/*"]}Copy the code
Ts-loader has been configured in 4. Configuring Webpack.
7. The configuration package. Json
Add run and package commands
{
"scripts": {
"start": "webpack serve"."build": "webpack build"}}Copy the code
8. Run!!
-
Run yarn start, open the browser, and go to 127.0.0.1:8080
When you’re done, you can see that the project has run successfully!
-
Run YARN Build, and the project is successfully packaged in the dist directory. Open index.html and the output is the same as the figure above.
Step by step, you’ve built a Typescript, Yarn 2, and Webpack based project!
Small as a sparrow is, it has all the organs.
9. The latter
The current Webpack configuration only supports resolution of TS files. If you need to resolve CSS and SCSS files, you need to configure the loader in webpack.config.js. Other configuration files in the project also need to be refined on a case-by-case basis as required by the project.
Finally, if the project wants to upload Github, it can be configured as follows.
.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 /distCopy the code
.gitattributes
/.yarn/** linguist-vendored
Copy the code