react.js学习-react环境搭建

1.简介

框架介绍
angular，vue，react三大框架三分天下，各有特点。angular框架使用typescript编写，以及依赖注入，rxjs和路由等功能集成，让其成为一个较为重的框架，适合一些大型项目的构建，个人本身也是比较喜欢angular框架。但在国内的环境下，却让angular的处境相当尴尬。在国内更多人使用vue和react。与angular不同，react.js只是实现了mvc中的“V”这一环节。
react有几大特点：(1) 使用jsx语法，（也可以使用typescript，即tsx）。（2）使用虚拟dom和diff算法实现视图的刷新。

2. react开发环境的搭建

环境搭建
在react的官网提供了官方的脚手架创建react的项目，具体的操作如下：
安装前提是已经安装了node.js，当前要求是node.js >=6 和 npm >= 5.2

 npx create-react-app my-app

经过一定的时间安装后，在创建的目录可生成项目文件，主要有node_modules库文件、public文件、src文件等。官方脚手架是基于webpack + es6进行构建，所以已经集成的webpack的功能，安装完成启动项目：

cd my-app
npm run start

浏览器中输入localhost:3000，看见react大大的logo，则项目已启动。

3. 切换npm为国内镜像

考虑到国外npm下载时速度过慢不稳定问题。当然也可以使用淘宝的国内镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装创建react项目指令

cnpm install -g create-react-app

完了后，以后创建react项目则直接使用命令即可

create-react-app my-app

4. 手动搭建React

其实，为了对构建项目有更深的认识，更建议自己手动构建react项目，同理，自行构建项目也是基于webpack打包工具进行配置。当前使用的是webpack4进行项目构建。
具体的构建流程如下：

(1) 项目创建及依赖

项目初始化

创建项目目录，如react-demo

cd react-demo
npm init 或者 npm init -y

babel

用来处理react jsx语法 以及 es6 es7语法，转换为es5语法

 npm install --save-dev babel-core babel-loader@7.1.5 babel-plugin-import babel-preset-latest babel-preset-react babel-preset-stage-0 --registry=https://registry.npm.taobao.org

webpack相关

webpack包，webpack启动的相关插件和加载器

npm install --save-dev clean-webpack-plugin html-webpack-plugin webpack webpack-cli  webpack-dev-server webpack-merge --registry=https://registry.npm.taobao.org

css预处理器

处理css或scss等语法，如果不用到sass，则node-sass sass-loader可以不用安装

npm install --save-dev style-loader node-sass css-loader sass-loader --registry=https://registry.npm.taobao.org

url及file loader

用于加载文件或url资源

npm install --save-dev file-loader url-loader --registry=https://registry.npm.taobao.org

react相关库

react-router-dom为路由相关库，可以选择不安装

npm install --save react react-dom react-router-dom --registry=https://registry.npm.taobao.org

最后查看package.json:

(2) 配置webpack

配置webpack主要包括入口、出口、loader、dev-server等内容。这些内容一般用webpack.config.js配置。为了方便管理，这里配置将webpack配置中的打包配置和开发调试配置分别用webpack.prod.conf.js和webpack.dev.conf.js进行配置，基本配置则用webpack.config.js。

配置webpack.config.js

在项目根目录创建webpack.config.js文件

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

module.exports = {
    // 输入
    entry: {
        app: './src/index.js',
    },
    // 输出
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    // 解析的文件类型
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    // loader
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'sass-loader', 'css-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: 'images/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: 'fonts/[name].[hash:7].[ext]'
                }
            },
        ]
    },
    // 插件
    plugin: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body'
        })
    ]
};

配置webpack.dev.conf.js

配置前需要安装依赖： webpack-merge

npm i webpack-merge -D --registry=https://registry.npm.taobao.org

配置如下：

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.config');

const path = require('path');
const webpack = require('webpack');

module.exports = merge(baseWebpackConfig, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: false,
        historyApiFallback: true,
        compress: true,
        inline: true,
        hot: true,
        host: '127.0.0.1',
        port: 4100
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        nodeEnv: 'development',
    }
});

配置webpack.prod.conf.js

配置前，安装压缩代码的插件

npm i --save uglifyjs-webpack-plugin --registry=https://registry.npm.taobao.org

具体配置如下：

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.config');

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
    // 模式
    mode: "production",
    // 调试工具
    devtool: '#source-map',
    // 输出
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: "js/[name].[chunkhash].js",
    },
    // 插件
    plugins: [
        new CleanWebpackPlugin(['dist', 'build'], {
            root: path.resolve(__dirname, '../'),
        }),
        new webpack.HashedModuleIdsPlugin(),
    ],
    // 代码分离相关
    optimization: {
        nodeEnv: 'production',
        minimizer: [new UglifyJSPlugin()],  //压缩插件
        runtimeChunk: {
            name: 'manifest'
        },
        // 代码分割配置
        splitChunks: {
            minSize: 30000, //合并前模块文件的体积
            minChunks: 1,   //最小被引用次数
            maxAsyncRequests: 5, //最多异步模块，生成的公共模块文件
            maxInitialRequests: 3,  //入口模块，公共模块文件最大文件数
            name: false,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'initial',
                }
            }
        }
    }
});

配置babelrc文件

{
    "presets": ["latest", "react", "stage-2"],
    "plugins": []
}

修改package.json scripts内容

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot --inline --progress --colors --config config/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "webpack --progress --colors --config config/webpack.prod.conf.js"
  }

运行npm run dev

如果控制没报错，并输出如下内容，说明dev配置成功

运行npm run build

完了之后，项目目录会生成dist目录，压缩打包的项目代码在dist目录内

项目目录