如何配置react环境

如何配置react环境

一、配置react开发环境

1. 点击下方链接，下载相应平台的nodejs进行安装。

http://nodejs.cn/download/

2. 运行cmd、terminal等终端输入node -v、npm -v 进行测试，看是否正确安装。

二、使用Webpack构建React项目

1. 使用NPM配置React环境

首先创建一个文件夹，the_first_React

进入到创建好的目录，npm init，然后一路回车

新建src目录，在src中新建js文件夹，并在js中新建index.js文件

npm install --save react react-dom babelify babel-preset-react
npm install babel-preset-es2015 --save 安装一些依赖包

2. webpack热加载配置

新建webpack.config.js文件（注意：webpack2以后，loaders改为rules）

var webpack = require('webpack');
var path = require('path');
module.exports = {
    mode: 'production',
    entry: './src/js/index.js',
    output: {
        path:path.resolve(__dirname),
        filename: 'bundle.js'
    },
    module:{
        rules:[{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        },
        {
            test: /\.css$/,
            //CSS模块化用注释部分
            // loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
            //Ant Design 样式用一下部分
            loader: "style-loader!css-loader"
        },
        //配置less
        {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader"
        }]
    },
};

安装 webpack：npm install -g webpack
全局安装webpack-dev-server：npm install -g webpack-dev-server
项目中安装 webpack-dev-server：npm install webpack-dev-server --save
项目中安装webpack： npm install webpack --save
项目中安装babel-loader：npm install babel-loader --save
项目中安装 babel-core：npm install babel-core --save

安装完所有的包后，可以查看项目中自动生成的package.json文件，查看是否安装成功。

cmd、Terminal输入 webpack，生成bundle.js文件，将index.js进行打包。

3. 在html文件中引入bundle.js即可

配置package.json文件，添加start和build两行

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },

4. 使用npm start，即可自动刷新bundle.js，同时可以自动打开locahost:8080。当修改index.js文件时，页面会自动进行刷新

好了，到此为止，你已经用webpack构建了自己的第一个React项目了。

更多React相关技术文章，请访问React答疑栏目进行学习！

以上就是如何配置react环境的详细内容，更多请关注易知道|edz.cc其它相关文章！