(转)react 项目构建

原文：http://www.javashuo.com/article/p-hrhdmszc-de.html

写在前面

每次构建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文件夹，这时候也能够作一些定制化的配置了。

项目配置

兼容IE

引入element-react UI框架会报错 ReferenceError: “Symbol”未定义

• 解决方案：

项目中引入babel-polyfill,在app.js中导入便可

配置webpack

基于webpack的一些配置

配置sass

脚手架默认没有配置sass，项目中若是使用sass须要单独配置

一、安装依赖 npm install --save-d node-sass sass-loader
二、修改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使用文档

<div className={classNames('clip_item', { 'clip_active': isActive, 'effect_hover': activeDrag === 'video_inner', 'dragging': is_dragging} )}> // 默认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('dddd'); // 星期一 moment().format("MMM Do YY"); // 9月 10日 18 moment().format('YYYY [escaped] YYYY'); // 2018 escaped 2018 moment().format(); // 2018-09-10T19:04:30+08:00

moment.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...

1. 安装babel-plugin-import

   npm install --save-dev babel-plugin-import

2. 给 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 ( <div></div> ) }; //过场组件默认采用通用的，若传入了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 

单页应用多路由预渲染指南 http://www.javashuo.com/article/p-hzbhmhhk-mh.html
使用说明 https://github.com/chrisvfritz/prerender-spa-plugin

---

源码

为方便快速构建项目，本例全部配置的代码均放在github项目中。
https://github.com/zhaosheng8...