Constructing React Development Environment

Time:2019-8-14

Using Yarn package management tools and Web pack-based building tools to build a React development environment

Constructing React Development Environment

Because some software installations are related to the system environment, it is necessary to select the corresponding system version according to the system environment.

The 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 with open source faceback

Yarn executes package installation, management, distribution and other operations through a rich set of commands.

Many functions of Yarn and Npm are the same, and the metadata format of the package is the same, so it can migrate to Yarn painlessly.

Chinese Document: https://yarn.bootcss.com/docs…

MacOS System Installation Yarn

brew install yarn

Initialize a new project with Yarn in an empty directory

yarn init

React

JavaScript libraries for react to build user interfaces

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

Installation project runs on react packages and react-dom packages

yarn add react react-dom

Installation project development depends on webpack and webpack-cli packages

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

Configure the webpack compilation project

Create a project catalog

mkdir -p src/js src/pages

Write project initial document

// 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')

Writing 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, which uses an html-webpack-plugin plug-in, will automatically import compiled JS files into HTML files when compiled
    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"
},

Packing with webpack, running on the command line

yarn run build

If there are no errors, 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 files in the build directory

If there are no errors above, we develop and configure the webpack compiler React project

Writing documents

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, requiring Babel compilation

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

Install Babel

yarn add -D babel-loader @babel/core

Writing 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, which uses an html-webpack-plugin plug-in, will automatically import compiled JS files into HTML files when compiled
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
}

module.exports = config;

Install 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"]
}

Everything is ready, run the webpack package again

yarn run build

Running the files in the build directory with web server again for testing

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

optimization

We found that the packaged app.js file is too large. App.js packaged the react and react-dom source code into the app.js file. We need to extract them. Reaction and react-dom can use the CDN address given on the official website and be introduced manually in the index.html file.

Configure webpack 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, which uses an html-webpack-plugin plug-in, will automatically import compiled JS files into HTML files when compiled
    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 CDN of react 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 webpack packaging again

yarn run build

Check if the app. JS file is small after packaging?

Start a web server run test again

summary

Front-end tools are numerous, ever-changing, different versions and related configurations may be different, so we should learn to look at the relevant official documents, all the official documents as the criteria, appropriate swallow dates, without knowing it, directly copy the relevant configurations on the documents, and put limited energy into the project business itself.

Link to the original text: https://www.mi360.cn/articles…