React 系列文章： npm 手动搭建React 运行实例 (新手必看)

Posted 2020-09-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 系列文章： npm 手动搭建React 运行实例 (新手必看)相关的知识，希望对你有一定的参考价值。

摘要

刚接触React 开发, 在摸索中构建react 运行环境，总会遇到各种坑；本文，将用最短时间解决webpack+react 环境搭建问题.

1、如果你还没有React基础看这里.

2、如果不知道webpack是啥？请看这里.

3、如果你还没有装npm 看这里.

目录

一、webpack+react 运行实例.
二、webpack 运行环境配置分析.
三、如何手动搭建一个webpack+react 运行环境.

一、webpack+react 运行实例

1、实例代码

源代码下载地址：https://github.com/xiangxiong/React/tree/blog-react/blogs

2、目录结构

│  index.html     # 输出文件
│  package.json   # 项目信息
│  webpack.config.js # webpack 打包配置
│
└─src
        bundle.js  # 打包输出文件
        index.js    # 入口文件

3、快速运行

1 npm install
2 npm run dev

二、webpack 运行环境配置分析

1、 Index.html 首页入口文件

将项目中全局的样式和打包压缩的文件引入到该页面，React会寻找root节点，将子模块渲染到首页。

<html>
<head>
</head>
<body>
   <div id="root"></div>
   <script src="src/bundle.js"></script>
</body>
</html>

2. package.json 项目引用组件管理文件

此文件配置重点注意如下节点：main 指的是入口文件的Js，Scripts 指npm运行的命令， dependencies 配置项目依赖的组件.

{
  "name": "mall-admin",
  "version": "1.0.0",
  "description": "Hello React",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot --inline"
  },
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  },
  "author": "Shawn",
  "license": "ISC"
}

3.webpack.config.js

该文件为webpack 打包输出文件，entry 入口文件目录设置，output 为打包之后输出bundle.js， loaders 配置为文件加载配置.

var webpack = require(‘webpack‘);
var path = require(‘path‘);
module.exports = {
  context:path.join(__dirname), // 目录
  entry:"./src/index.js", // 入口文件
  module:{
    loaders:[ // 将ES6 转换为 ES5
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: ‘babel-loader‘,
        query: {
          presets: [‘react‘, ‘es2015‘]
        }
      }
    ]
  },
  output:{ // 输出文件配置
    path:__dirname,
    filename:"./src/bundle.js" // 输出文件（打包压缩文件）
  }
};