基於webpack的React項目搭建(一)

来源:http://www.cnblogs.com/raion/archive/2017/12/23/8053799.html
-Advertisement-
Play Games

前言 工欲善其事，必先利其器。為了更好的學習React，我們先簡要的把開發環境搭建起來。本文主要介紹使用webpack搭建React項目，如果你對React或es6的基礎語法還不瞭解，建議先去學習學習。 基礎環境 基礎環境 node/npm webpack webpack 現代JavaScript程 ...


 

前言 

工欲善其事，必先利其器。為了更好的學習React，我們先簡要的把開發環境搭建起來。本文主要介紹使用webpack搭建React項目，如果你對React或es6的基礎語法還不瞭解，建議先去學習學習。

  • 基礎環境

node/npm

  • webpack

現代JavaScript程式應用的模塊打包器。它主要分析你的項目結構，找到JavaScript模塊以及其他一些瀏覽器不能直接運行的拓展語言（Scss、less、TypeScript），將其轉換和打包為合適的格式供瀏覽器使用。

  • 項目創建

創建一個文件夾first-react，進入該目錄，在該目錄下打開一個終端，執行npm init。根據提示輸入內容，也可以直接按回車鍵跳過。執行完後目錄中會多一個package.json文件，這是項目的核心文件，包含包依賴管理和腳本任務。 

mkdir first-react
cd first-react 
npm init

  • 安裝react, react-dom, webpack

在項目根目錄下執行下麵命令，其中--save的含義是項目上線運行所需的包，即生產環境（--save-dev是開發環境所需的包）。

npm install react react-dom webpack --save

  •  項目目錄和源碼

--your project
   |--build(項目打包輸出目錄)
       |--bundle.js(該文件是由webpack打包生成)
       |--index.html　　
   |--src
       |--index.js
   |--webpack
       |--webpack.config.js
   |--package.json

　　index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    /* react DOM*/
    </div>
    <script src="../build/bundle.js"></script>
</body>
</html>

　　index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

render(
    <div>Hello React!</div>,
    document.getElementById('app')
);

　　webpack.config.js

const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程式從這裡開始編譯,__dirname當前根目錄, ../表示上一級目錄, ./同級目錄
    output: {
        path: path.resolve(__dirname, '../build'), // 輸出的路徑
        filename: 'bundle.js'  // 編譯後文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

這裡如果在項目根目錄直接進行webpack構建會報錯(構建命令：webpack --config webpack/webpack.config.js)，因為我們使用了react，react是使用jsx語法實現的，而jsx不能直接被瀏覽器識別和執行，所以這裡需要引入Babel庫進行轉碼。

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save

　　babel-loader: babel載入器

　　babel-preset-es2015: 支持es2015

　　babel-preset-react: jsx 轉換成js

最後再次進行構建，然後點擊build/index.html，即可看到Hello React！

webpack --config webpack/webpack.config.js // 更多webpack命令盡在webpack --help查閱

　　接下來我們進行一下簡單的優化，執行效果一致。

index.js

import React from 'react';
import { render } from 'react-dom';
import App from './App'

const renderDom = Component => {
    render(
        <Component />,
        document.getElementById('app')
    );
}
renderDom(App);

 在項目根目錄下新建json文件.babelrc，將babel的配置單獨提取出來。

{
  "presets": [
    "es2015",
    "react"
  ]
}

webpack.config.js文件作相應的調整。

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程式從這裡開始編譯,__dirname當前根目錄, ../表示上一級目錄, ./同級目錄
    output: {
        path: path.resolve(__dirname, '../build'), // 輸出的路徑
        filename: 'bundle.js'  // 編譯後文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

在src下新建App.js。

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>Hello React!</div>
        );
    }
}

  •  以腳本方式執行構建

編輯package.json，加入自定義腳本，在項目根目錄執行npm run dev即可達到上面一樣的效果。

"scripts": {
    "dev": "webpack --config webpack/webpack.config.js"
  }

  •  搭建前端伺服器

可以發現，每次都要重新構建然後刷新index.html，才能得到最新的效果，開發效率極低。幸好webpack-dev-server可以幫助我們解決這個問題，webpack-dev-server是一個小型的靜態文件伺服器，為webpack打包的資源文件提供Web服務。並且提供自動刷新和Hot Module Replacement（模塊熱替換：前端代碼變動後無需刷新整個頁面，只把變化的部分替換掉）。OK，讓我們開始安裝和配置webpack-dev-server。

npm install webpack-dev-server --save　　

 在項目根目錄下創建bin目錄，進入bin目錄，創建devserver.js文件，編輯如下

'use strict'

const WebpackDevServer = require('webpack-dev-server');
const config = require('../webpack/webpack.config');
const webpack = require('webpack');
const path = require('path');
const compiler = webpack(config);

const server = new WebpackDevServer(compiler, {
    contentBase: path.resolve(__dirname, '../build'), //預設會以根文件夾提供本地伺服器，這裡指定文件夾
    historyApiFallback: true, //在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html
    port: 9090, //如果省略，預設8080
    publicPath: "/"
});
server.listen(9090, 'localhost', function (err) {
    if (err) throw err
})

 　　編輯package.json，創建一條腳本

"scripts": {
    "dev": "node bin/devserver"
  }

 　　最後，單獨在該項目根目錄起一個終端，執行npm run dev，啟動成功後訪問http://localhost:9090。如果看到Hello React!，恭喜你。 最後再做一下簡單的測試，將App.js修改如下後保存，可以發現，項目會自動重新編譯運行，刷新瀏覽器即可看到最新的更改。好了，暫時先寫這麼多。

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello React</h1>
                <h2>Hello React</h2>
            </div>
        );
    }
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 抓包工具介紹
    【github】http://www.liu12fei08fei.top/blog/14capture.html 抓包工具介紹 抓包工具介紹 whistle 啟動whistle 重啟whsitle 停止whistle 調試模式啟動whistle(主要用於查看whistle的異常及插件開發) 更新wh ...
  • android如何獲取SHA1
    某些Google Play服務（例如Google登錄和App Invites）要求我們提供簽名證書的SHA-1，以便google paly為我們的應用創建OAuth2客戶端和API密鑰。 那麼如何獲取SHA-1呢？ 獲取SHA-1有多種方法，這裡我們介紹用命令行的方法。（使用keytool，註意，k ...
  • Android從入門到進階——佈局
    一、組件 1、UI組件 （Android.view.View的子類或者間接子類） 2、容器組件（Android.view.ViewGroup子類或者間接子類） 二、UI組件：TextView，Spinner（下拉式列表），ListView（列表） 容器組件：RelevantLayout，Linear ...
  • 【quickhybrid】架構一個Hybrid框架
    前言 雖然說本系列中架構篇是第一章，但實際過程中是在慢慢演化的第二版中才有這個概念， 經過不斷的迭代，演化才逐步穩定 明確目標 首先明確需要做成一個什麼樣的框架？ 大致就是： 一套API規範（統一 與`iOS`），所有API非同步調用（防止阻塞） 提供大部分原生功能的API（包括很多常用的功能給 使用 ...
  • JavaScript數組排序reverse()和sort()
    JavaScript中數組排序的方法有兩個reverse()和sort()。 reverse()方法會反轉數組項的順序： sort()方法會按照字元串升序排列數組項，sort()方法會調用每個數組項的tostring()方法，即使數組中的每一項都是數值，sort()方法比較的也是字元串： 這種方式在 ...
  • anime.js 實戰：實現一個帶有描邊動畫效果的覆選框
    在網頁或者是APP的開發中，動畫運用得當可以起到錦上添花的作用。正確使用動畫，不但可以有助於用戶理解交互的作用，還可以大大提高網頁應用的魅力和使用體驗。並且在現在的網頁開發中，動畫已經成為了一個設計的標準，變得越來越重要。特別是在一些和用戶交互的地方，使用動畫能更好的給用戶以反饋，提升用戶的操作體驗 ...
  • VueJS 開發常見問題集錦
    由於公司的前端開始轉向 VueJS，最近開始使用這個框架進行開發，遇到一些問題記錄下來，以備後用。 主要寫一些 官方手冊 上沒有寫，但是實際開發中會遇到的問題，需要一定知識基礎。 涉及技術棧 CLI: Vue CLI UI: Element HTML: Pug(Jade) CSS: Less Jav ...
  • .16-淺析webpack源碼之打包無關流程梳理
    之前忽略了一個點，如下： 在compiler對象的fs模塊掛載完後，會對傳入的插件進行載入，這個過程在內置插件載入之前。 插件部分單獨講解，所以這個地方先暫時略過。 內置插件全部plugin完畢後，會檢測編譯的回調函數： vue-cli的腳手架生產模式的構建文件build.js中就很明顯的傳了一個回 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類