Vue项目从webpack3.x升级webpack4完全指南

近日,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本。其中有一些细节还是需要记录一下,以免过两天就忘记了。

原先的环境

  • 项目原先通过Vue-cli 2.9.3 版本构建,
  • 原先使用的webpack 3.x版本

首先需要对基础包进行更新(package.json)

  • webpack 更新到4.x版本,泡面这里更新到了4.28.3
  • 更新webpack-dev-server,泡面更新到了3.1.14版本,
  • 安装webpack-cli,泡面安装的是3.2.1版本

继续阅读Vue项目从webpack3.x升级webpack4完全指南

复习Javascript原型链

现在我们在日常的工作中由于有各种大神造好的轮子,导致我们在业务开发中已经很少能经常性接触到开发低层的一些事情。有时候就要时不时的给自己充充电,否则我们就只能用降龙十八掌吓唬人了,根本没有内功 :P

原型对象和构造函数

我们从一个构造函数开始:

function Person (name) {
  this.name = name
}
var person = new Person('Jack')

我们在声明它的时候,JS会自动生成一个与其对应原型对象(原型对象是对象),该构造函数会有一个内部属性,名为prototype指向原型对象,你可以通过Person.prototype来访问其中的内容,这也就是我们通常在原型对象上挂载属性和方法的方式。

继续阅读复习Javascript原型链

快速解决Vue项目打包样式中静态资源路径问题

最近在使用基于Vue-cli构建的项目中,使用Webpack打包时,在样式表中引入的background-image路径,在生产环境无法显示.

导致该问题是因为:
1. 生产环境路径与开发环境不一致
2. 生产打包后,样式中的相对路径由webpack变为了绝对路径

继续阅读快速解决Vue项目打包样式中静态资源路径问题

React 学习笔记之 Redux-saga

首先,这个redux-sagaredux-thunk 做的是同样的事情, 就是解决我们在redux中做异步的事情. 但 redux-saga 所涉及到的知识点和代码的复杂程度上都要复杂一些.

redux-saga 是基于ES6 的 Generator来实现的异步请求数据.

这是一个Generator例如:

    function* g() {
        var res = yield 1 + 2
        return res
    }

以上就是一个用同步方式来实现异步请求的Generator 函数. 更多的需要参考其文档. 这里就吧赘述了,因为我们的目的是记录学习 Redux-sagareact中的应用.

继续阅读React 学习笔记之 Redux-saga

React – Redux 学习之Redux-thunk & applyMiddleware

在之前的练习中,我们一直在使用同步的方式进行状态管理, 那么在Redux中,我么如何使用异步的方式进行状态更新呢?
这里需要用到Redux的中间件applyMiddelwareredux-thunk:

首先,我们应该在创建Store的时候注入中间件

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(
    reducers,
    // 注入中间件
    applyMiddleware(thunk)
)

继续阅读React – Redux 学习之Redux-thunk & applyMiddleware

React – Redux 学习之表现组件和容器组件

我们一般会用到 表现组件容器组件.

表现组件

我们一般认为表现组件的目的仅仅是通过获得的Props 来渲染页面.例如我在学习制作一个TodoList时.
Redux在这里维护一个List数组,而我需要通过action来获取该List.
因此我们会有表现组件TodoList, 如下:

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import Todo from './Todo'

class TodoList extends Component {
    render () {
        //
        const todos = this.props.todos
        const { toggleTodo, removeTodo } = this.props.actions
        //
        return (
            
    { todos.map( todo => { return toggleTodo(todo.id)} remove={() => removeTodo(todo.id)} /> }) }
) } } TodoList.propTypes = { todos: PropTypes.array, actions: PropTypes.object } export default TodoList

继续阅读React – Redux 学习之表现组件和容器组件