构建React开发环境

FelixRegan 发布于26天前
0 条问题
使用Yarn包管理工具,基于Webpack构建工具,搭建React开发环境

React

由于一些软件安装跟系统环境相关,故这里查看本文档,需要根据自己的系统环境,选择相对应的系统版本。

本文运行环境

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

Yarn

Yarn 是一个快速、可靠、安全的依赖管理工具,又 faceback开源

Yarn 通过一组丰富的命令执行包的安装、管理、发布等操作。

Yarn 与 Npm的许多功能是相同的,包的元数据格式也是一样的,因此可以无痛迁移到 Yarn。

中文文档:https://yarn.bootcss.com/docs...

MacOS系统安装Yarn

brew install yarn

在一个空目录下,用 Yarn初始化一个新项目

yarn init

React

react用于构建用户界面的 JavaScript

官方文档:https://zh-hans.reactjs.org/

安装项目运行依赖 react包 和 react-dom包

yarn add react react-dom

安装项目开发依赖 webpack 和 webpack-cli 包

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

配置webpack编译项目

创建项目目录

mkdir -p src/js src/pages

编写项目初始文件

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

编写webpack配置文件

vi webpack.config.js

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

const config = {
    mode: 'development',
    // 入口
    entry: {
        app: './src/js/index'
    },
    // 输出
    output: {
        filename: "[name].js",
        path: path.join(__dirname, 'build')
    },
    // 插件,这里使用一个 html-webpack-plugin插件,编译的时候会将编译的js文件自动引入html文件中
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
}

module.exports = config;

编辑package.json文件,添加一个scripts命令build

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

使用webpack打包,在命令行运行

yarn run build

如果没有出错的话,在项目目录下的build目录中会出现两个文件app.js和index.html

可以启动一个webserver来运行build目录中的文件

上面如果不出错的情况下,我们开发配置webpack编译React项目

编写文件

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使用一种jsx语法,需要使用babel编译

babel文档:https://www.babeljs.cn/setup#...

安装babel

yarn add -D babel-loader @babel/core

编写webpack配置文件

vi webpack.config.js

vi webpack.config.js

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

const config = {
    mode: 'development',
    // 入口
    entry: {
        app: './src/js/index'
    },
    // 输出
    output: {
        filename: "[name].js",
        path: path.join(__dirname, 'build')
    },
    // 插件,这里使用一个 html-webpack-plugin插件,编译的时候会将编译的js文件自动引入html文件中
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
}

module.exports = config;

安装babel对react的 preset

文档:https://www.babeljs.cn/docs/b...

yarn add -D @babel/preset-react

添加 .babelrc配置文件,并写入

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

一切就绪,再次运行webpack打包

yarn run build

再次使用webserver运行build目录下的文件,进行测试

ok,在这里基本就已经完成开发环境的搭建

优化

我们发现打包后的app.js文件太大,app.js将react和react-dom源码也打包进了app.js文件,我们需要将其摘出来,react和react-dom可以使用官网上给出的CDN地址,在index.html文件用手动引入。

再次配置webpack

vi webpack.config.js

vi webpack.config.js

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

const config = {
    mode: 'development',
    // 入口
    entry: {
        app: './src/js/index'
    },
    // 输出
    output: {
        filename: "[name].js",
        path: path.join(__dirname, 'build')
    },
    // 插件,这里使用一个 html-webpack-plugin插件,编译的时候会将编译的js文件自动引入html文件中
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
    // 过滤
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    }
}

module.exports = config;

在index.html文件中引入react的cdn

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

再次运行webpack打包

yarn run build

检查打包后app.js文件是否小了?

再次启动一个webserver运行测试

总结

前端工具繁多,千变万化,不同的版本,可能相关配置都不一样,所以我们要学会看相关官方文档,一切以官方文档为准则,适当的囫囵吞枣,不用知其意,直接copy文档上的相关配置,而将有限的精力放入项目业务本身。

原文链接:https://www.mi360.cn/articles...

查看原文: 构建React开发环境

  • bigmeercat
  • beautifulbutterfly
  • crazymeercat
  • crazymouse
  • beautifulduck
  • whitemeercat
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。