基於Webpack4和React hooks搭建項目的方法

原創 Jeff.Zhong 2019-02-08 11:13

這篇文章主要介紹了基於Webpack4和React hooks搭建項目的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

面對日新月異的前端，我表示快學不動了:joy:。 Webpack 老早就已經更新到了 V4.x，前段時間 React 又推出了 hooks API。剛好春節在家裏休假，時間比較空閒，還是趕緊把 React 技術棧這塊補上。

網上有很多介紹 hooks 知識點的文章，但都比較零碎，基本只能寫一些小 Demo 。還沒有比較系統的，全新的基於 hooks 進行搭建實際項目的講解。所以這裏就從開發實際項目的角度，搭建起單頁面 Web App 項目的基本腳手架，並基於 hooks API 實現一個 react 項目模版。

Hooks最吸引人的地方就是用 函數式組件 代替面向對象的 類組件 。此前的 react 如果涉及到狀態，解決方案通常只能使用 類組件 ，業務邏輯一複雜就容易導致組件臃腫，模塊的解藕也是個問題。而使用基於 hooks 的 函數組件 後，代碼不僅更加簡潔，寫起來更爽，而且模塊複用也方便得多，非常看好它的未來。

webpack 4 的配置

沒有使用 create-react-app 這個腳手架，而是從頭開始配置開發環境，因爲這樣自定義配置某些功能會更方便些。下面這個是通用的配置 webpack.common.js 文件。

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const { HotModuleReplacementPlugin } = require('webpack');

module.exports = {
  entry: './src/index.js',//單入口
  output: {
    path: resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'//輸出文件添加hash
  },
  optimization: { // 代替commonchunk, 代碼分割
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,//css modules
              localIdentName: '[name]___[local]___[hash:base64:5]'
            },
          },
          'postcss-loader', 'sass-loader']
      },
      {  /* 
        當文件體積小於 limit 時，url-loader 把文件轉爲 Data URI 的格式內聯到引用的地方
        當文件大於 limit 時，url-loader 會調用 file-loader, 把文件儲存到輸出目錄，並把引用的文件路徑改寫成輸出後的路徑 
        */
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 1000
          }
        }]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),//生成新文件時，清空生出目錄
    new HtmlWebpackPlugin({
      template: './public/index.html',//模版路徑
      favicon: './public/favicon.png',
      minify: { //壓縮
        removeAttributeQuotes:true,
        removeComments: true,
        collapseWhitespace: true,
        removeScriptTypeAttributes:true,
        removeStyleLinkTypeAttributes:true
       },
    }),
    new HotModuleReplacementPlugin()//HMR
  ]
};

接着基於 webpack.common.js 文件，配置出開發環境的 webpack.dev.js 文件，主要就是啓動開發服務器。

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 4001,
    hot: true
  }
});

生成模式的 webpack.prod.js 文件，只要定義了 mode:'production' ， webpack 4 打包時就會自動壓縮優化代碼。

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
 mode: 'production',
 devtool: 'source-map'
});

配置 package.js 中的 scripts

{
 "scripts": {
   "start": "webpack-dev-server --open --config webpack.dev.js",
   "build": "webpack --config webpack.prod.js"
 }
}

Babel 的配置

babel的 .babelrc 文件， css module 包這裏推薦 babel-plugin-react-css-modules 。

react-css-modules既支持全局的css(默認 className 屬性)，同時也支持局部css module( styleName 屬性)，還支持css預編譯器，這裏使用的是 scss 。

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
    [
      "react-css-modules",
      {
        "exclude": "node_modules",
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        },
        "generateScopedName": "[name]___[local]___[hash:base64:5]"
      }
    ]
  ]
}

React 項目

下面是項目基本的目錄樹結構，接着從入口開始一步步細化整個項目。

├ package.json
├ src
│ ├ component // 組件目錄
│ ├ reducer  // reducer目錄
│ ├ action.js
│ ├ constants.js
│ ├ context.js
│ └ index.js
├ public // 靜態文件目錄
│ ├ css
│ └ index.html
├ .babelrc
├ webpack.common.js
├ webpack.dev.js
└ webpack.prod.js

狀態管理組件使用 redux ， react-router 用於構建單頁面的項目，因爲使用了 hooks API，所以不再需要 react-redux 連接狀態 state 。

<Context.Provider value={{ state, dispatch }}>基本代替了 react-redux 的 ** `。

// index.js
import React, { useReducer } from 'react'
import { render } from 'react-dom'
import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
import Context from './context.js'
import Home from './component/home.js'
import List from './component/list.js'
import rootReducer from './reducer'
import '../public/css/index.css'

const Root = () => {
  const initState = {
    list: [
      { id: 0, txt: 'webpack 4' },
      { id: 1, txt: 'react' },
      { id: 2, txt: 'redux' },
    ]
  };
  // useReducer映射出state，dispatch
  const [state, dispatch] = useReducer(rootReducer, initState);
  return <Context.Provider value={{ state, dispatch }}>
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/list" component={List} />
        <Route render={() => (<Redirect to="/" />)} />
      </Switch>
    </Router>
  </Context.Provider>
}
render(
  <Root />,
  document.getElementById('root')
)

constants.js， action.js 和 reducer.js 與之前的寫法是一致的。

// constants.js
export const ADD_COMMENT = 'ADD_COMMENT'
export const REMOVE_COMMENT = 'REMOVE_COMMENT'
// action.js
import { ADD_COMMENT, REMOVE_COMMENT } from './constants'

export function addComment(comment) {
 return {
  type: ADD_COMMENT,
  comment
 }
}

export function removeComment(id) {
 return {
  type: REMOVE_COMMENT,
  id
 }
}

list.js

import { ADD_COMMENT, REMOVE_COMMENT } from '../constants.js'

const list = (state = [], payload) => {
  switch (payload.type) {
    case ADD_COMMENT:
      if (Array.isArray(payload.comment)) {
        return [...state, ...payload.comment];
      } else {
        return [...state, payload.comment];
      }
    case REMOVE_COMMENT:
      return state.filter(i => i.id != payload.id);
    default: return state;
  }
};
export default list

reducer.js

import { combineReducers } from 'redux'
import list from './list.js'

const rootReducer = combineReducers({
 list,
 //user
});

export default rootReducer

最大區別的地方就是 component 組件，基於 函數式 ，內部的表達式就像是即插即用的插槽，可以很方便的抽取出通用的組件，然後從外部引用。相比之前的 面向對象 方式，我覺得 函數表達式 更受前端開發者歡迎。

  • useContext 獲取全局的 state
  • useRef 代替之前的 ref
  • useState 代替之前的 state
  • useEffect則可以代替之前的生命週期鉤子函數
//監控數組中的參數，一旦變化就執行
useEffect(() => { updateData(); },[id]);

//不傳第二個參數的話，它就等價於每次componentDidMount和componentDidUpdate時執行
useEffect(() => { updateData(); });

//第二個參數傳空數組，等價於只在componentDidMount和componentWillUnMount時執行， 
//第一個參數中的返回函數用於執行清理功能
useEffect(() => { 
  initData(); 
  reutrn () => console.log('componentWillUnMount cleanup...'); 
}, []);

最後就是實現具體界面和業務邏輯的組件了，下面是其中的List組件

// list.js
import React, { useRef, useState, useContext } from 'react'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router-dom'
import Context from '../context.js'
import * as actions from '../action.js'
import Dialog from './dialog.js'
import './list.scss'

const List = () => {
  const ctx = useContext(Context);//獲取全局狀態state
  const { user, list } = ctx.state;
  const [visible, setVisible] = useState(false);
  const [rid, setRid] = useState('');
  const inputRef = useRef(null);
  const { removeComment, addComment } = bindActionCreators(actions, ctx.dispatch);

  const confirmHandle = () => {
    setVisible(false);
    removeComment(rid);
  }

  const cancelHandle = () => {
    setVisible(false);
  }

  const add = () => {
    const input = inputRef.current,
      val = input.value.trim();
    if (!val) return;
    addComment({
      id: Math.round(Math.random() * 1000000),
      txt: val
    });
    input.value = '';
  }

  return <>
    <div styleName="form">
      <h3 styleName="sub-title">This is list page</h3>
      <div>
        <p>hello, {user.name} !</p>
        <p>your email is {user.email} !</p>
        <p styleName="tip">please add and remove the list item !!</p>
      </div>
      <ul> {
        list.map(l => <li key={l.id}>{l.txt}<i className="icon-minus" title="remove item" onClick={() => {
          setVisible(true);
          setRid(l.id);
        }}></i></li>)
      } </ul>
      <input ref={inputRef} type="text" />
      <button onClick={add} title="add item">Add Item</button>
      <Link styleName="link" to="/">redirect to home</Link>
    </div>
    <Dialog visible={visible} confirm={confirmHandle} cancel={cancelHandle}>remove this item ?</Dialog>
  </>
}

export default List;

項目代碼

https://github.com/edwardzhong/webpack_react

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

React全家桶項目搭建

吳大勳 2019-02-23 00:19:23

React全家桶+AntD 共享單車後臺管理系統開發

qq5b4607c0882c6 2019-02-22 23:51:33

React 技術棧系列教程

amtree 2019-02-22 23:28:18

前端知識 | React Native Animated動畫淺談

海說軟件 2019-02-22 23:16:55

前端知識 | React Native手勢響應淺析

海說軟件 2019-02-22 23:16:31

前端知識 |淺談React setState

海說軟件 2019-02-22 23:16:29

搭建React Native開發環境

betree 2019-02-22 22:41:10

React Native視頻播放(iOS)

maoyazhi 2019-02-22 18:18:16

BootStrap, React, Vue的比較

lic722 2019-02-22 17:49:37

Redux入門

sendoffice 2019-02-22 16:37:41

【React】react項目引入echarts插件

廢柴碼農 2019-02-21 12:57:34

趣談React 的由來

littleyu 2019-02-20 12:54:14

React中使用CSS

grain先森 2019-02-16 13:33:09

svn 利用hooks自動更新

Leyin 2019-02-22 20:59:50

gitlab web hooks 應用

collglle_cx 2019-02-22 15:16:31