建立react項目的幾種方法

時間 2019-11-11

標籤建立 react 項目幾種方法欄目 React 简体版

原文原文鏈接

前言：

構建React項目的幾種方式：javascript

構建：create-react-app 快速腳手架
構建：generator-react-webpack
構建：webpack一步一步構建

1）構建：create-react-app 快速腳手架

FaceBook官方發佈了一個無需配置的、用於快速構建開發環境的腳手架工具create-react-app。html

creat-react-app優勢java

無需配置：官方的配置堪稱完美，幾乎不用你再配置任何東西，就能夠上手開發項目。
高集成性：集成了對React，JSX，ES6和Flow的支持。
自帶服務：集成了開發服務器，你能夠實現開發預覽一體化。
熱更新：保存自動更新，讓你的開發更簡單。
全兼容性：自動處理CSS的兼容問題，無需添加-webkit前綴。
自動發佈：集成好了發佈成品功能，編譯後直接發佈，而且包含了sourcemaps功能。

create-react-app的安裝node

npm install -g create-react-app       # Windows
sudo npm install -g create-react-app  # Linux

　　建立React項目react

create-react-app my-app
cd my-app
npm start

2）構建：generator-react-webpack

npm install -g yo   # 在全局安裝generator-react-webpack以前，先安裝yeoman
npm install -g generator-react-webpack

mkdir new-react-demo
cd new-react-demo
yo react-webpack
npm start

3）構建：webpack一步一步構建

安裝webpackwebpack

在安裝webpack以前，咱們先創建一個文件夾並進入，固然你能夠用其餘方法，我這裏就用命令了。web

mkdir react-webpack
cd react-webpack
npm init
npm install --save-dev webpack

　　配置webpack.config.jsnpm

在項目根目錄創建webpack.config.js文件，這個文件是進行webpack配置的，先創建基本的入口和出口文件。json

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

　　新建index.html文件，在根目錄新建index.html文件，並引入webpack設置中的出口文件，代碼以下。瀏覽器

<!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>React全家桶-jspang</title>
</head>
<body>

</body>
<!--引入出口文件-->
<script src="./dist/index.js"></script>
</html>

測試webpack配置

經過上面的步驟，配置好了wbpack，如今能夠測試一下咱們webpack配置是否有問題。在路口文件中寫入下面的代碼，並進行打包測試。

/app/index.js文件

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

document.body.appendChild(component());

這段代碼很是簡單，不做過多的解釋。若是你對這個代碼看不懂，再去啃兩邊犀牛或者紅寶書。

加入打包命令

打開package.json文件，在scripts屬性中加入build命令。

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

在終端中輸入npm run build ，就能夠看到打包結果了。若是沒有出現錯誤，在瀏覽器中打開，能夠看到咱們的編寫結果。到這部爲止，咱們正確安裝了webpack，並進行了出入口的配置，也看到了webpack的輸出結果。

開發服務器配置

你會很容易的發現，咱們如今缺乏一個實時更新的服務，那動手立刻配置一個。

在命令行安裝webpack-dev-server,在終端中輸入下面的命令。

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

安裝完成後，配置webpack.config.js文件。

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

配置好後再packeage.json裏增長一個scripts命令，咱們起名叫server。

"scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open"
  },

這裏的–open是直接打開瀏覽器的意思。這些都配置完成後，就能夠在終端輸入npm run server 看到結果了。

自動刷新瀏覽器

在咱們修改代碼時，如今並不能自動刷新瀏覽器，不會當即呈現咱們編寫的代碼結果，而時要再次npm run build才能夠。其實只要在出口文件配置中加一個publicPath:’temp/’,而後在index.html引入JS時寫這個temp地址就能夠實時預覽了。

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

index.html文件引入JS

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

Babel安裝配置

在webpack中配置Babel須要先加入babel-loader，這裏咱們繼續使用npm來進行安裝，可是咱們通常還須要支持es2015和React，因此要安裝四個包。

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

　　這裏安裝四個包的安裝，這個四個包不能省略。安裝後你會在package.json裏看到這些包的版本。

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "webpack": "^3.8.1",
  "webpack-dev-server": "^2.9.3"
}

配置module

在安裝完成後，能夠到webpack.config.js裏配置module，也就是配置咱們常說的loader。

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

編寫React

webpack經過上邊的步驟，基本已經配置完成了，這裏咱們寫一個React文件來進行測試一下。在進行編寫React文件前，要記得安裝React和React-dom這兩個包。

安裝React和React-dom

cnpm install --save react react-dom

安裝完成後，咱們改寫app/index.js文件，把原來原生的JavaScript代碼改爲React代碼。

index.js

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

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

由於上邊咱們加了一個app的選擇器，因此在index.html中增長一個div標籤，並把id設置成app。

index.html

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

都配置完了，咱們能夠用以前配置好的npm run server 命令進行預覽了。若是在瀏覽器中看到了Hello JSPang 這段文字，說明咱們的配置成功了，之後就能夠愉快的進行開發了。

總結：其實本身配置React開發環境在實際工做中也並很少，由於咱們的配置畢竟不是很成熟，並且支持較少。這裏學習只是爲了你更好的掌握React構建過程和設置參數，實際工做中儘可能使用合適的腳手架工具。

轉載自：jspang.com/2017/10/22/react-all-01/

webpack.config.js的完整代碼

var path = require('path');


module.exports = {
    // 入口文件
    entry: './app/index.js',

    // 服務器配置
    devServer: {
        contentBase: './',
        host: 'localhost',
        compress: true,
        port: 1717
    },

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。