Build react development environment

Time:2020-3-22

Use yarn package management tools, build tools based on webpack, build react development environment

Build react development environment

Because some software installation is related to the system environment, you need to select the corresponding system version according to your system environment.

Running environment of this paper

system:macos
react:16.8.6
react-dom:16.8.6
webpack:4.36.1

Yarn

Yarn is a fast, reliable and secure dependency management tool, which is open-source for Facebook

Yarn performs package installation, management, release and other operations through a rich set of commands.

Many functions of yarn and NPM are the same, and the metadata format of package is the same, so it can be migrated to yarn painlessly.

Chinese document: https://yarn.bootcss.com/docs

MacOS system installation yarn

brew install yarn

In an empty directory, initialize a new project with yarn

yarn init

React

React JavaScript library for building user interface

Official document: https://zh-hans.reactjs.org/

Installation project running depends on react package and react DOM package

yarn add react react-dom

Installation project development depends on webpack and webpack cli package

yarn add -D webpack webpack-cli html-webpack-plugin

Configure the webpack compilation project

Create project directory

mkdir -p src/js src/pages

Preparation of initial project documents

// html
vi src/pages/index.html 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

// javascript
vi src/js/index.js

alert('hello')

Write webpack configuration file

vi webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    mode: 'development',
    // entrance
    entry: {
        app: './src/js/index'
    },
    // output
    output: {
        filename: "[name].js",
        path: path.join(__dirname, 'build')
    },
    //Plug in, an HTML webpack plugin is used here. When compiling, the compiled JS file will be automatically introduced into the HTML file
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
}

module.exports = config;

Edit the package.json file and add a scripts command build

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

Using web pack to package and run on the command line

yarn run build

If there is no error, two files app.js and index.html will appear in the build directory under the project directory

You can start a web server to run the files in the build directory

If there is no error above, we will develop and configure webpack to compile react project

Writing files

vi /src/js/index.js

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, World!</h1>,
    document.getElementById('root')
);

React uses a JSX syntax and needs to be compiled with Babel

Babel document: https://www.babeljs.cn/setupා

Install Babel

yarn add -D babel-loader @babel/core

Write webpack configuration file

vi webpack.config.js

vi webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    mode: 'development',
    // entrance
    entry: {
        app: './src/js/index'
    },
    // output
    output: {
        filename: "[name].js",
        path: path.join(__dirname, 'build')
    },
    //Plug in, an HTML webpack plugin is used here. When compiling, the compiled JS file will be automatically introduced into the HTML file
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
}

module.exports = config;

Installing Babel’s preset for react

Document: https://www.babeljs.cn/docs/b

yarn add -D @babel/preset-react

Add. Babelrc configuration file and write

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

Ready to run webpack again

yarn run build

Use web server again to run the files under the build directory for testing

OK, we have basically completed the construction of development environment here

optimization

We found that the packaged app.js file was too large. App.js packed the source code of react and react DOM into the app.js file. We need to extract it. React and react DOM can use the CDN address given on the official website, and be manually imported into the index.html file.

Configure webback again

vi webpack.config.js

vi webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    mode: 'development',
    // entrance
    entry: {
        app: './src/js/index'
    },
    // output
    output: {
        filename: "[name].js",
        path: path.join(__dirname, 'build')
    },
    //Plug in, an HTML webpack plugin is used here. When compiling, the compiled JS file will be automatically introduced into the HTML file
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
    // filtration
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    }
}

module.exports = config;

Introducing react CDN into index.html file

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin></script>
    <script crossorigin></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

Run the webpack package again

yarn run build

Check whether the app.js file is small after packing?

Start a web server again to run the test

summary

There are many front-end tools, which vary greatly. Different versions may have different configurations. Therefore, we need to learn to read the relevant official documents. All of them are based on the official documents. We need to copy the relevant configurations on the documents without knowing their meanings. Instead, we need to put limited energy into the project business itself.

Original link: https://www.mi360.cn/articles