好吧，笔者是一个后端开发。以前是做C/S项目出身，毫无Web前端基础，为了更好地理解Web开发，去年开始尝试使用公司使用的前端框架React来搭建团队内部使用的系统。通过这个项目的开发，也让我更好地理解了前端同事的不容易，更加坚定了写好接口文档的决心。 最近在把自己做的这个内部系统迁移到公司的统一平台的时候，遇到了一个小问题，公司要求打包的目录名必须为dist，而我这个项目是使用create-react-app搭建的，所以打包的目录...
less的安装配置 安装react-app-rewired，react-app-rewire-less，babel-plugin-import插件 执行命令： npm install react-app-rewired --save-dev npm install react-app-rewire-less --save-dev npm install babel-plugin-import --save-dev配置package.json文件 找到scripts属性，修改start的值为react-app-rewired start，如下图: 根目录下创建config-overrides.js文件 const { injectBabelPlugin } = require(react-app-rew...
项目中通常会使用iconfont作为图标显示的解决方案，这里介绍下如何在项目中配置。 准备工作 首先配置好项目，关键需要注意FontClass/Symbol 前缀和Font Family两个配置。当我们配置好项目之后，就可以导出样式文件，复制如下图中的css链接中的内容备用。正餐开始 创建Icon.js文件。 import React from react; import classNames from classnames; import ./iconfont.less;// 上文中从iconfont中复制的css文件内容 import ./icon.cs...
最近接手一个React项目，在IE下碰到了俩问题 IE11报错如下：跟踪一下之后，发现是一些其他的npm包里面用到了startsWith这个方法，可以自己polyfill一下： if (!String.prototype.startsWith) {String.prototype.startsWith = function (search, pos) {return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search} }不过加prototype的方法毕竟不好，可以通过引入@babel/polyfill解决，在入口文件中引入import '@bab...
背景公司的前端项目部署方式比较简单，整个过程基本上是手动的；目标通过工具实现以下几个任务： 编译、部署自动化；选择指定版本进行回滚；区分不同的分支（环境）；技术方案 选用 jenkins 作为部署工具；也便于后续 CI 的接入；使用 docker 进行编译，确保每次编译的环境的稳定；步骤步骤一：搭建 Jenkins搭建 Jenkins 有很多方案，这里选择使用 docker 搭建。 docker-compose.yml 的内容如下： version: 3 services:fejenkins:u...
或许你当前的项目还没有到应用Redux的程度，但提前了解一下也没有坏处 首先我们会用到哪些框架和工具呢？React UI框架 Redux 状态管理工具，与React没有任何关系，其他UI框架也可以使用Redux react-redux React插件，作用：方便在React项目中使用Redux react-thunk 中间件，作用：支持异步action|--src|-- store Redux目录|-- actions.js|-- index.js|-- reducers.js|-- state.js|-- components 组件目录|-- Test.j...
背景最近使用 create-react-app 创建了一个项目。但是众所周知的是，这个脚手架创建的项目并没有默认加入 Eslint 等 lint 插件来规范代码。考虑到项目中很多项目没有使用类似的代码检查工具，为了规范开发。这次有必要记录一下流程。 使用 Eslint 流程 1. 安装 Eslint首先，先安装 Eslint 到项目本地（全局安装亦可）。 npm --save-dev install eslint安装完成之后，我们先创建基础的 .eslintrc.yml （建议使用 .yml 格式，json/js...
在React搭建的SPA项目中页面的title是直接写在入口index.html中，当路由在切换不用页面时，title是不会动态变化的。那么怎么让title随着路由的切换动态变化呢？1.在定义路由时增加title属性。{path: "/regularinvestment",component: Loadable({loader: () => import(./../../business/Regularinvestment/index),loading: PageLoading}),title: "这是自定义的标题"} 2.在路由的index.js获取到自定义的title设置页面标题即可。const...
模块热替换(Hot Module Replacement)HMR是webpack最令人兴奋的特性之一，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。HMR是一个非常值得去深入研究的东西，它绝不是目前我们看到的大多数技术文章说的配置一个hot参数这么简单，有兴趣的小伙伴可以去看看它的实现原理，目前为止我也只看过一点点。 其实实...
不久前写了一篇webpack 4 升级迁移 这里简单说下 React 项目的一些配置； 首先我们新建项目 react-web ，然后进入项目初始化 package.json ； cd react-web && npm init接下来我们安装 webpack ，这里需要注意一点，是命令行已经单独提取出来了，我们不仅需要安装 webpack 还需要安装 webpack-cli 。 npm i webpack webpack-cli --save-dev接下来我们开始安装和 react 相关的依赖包； npm i @babel/core babel-loader @babel/prese...
1webpack简介webpack是目前最流行的打包工具之一，是一个为前端模块打包构建而生的工具，它既吸取了大量已有的方案优点和教训，也解决了很多前端开发过程中已有的痛点，如代码的拆分与异步加载，对非js资源的支持，强大的loader设计使得它更像是一个构建平台，而不是打包工具。 2webpack,react开发环境 1）新建一个项目文件夹,进入此文件夹，创建package.json文件(npm init命令) 2）确认已安装webpack,web pack-dev-server模块 3）...
因为对网页SEO的需要，要把之前的React项目改造为服务端渲染，经过一番调查和研究，查阅了大量互联网资料。成功踩坑。 选型思路：实现服务端渲染，想用React最新的版本，并且不对现有的写法做大的改动，如果一开始就打算服务端渲染，建议直接用NEXT框架来写项目地址：https://github.com/wlx200510/react_koa_ssr脚手架选型：webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x主要心得：对React的相关知识更加熟悉...
本文介绍了从零开始搭建一个react项目开发，分享给大家，具体如下： 1、npm init 生成 package.json 文件.2、安装各种需要的依赖:npm install --save react - 安装React.npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话，这里就是安装react-native。npm install --save-dev webpack - 安装Webpack, 现在最流行的模块打包工具.npm install --save-dev webpack-dev-serv...
前言 或许你当前的项目还没有到应用Redux的程度，但提前了解一下也没有坏处，本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢？ React UI框架 Redux 状态管理工具，与React没有任何关系，其他UI框架也可以使用Redux react-redux React插件，作用：方便在React项目中使用Redux react-thunk 中间件，作用：支持异步action 目录结构 Tips：与Redux无关的目录已省略 |--src|-- store Redux目录|-- actions.js|-- i...
为了重构客户端项目,我正在寻找一种安全的方法来查找(和删除)未使用的代码. 您使用什么工具在大型React项目中查找未使用/无效的代码？我们的产品已经开发了几年,并且很难手动检测不再使用的代码.但是,我们确实尝试删除尽可能多的未使用的代码. 对于一般策略/技术(除特定工具之外)的建议也将受到赞赏. 谢谢解决方法:首先, 很好的问题,在大型项目中,编码人员通常尝试进行多行代码测试,结果结尾时,很难找到未使用的代码. ...