资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/构建React开发环境

构建React开发环境

yck / 2384人阅读

摘要：使用包管理工具，基于构建工具，搭建开发环境由于一些软件安装跟系统环境相关，故这里查看本文档，需要根据自己的系统环境，选择相对应的系统版本。

使用Yarn包管理工具，基于Webpack构建工具，搭建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 




    
    Title







// 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(
    
Hello, World!
,
    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




    
    Title

再次运行webpack打包

yarn run build

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

再次启动一个webserver运行测试

总结

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

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

超融合服务器 云服务器 docker构建环境 java环境构建 react开发神器 docker react 开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105862.html

相关文章

  • webpack工程化集成React技术栈（一）

    项目开始前，我们先聊一聊关于项目的一些说明。该项目起始于2017年初，当时公司主要技术栈为gulp+angular，鉴于react的火热的生态，在公司决定研发bss管理系统时选用react开发，目的也是为react native打下基础，以解决后期公司大前端技术栈的逐步成熟。（当时没有选择vue开发的主要原因是weex生态还不够特别成熟），既然决定换新，项目的构建也跟着一起换，从gulp转向火热的...

    tianhang 评论0 收藏0

  • React文档翻译系列（一）安装

    摘要：文档翻译系列一安装原文地址原文本系列是针对文档进行的翻译，因为自己在学习的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的接收，并没有给自己带来很好的效果，所以后来决定把文档的原文从头到尾看一遍。 React文档翻译系列（一）安装 原文地址：原文 本系列是针对React文档进行的翻译，因为自己在学习react的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的...

    Fourierr 评论0 收藏0

  • 企业级React项目的个人构建总结

    摘要：隔壁老王今日行程不同的内容使用这种方法就可以将我们得所有路由写在一起了，可能有人觉得每次都要写引入很麻烦，有没有其他更好用的办法，在讲的时候会说到这里就先跳过。 前言 距离上篇文章已经好长一段时间了，这两个星期公司派驻到京东方这边出差负责入驻项目团队的前端工作。这段时间从零搭建一下前端项目，这次给的时间比较充裕，思考的也比较多。以前也常有搭过前端项目，但是给的时间都比较紧，因此很多问题...

    simpleapples 评论0 收藏0

  • 构建前端项目

    摘要：解决思路服务器端渲染服务器端和前端公用同一个应用，然后通过构建工具及配置，确定哪些组件需要再服务器端渲染，那些组件需要再客户端渲染。服务器端渲染，由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运行。 分离 为什么需要 前后端分离、web服务器与static服务器分离: 前端与后端耦合 (需求) 自动化、工程化的构建前端的代码 (基础条件) 模块化、组件化，项目共享代码 (...

    mindwind 评论0 收藏0

  • webpack优化

    摘要：使用要给项目构建接入动态链接库的思想，需要完成以下事情把网页依赖的基础模块抽离出来，打包到一个个单独的动态链接库中去。接入已经内置了对动态链接库的支持，需要通过个内置的插件接入，它们分别是插件用于打包出一个个单独的动态链接库文件。 webpack优化 查看所有文档页面：全栈开发，获取更多信息。原文链接：webpack优化，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。 ...

    ChanceWong 评论0 收藏0

发表评论

登陆后可评论

0条评论

yck

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<