基于Webpack4和React hooks搭建项目的方法


Posted in Javascript onFebruary 05, 2019

面对日新月异的前端,我表示快学不动了: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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中获取元素索引的函数
Sep 10 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 #Javascript
小程序页面动态配置实现方法
Feb 05 #Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 #Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 #Javascript
vue实现的树形结构加多选框示例
Feb 02 #Javascript
javascript中floor使用方法总结
Feb 02 #Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 #Javascript
You might like
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python super()方法原理详解
2020/03/31 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
中文系学生自荐信范文
2013/11/13 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
单位更名证明
2015/06/18 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS