React项目构建

目前React项目挺火的。自己学习了一下，总结了两种react项目构建的方法.

这两种方法的前提是你安装了node.js。

第一种是通过create-react-app，这也是官网教程中的方法。它一个无需配置的、用于快速构建开发环境的脚手架工具。

① 首先在全局安装create-react-app

npm install -g create-react-app  # Window

npm install -g create-react-app  # Linux

②生成react项目

生成的项目文件结构如下：

③cd到生成的项目文件夹中，npm start

第二种方法：webpack 一步步构建

①使用webpack对项目初始化，执行完后项目文件夹中会生成一个package.json文件

npm init

②安装webpack，安装成功后会在package文件中看到版本号，当然你也可以用cnpm安装，这样比较快一点

npm install --save-dev webpack

③配置webpack.config.js，在项目文件夹根目录中新建一个webpack.config.js，并写入下面的代码，这主要是生成入口文件和出口文件，说白了就是打包前的文件和打包后的文件，

var path =require('path');
module.exports = {
    //入口文件
    entry:'./app/index.js',
    //出口文件
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    }
}

④新建index.html文件，并移入出口文件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack-react</title>
</head>
<body>
    
</body>
<script src="./dist/index.js"></script>
</html>

⑤测试webpack配置

在入口文件（./app/index.js）中写入下面的代码，并进行打包测试。

function component(){
    var element = document.createElement('div');
    element.innerHTML = ('Hello React');
    return element;
}

document.body.appendChild(component());

在package.josn的scripts属性中添加build命令

"scripts": {    "build": "webpack"  },

然后 npm run build 执行，打开index.html，检测一下app/index.js的结果,如果成功则能看见"hello React",

现在我们需要搭建一个开发服务器,安装webpack-dev-server,

cnpm install --save-dev webpack-dev-server

安装完成后，配置webpack.config.js文件,

devServer:{
    contentBase:'./',
    host:'localhost',
    compress:true,
    port:1717
}

并在package.json中的scripts标签中新增server指令,--open只自动启动浏览器

 "server": "webpack-dev-server --open"

在终端输入npm run server,就能成功启动我们的项目,如果我需要设置自动刷新,否则我们需要每次都去run build.我们需要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。

  //出口文件  
    output:{  
        filename:'index.js',  
        path:path.resolve(__dirname,'dist'),
        publicPath:'temp/'
    }

并在index.html引入

<script src="./temp/index.js"></script>

其次我们需要安装babel,并支持es2016和React，所以要安装四个包。

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

安装成功后可以在package.josn文件中看见他们的版本号.可以到webpack.config.js里配置module，也就是配置我们常说的loader。

module:{
    rules:[
        {
            test:/\.js$/,
            exclude:/node_modules/,
            loaders:"babel-loader",
            query:{
                presets:['es2015','react']
            }
        }
    ]
}

通过上面的一些配置,webpack基本配置完成,但是我们还需要安装react和react-dom,才为我们编写react代码服务.

cnpm install --save react  react-dom

安装成功后我们需要改写app/index.js和index.html里的代码

app/index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>Hello JSPang</div>,
    document.getElementById("app")
);

index.html

在body中增加容器

<div id="app"></div>

现在可以输入npm start 启动我们的项目.预览效果

猜你喜欢