摘要:配置方式找到文件如需添加路由则在里面添加,同时需要后端更改配置除了上面的路径,其他路径全部指向单页应用多路由预渲染指南使用说明源码为方便快速构建项目,本例所有配置的代码均放在项目中。
写在前面
每次构建react项目的时候都会配置一大堆东西,时间久了就会忘记怎么配置。为了方便自己记忆也为了其他开发者在构建react应用时能够快速开发,故作此记录。
本项目基于 create-react-app 脚手架进行配置。主要配置了一些项目开发中常用的方法,比如 webpack的 sass,redux、热加载、代理以及其他工具库的引入等等。初始化项目
首先,要先利用create-react-app创建一个react项目,可参考 https://github.com/facebookin...
安装 create-react-app
npm install -g create-react-app
创建一个应用程序
create-react-app my-app cd my-app
注:my-app是指项目的名称,用户可以自定义项目名称
这个时候可以在命令行输入
npm start : 启动项目就能看到项目启动页面了。
npm run build : 项目发布。
这样一个简单的react项目就初始化完毕了。
但是,默认所有配置是隐藏起来的,要想自定义配置,需要运行一个命令:npm run eject
此时会提示,该命令不可逆,是否继续,输入y,这样所有配置项就都出来了。会生成一个config文件夹,这时候也可以做一些定制化的配置了。
引入element-react UI框架会报错 ReferenceError: “Symbol”未定义
解决方案:
项目中引入babel-polyfill,在app.js中导入即可
配置webpack基于webpack的一些配置
配置sass脚手架默认没有配置sass,项目中如果使用sass需要多带带配置
1、安装依赖 npm install --save-d node-sass sass-loader
2、修改config下面的webpack.config.dev.js和webpack.config.prod.js,都需要修改,开发环境和发布环境是多带带的配置。
修改cssloader
将test: /.css$/, 修改为: test: /.(css|scss|sass)$/,即识别scss/sass文件
最后添加
sass-loader
别名在项目中方便我们快速引入文件。比如我们项目中有一个公共文件目录为src/util/tools,例如有以下文件结构
├── src │ ├── assets # 项目资源 │ │ └── ... │ ├── containers # 页面容器 │ │ └── pages │ │ └── pageA # 页面A │ │ └───a.js # a.js │ │── utils # 其他工具类 │ │ └── tools │ ├── index.js # webpack打包入口文件
在层级很深的组件内部a.js需要引入tools文件,我们会使用../../../util/tools去找到文件的相对位置,但是在使用webpack配置的别名后可以直接定位到/src目录下。
// 未使用别名 import tools from "../../../util/tools"; // 使用别名后 import tools from "@/util/tools"; // "@/" 指向 "src/"
配置方式
dev和prod环境都需要配置
在resolve/alias进行配置
其中 resolve 是一个自定义函数。
function resolve(dir) { return path.join(__dirname, "..", dir) }
也可以写成
"@": path.join(__dirname, "..", "src")配置热加载
create-react-app项目中配置的有热加载,我们只需要在项目入口文件index.js中启用热加载就行,直接在末尾添加
// index.js /* 热加载 */ if (module.hot) { module.hot.accept(); }配置代理服务器
在前端开发中请求接口经常会遇到跨域的问题,处理跨域的方式有很多,多数webpack是配置dev_server,但这种方法在create-react-app 生成的应用中无效,对于这种应用应在package.json处进行代理
// package.json "proxy": "http://api.enjoycut.com/" // 或者 "proxy": { "/article": { "target": "http://api.enjoycut.com/", "changeOrigin": true, "secure": false } } // 下面的方式没有配置过配置路由
react-router4的使用方式和以前的router版本使用方式不同
react-router4文档地址
配置redux 配置 @connect装饰器在项目中可以直接通过@connect方式访问redux
未配置
配置后
需要说明的是,这里用了装饰器,需要安装模块babel-plugin-transform-decorators-legacy
然后在package.json里面配置plugins
项目中其他工具配置 classnames在react 中切换className比较麻烦,简单的可以使用三目运算,但是复杂一点的class就比较麻烦了,比如这个稍微复杂点的div动态切换多个className, 推荐一个工具库,可以简单方便的切换className.
clsssnames使用文档
// 默认classNAme: "clip_item" // isActive === true 则添加className "clip_active" // is_dragging === true 则添加className "dragging" moment在项目中格式化时间的工具库,将时间格式化成你想要的任何格式!非常方便。
moment().format("MMMM Do YYYY, h:mm:ss a"); // 九月 10日 2018, 7:04:30 晚上 moment().format("ffffdd"); // 星期一 moment().format("MMM Do YY"); // 9月 10日 18 moment().format("YYYY [escaped] YYYY"); // 2018 escaped 2018 moment().format(); // 2018-09-10T19:04:30+08:00moment.js文档地址:http://momentjs.cn/
项目后期优化 antd按需加载一般情况下,我们按照antd官网使用方式在css中导入整个ui的样式,@import "~antd/dist/antd.css";,
比如我们在项目中只使用了Button,和Table,但是这样实际上加载了全部的 antd 组件的样式(对前端性能是个隐患);
因此我们需要使用按需加载,只加载我们使用过得组件样式。注意:如果是运行了eject ,webpack配置了babelrc: false ,多带带根目录新建.babelrc会报错的,需要在webpack.dev.js配置,在module模块 ,loader: require.resolve("babel-loader")对象中的plugins数组中添加这里只展示允许eject暴露了webpack配置文件的配置方式,未暴露webpack配置方式请参考https://segmentfault.com/a/11...
安装babel-plugin-import
npm install --save-dev babel-plugin-import
给 webpack 的 babel-loader plugins 加上 babel-plugin-import
需要修改两个文件 /config/webpack.config.prod.js 和 /config/webpack.config.dev.js (修改的内容一样,升级后的create-react-app合并为一个文件 webpack.config.js)找到加载 babel-loader 的地方,往他的 plugins 加入如下代码
[ require.resolve("babel-plugin-import"),// 导入 import 插件 { libraryName: "antd", //暴露antd style: "css" } ]最后形成的配置如下(create-react-app 版本不同最后的配置可能不一样,原理一样):
// Process application JS with Babel. // The preset includes JSX, Flow, TypeScript, and some ESnext features. { test: /.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, loader: require.resolve("babel-loader"), options: { customize: require.resolve( "babel-preset-react-app/webpack-overrides" ), plugins: [ [ require.resolve("babel-plugin-named-asset-import"), { loaderMap: { svg: { ReactComponent: "@svgr/webpack?-svgo,+ref![path]", }, }, }, ], // antd按需加载 [ require.resolve("babel-plugin-import"),// 导入 import 插件 { libraryName: "antd", //暴露antd style: "css" } ], ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true, cacheCompression: isEnvProduction, compact: isEnvProduction, }, },代码分隔(react-loadable)一个动态导入加载组件的高阶组件.未使用前
import Home from"./Home";使用后
import loadable from "@/utils/loadable" const Home = loadable(() => import("./Home "));loadable组件
import React from "react"; import Loadable from "react-loadable"; //通用的过场组件 const loadingComponent =()=>{ return ( ) }; //过场组件默认采用通用的,若传入了loading,则采用传入的过场组件 export default (loader,loading = loadingComponent)=>{ return Loadable({ loader, loading }); }参考链接
预渲染配置 (Prerender SPA Plugin)构建阶段生成匹配预渲染路径的 html 文件(注意:每个需要预渲染的路由都有一个对应的 html)。构建出来的 html 文件已有部分内容。如果在项目中同时使用代码分隔和预加载会导致页面闪屏。原因是会先加载预加载打包出来的html,渲染静态页面,然后会请求代码分隔后该页面的js。会导致html的root节点再次挂载。因此不推荐使用预加载的同时使用代码分隔。
配置方式
1.npm install prerender-spa-plugin
2.找到 /config/webpack.config.prod.js文件
const path = require("path") const PrerenderSPAPlugin = require("prerender-spa-plugin") module.exports = { plugins: [ ... new PrerenderSPAPlugin({ // Required - The path to the webpack-outputted app to prerender. staticDir: path.join(__dirname, "../build"), // Required - Routes to render. routes: ["/home", "/convert", "/trim", "/merge", "/watermark", "/remove", "/download"], }) ] }3.如需添加路由则在 routes 里面添加,同时需要后端更改ngnix配置
/ -> home/index.html /home -> home/index.html /convert -> convert/index.html /trim -> trim/index.html /merge -> merge/index.html /watermark -> watermark/index.html /remove -> remove/index.html /download -> download/index.html 除了上面的路径,其他路径全部指向 index.html单页应用多路由预渲染指南 https://juejin.im/post/59d49d976fb9a00a571d651d
源码
使用说明 https://github.com/chrisvfritz/prerender-spa-plugin为方便快速构建项目,本例所有配置的代码均放在github项目中。
https://github.com/zhaosheng8...文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97636.html
摘要:开发一个项目,通常避免不了要去配置和之类,以支持或模块及各种新语法,及进行语法的转义。当然也可以用脚手架快速创建一个项目,但与此同时常常又显的不太自由。本文是一篇使用入门文章,介绍如何从零开始手动配置一个基于的工程。 开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及进行 jsx 语法...
摘要:项目地址基于构建的移动端单页微应用,适合于核心概念的理解与掌握。前言这个项目是介于版本之后并且完全仿照功能设计的版本。但随之而来通常会有这样的疑问概念太多,并且都是分离的分文件。 react-mobile-starter 项目地址 基于 react + redux + react-router 构建的移动端单页微应用,适合于react、redux、react-router核心概念的理解...
摘要:项目地址基于构建的移动端单页微应用,适合于核心概念的理解与掌握。前言这个项目是介于版本之后并且完全仿照功能设计的版本。但随之而来通常会有这样的疑问概念太多,并且都是分离的分文件。 react-mobile-starter 项目地址 基于 react + redux + react-router 构建的移动端单页微应用,适合于react、redux、react-router核心概念的理解...
摘要:在年成为最大赢家,赢得了实现的风暴之战。和他的竞争者位列第二没有前端开发者可以忽视和它的生态系统。他的杀手级特性是探测功能,通过检查任何用户的功能,以直观的方式让开发人员检查所有端点。 2016 JavaScript 后起之秀 本文转载自:众成翻译译者:zxhycxq链接:http://www.zcfy.cc/article/2410原文:https://risingstars2016...
项目开始前,我们先聊一聊关于项目的一些说明。该项目起始于2017年初,当时公司主要技术栈为gulp+angular,鉴于react的火热的生态,在公司决定研发bss管理系统时选用react开发,目的也是为react native打下基础,以解决后期公司大前端技术栈的逐步成熟。(当时没有选择vue开发的主要原因是weex生态还不够特别成熟),既然决定换新,项目的构建也跟着一起换,从gulp转向火热的...
阅读 881·2021-11-22 13:53
阅读 2514·2021-10-15 09:40
阅读 983·2021-10-14 09:42
阅读 3399·2021-09-22 15:59
阅读 871·2021-09-02 09:47
阅读 2303·2019-08-30 15:54
阅读 1412·2019-08-29 17:14
阅读 373·2019-08-29 15:15