安装构建并运行React项目

发表于 2021-01-26 分类于前端

构建一个React项目需要安装Nodejs、Webpack以及React相关包。

每个脚本都需要解析器，即构建一个运行时环境，而nodejs就是为js脚本提供一个运行时环境。对于JavaScript，在前端html中的js是由浏览器进行解析，主要是对DOM的操作，而nodejs解析的js脚本主要是对磁盘文件等进行操作，搭建起一个服务。

webpack是一个模块管理工具，将项目各文件进行打包，在项目部署时可通过直接调用打包后生成的资源文件，方便快捷。

一、安装Nodejs

在官网根据自己的系统选择对应版本进行下载

nodejs

下载完成后开始安装，可自定义所要安装的位置，其他选项按照默认即可。
打开命令行，输入 node -v 并回车，查看是否安装成功，若出现nodejs版本表示已成功安装。

node-v

二、npm初始化

npm是包管理器，在开发过程中，通过 npm install 包名称 命令安装所需的包，即可使用别人已写好的模块，省去下载源码解压安装等繁琐步骤。npm包管理器集成在nodejs中，当上一步nodejs安装成功后，在命令行输入 npm -v ，显示npm的版本号，表示npm也已成功安装。

npm-v

新建一个React项目的文件夹（这里我命名为test），打开命令行，进入该文件夹，使用命令 npm init 初始化项目，初始化过程中可按提示输入项目名称、版本、描述、入口文件、启动命令等信息，也可选择一路回车。

npm init

此时会在该文件夹下生成一个package.json文件，该文件中记录的是刚才项目初始化时所输入的项目相关信息。

packagejson

三、安装Webpack

在项目文件夹下使用命令 npm install webpack webpack-cli webpack-dev-server --save-dev 安装webpack和webpack-dev-sever。

其中webpack负责打包工作，方便文件管理，把所有静态文件打包成一个bundle.js资源文件，当项目部署时只需项目入口文件和打包好的bundle.js文件即可。最新版本的webpack需要搭配webpack-cli使用，要编译成功还必须安装webpage-cli。

安装webpack-dev-server包是为了方便在本地实时预览页面，是一个小型的nodejs Express服务器，为静态文件提供web服务，实现热加载，即当更改并保存前端代码后，webpack自动编译，并在浏览器中自动刷新显示最新页面，从而实时预览更改后的页面状态。webpack-dev-sever在本地开发时非常方便，在项目部署到服务器后的生产环境中不需要用到，因此在安装命令中使用–save-dev表示把包安装在dev节点上。

installwebpack

安装完成后，在项目文件夹下生成node_modules文件夹和package-lock.json文件，其中node_modules文件夹中存放的就是项目开发过程中安装的各种模块。

package-lock.json

在项目文件夹下手动创建一个webpack.config.js文件，在该文件中配置项目的入口文件、打包后的文件存放位置等信息。配置如下：

var path = require("path");
var webpack = require('webpack');
module.exports = {
    entry: { app: ['./src/main.js'] },  //前端入口文件
    output: {
    path: path.resolve(__dirname, "./build"), //打包后文件的存放位置
    publicPath: "/build/",   //打包后访问资源时加的路径前缀
    filename: "bundle.js"    //打包生成的文件名
    },
    resolve: {
    extensions: ['*','.js','.jsx']  //当代码中引入模块时若找不到指定文件，则添加这些后缀
    },  
    devServer: {
    historyApiFallback: true,
    host:'0.0.0.0',
    hot: true,
    inline: true,
    progress: true,
    port:5000
    },
    plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE.ENV':"development"
    }),
    new webpack.HotModuleReplacementPlugin()
    ]
};

四、安装React

在项目文件夹下使用命令 npm install react react-dom --save-dev 命令安装react和react-dom模块。

其中react模块时react的核心库，react-dom模块提供关于DOM的相关操作，将react的虚拟DOM进行编译更新DOM。

install react

由于在react中支持JSX格式代码，即可以在js中直接写html标签，因此在react中各组件文件以js或jsx后缀都可以，若要把jsx文件转为js文件需要安装jsx-loader包。此外，要把react框架中编写的代码使用webpack打包后还需要使用babel包对其进行编译，

因此使用命令 npm install jsx-loader babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev 安装所需这些包，babel-core是babel的核心库，babel-preset-react可把react的语法转换为ES5规范。

install babel

在webpack.config.js文件中添加如下配置:

module: {
  loaders: [
    {test:/\.jsx$/, loaders:['jsx?harmony']}
  ],
   loaders:[
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      include: path.resolve(__dirname),
      query: {
        presets: ['es2015', 'react']
      }
    },
  ]
},

安装好这些包后查看package.json文件中的“devDependencies”一项记录了在dev节点安装的所有模块。

package.json

打开package.json文件，修改“scripts”节点，在该节点中可自定义不同命令，并为不同命令赋予含义。在该节点中添加

"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --inline"

表示使用npm run build命令时将依据webpack.config.js文件中的配置对项目进行编译打包。使用npm run start命令时将启动nodejs小型服务器，开启本地预览。

五、测试react项目

新建build文件夹，并在该文件夹下新建main.js文件index.html作为页面入口。在index.html文件中编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>test</title>
</head>
<body>
    <div id="page"></div>    
</body>
<script src="./bundle.js"></script>
</html>

新建src文件夹，并在该文件夹下新建main.js文件作为前端文件入口。可自定义入口文件位置，只需与webpack.config.js文件中的设置一致即可。

main.js position

在main.js文件中编写如下代码：

import React from 'react';  //引入react核心库
import ReactDOM from 'react-dom';   //引入react-dom

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('page')); //定义所要渲染的内容

在项目文件夹目录下打开命令行，使用命令npm run build打包文件，此时会出现如下报错

webpack version error

在packge.json文件中可以看到安装的webpack和webpack-cli版本

webpack version

因此报错原因是在webpack 4以后的版本中将webpack本身和webpack-cli分开来更好地管理它们，而在webpack 3中，两者在同一个包中，所以可以通过降级来解决。

首先使用 npm uninstall webpack webpack-cli 命令将原先安装的webapck和webpack-cli包移除，再使用 npm install webpack@3.8.0 webpack-cli@3.3.12 --save-dev

new webpack version

再次使用 npm run build 命令，此时又会出现如下报错

babel version error

原因是babel-loader的版本不匹配，若想用babel-core 6的版本需要使用babel-loader 7的版本，而通过查看package.json文件可以看到安装的babel-core版本为6.26.3，而babel-loader的版本为8.2.2，同样可以通过给babel-loader降级来解决。

babel version