react-create-app 构建react项目的流程以及须要注意的地方

时间 2019-11-13

标签 react create app 构建项目流程以及须要注意地方栏目 React 繁體版

原文原文链接

Hello 小伙伴们，若是以为本文还不错，记得给个 star ，小伙伴们的 star 是我持续更新的动力！GitHub 地址css

React 系列文章代码地址

一目录

不折腾的前端，和咸鱼有什么区别html

目录
一目录
二前言
三安装及初始目录
四默认支持特性
五配合 VS Code 调试
六分析包大小
七模块引入 CSS
八 Sass 安装及使用
九添加图片、背景、SVG
十 public 文件夹
10.1 引用静态资源
10.2 Mock 数据
十一代码打包分割
十二引用 TypeScript
十三 React Router - 路由
十四自定义环境变量
十五测试
十六开发环境代理
十七使用 Ajax 请求获取数据
十八 Title 和 Meta
十九总结

二前言

Create React App 是一个官方支持的建立 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。node

本文 绝大多数、99% 内容来自 Create React App 的文档，1% 来自我的的整理。react

参考文献：

三安装及初始目录

下载 Node.js
安装 Create React App：
1. npm i create-react-app -g
开启新项目：
1. create-react-app todolist
2. cd todolist
3. npm start
打包项目：npm build

- todolist
  + node_modules —————————— 项目依赖的第三方的包
  - public ———————————————— 共用文件
    - favicon.ico        —— 网页标签左上角小图标
    - index.html         —— 网站首页模板
    - mainfest.json      —— 提供 meta 信息给项目，并与 serviceWorker.js 相呼应，进行离线 APP 定义
  - src ——————————————————— 项目主要目录
    - App.css            —— 主组件样式
    - App.js             —— 主组件入口
    - App.test.js        —— 自动化测试文件
    - index.css          —— 全局 css 文件
    - index.js           —— 全部代码的入口
    - logo.svg           —— 页面的动态图
    - serviceWorker.js   —— PWA。帮助开发手机 APP 应用，具备缓存做用
  - .gitignore ——————————— 配置文件。git 上传的时候忽略哪些文件
  - package-lock.json ———— 锁定安装包的版本号，保证其余人在 npm i 的时候使用一致的 node 包
  - package.json ————————— node 包文件，介绍项目以及说明一些依赖包等
  - README.md ———————————— 项目介绍文件
复制代码

参考文献：入门 - Create React App 中文文档

四默认支持特性

支持全部现代浏览器（IE 九、十、11 除外，若是须要，请自行配置）web
支持指数运算符 (ES2016)
支持 async / await (ES2017)
支持 Object Rest(剩余) / Spread(展开) 属性 (ES2018)
支持动态 import() (stage 3 proposal)
支持 Class 字段和静态属性 (part of stage 3 proposal)
支持 JSX, Flow 和 TypeScript
支持 PostCSS，无需手动添加 CSS 前缀，Create React App 会自动补全
参考文献：支持的浏览器和特性 - Create React App 中文文档

五配合 VS Code 调试

能够经过 Visio Studio Code 的插件 Debugger for Chrome 调试 Create React App：

安装 -> Debugger for Chrome
调试 -> 添加配置：

{
  "version": "0.2.0", "configurations": [ { "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] } 复制代码

保存 -> 开始调试
经过上述步骤便可开始调试

参考资料：使用 VSCode 调试 React 应用 - 知乎

六分析包大小

使用 source maps 分析 JavaScript 包。

这有助于你了解代码膨胀的来源，从而配合其余插件来减小每一个包的大小，优化项目。

安装：npm i source-map-explorer -S
修改 package.json：

"scripts": {
  "analyze": "source-map-explorer build/static/js/main.*",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
}
复制代码

分析：npm run build
分析：npm run analyze

参考资料：React App 中如何分析Bundle Size？ - 简书

七模块引入 CSS

在 Create React App 中，若是你的 react-scripts 版本是 2.0 或者更高，你能够经过模块形式引入样式：

import React, { Component } from 'react'; import styles from './Button.module.css'; // 将 css modules 文件导入为 styles import './another-stylesheet.css'; // 导入常规 CSS 文件 class Button extends Component { render() { // 做为 js 对象引用 return <button className={styles.error}>Error Button</button>; } } 复制代码

这样子不会致使样式的冲突，就比如你 import JS 进来同样。

参考资料：添加 CSS Modules 样式表 - Create React App 中文文档

八 Sass 安装及使用

安装 node-sass：npm i node-sass -S
引入：@import 'styles/_colors.scss'; // 假设 styles 目录在 src/ 目录下

参考文献：添加 Sass 样式表 - Create React App 中文文档

九添加图片、背景、SVG

添加图片：经过 import 引入便可。

import React from 'react'; import logo from './logo.png'; // 告诉 Webpack 这个 JS 文件使用了这个图片 console.log(logo); // /logo.84287d09.png function Header() { // 导入结果是图片的 URL return <img src={logo} alt="Logo" />; } export default Header; 复制代码

引用背景：经过 url 引用便可。

.logo { background-image: url(./logo.png); } 复制代码

引用 SVG：

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> </header> </div> ); } export default App; 复制代码

或者：

import { ReactComponent as Logo } from './logo.svg'; const App = () => ( <div> {/* ReactComponent 导入名称是特殊的 */} {/* Logo 是一个实际的 React 组件 */} <Logo /> </div> ); 复制代码

参考文献：添加图片，字体和文件 - Create React App 中文文档

十 public 文件夹

在 Create React App 建立的项目中，有个 public 文件夹，该文件夹下一般有：

favicon.ico - 网页小标签
index.html - 项目首页
mainfest.json - 提供 meta 信息给项目，并与 serviceWorker.js 相呼应，进行离线 APP 定义

固然，它不只能够拥有这些文件，还能够新增内容。

10.1 引用静态资源

index.html 能够引用静态资源。

在 index.html 中引用的静态资源不会被 Webpack 打包，而是被复制到打包目录中，使用方法：

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 复制代码

只须要加上 %PUBLIC_URL%/ 表示引用 public 下的资源便可。

在 JavaScript 中：

render() {
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; } 复制代码

这样也会引用 public 中的资源，从而让图片 不会被 Webpack 打包。固然，须要牺牲的代价有：

public 文件夹中的全部文件都不会进行后处理或压缩。
在编译时不会调用丢失的文件，而且会致使用户出现 404 错误。
结果文件名不包含内容哈希值，所以你须要添加查询参数或在每次更改时重命名它们（以便清除浏览器缓存）。

10.2 Mock 数据

此外，因为它内含 Node.js，因此还能够利用这点进行数据模拟（Mock），作法是：

在 public 文件夹中新建 api 目录，而后建立文件 headerList.json，引用 axios 后，经过： axios.get('/api/headerList.json').then() 便可调用该文件进行 Mock。

参考文献：使用 public 文件夹 - Create React App 中文文档

十一代码打包分割

在 Create React App 中，咱们可使用 React Loadable 来进行代码的分割。

使用方式：

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);
复制代码

参考文献：

十二引用 TypeScript

使用 TypeScript 启动新的 Create React App项目：npx create-react-app my-app --typescript
往 Create React App 现有项目中添加 TypeScript：npm i typescript @types/node @types/react @types/react-dom @types/jest -S。（记得修改全部 JS 文件为 TS 文件，例如 src/index.js -> src/index.tsx）

参考文献：添加 TypeScript - Create React App 中文文档

十三 React Router - 路由

因为 Create React App 并无规定路由解决方案，而后市面上比较收欢迎的路由解决方案是 React Router，因此能够尝试使用：

安装：npm i react-router-dom -S
使用：React Router

十四自定义环境变量

定义环境变量：process.env.REACT_APP_SECRET_CODE
获取特殊内置环境变量：process.env.NODE_ENV。值为：test、development、production。对应三种环境。

render() {
  return ( <div> <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small> <form> <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} /> </form> </div> ); } 复制代码

在开发环境，该页面渲染为：

<div>
  <small>You are running this application in <b>development</b> mode.</small>
  <form>
    <input type="hidden" value="abcdef" />
  </form>
</div>
复制代码

十五测试

Create React App 使用 Jest 做为其测试运行器。

可是很不幸的是，工做中并无用上，估计之后的工做也可能不会用上，因此我们只须要知道有这回事，等有机会再进行尝试。

参考文献：

十六开发环境代理

在开发项目的过程当中，最担忧的莫过于浏览器告诉你跨域了：后端端口在 4000，或者主机在另外一个 IP 地址……

因此，咱们须要在开发环境中配置代理。

往 package.json 中添加字段：

"proxy": "http://localhost:4000",
复制代码

这样当你调用接口：fetch('/api/todos') 时，它会请求代理到 http://localhost:4000/api/todos。

固然，有可能 proxy 不够灵活，小伙伴们能够尝试经过直接访问 Express，并链接项目的代理中间件，详情看参考文献。

参考文献：

十七使用 Ajax 请求获取数据

在 Create React App 中，能够经过下面两种方法获取 Ajax 数据：

fetch() API
axios 库

固然，没有限制死必须使用这两种。

这两种调用 Ajax 请求获取数据的方式便捷在它返回 Promise 供链式调用数据。

参考文献：使用AJAX请求获取数据- Create React App 中文文档

十八 Title 和 Meta

动态更新 Title：document.title API
根据 React 组件更改 Title：React Helmet 等第三方库
动态更新 Meta：

<!doctype html> <html lang="en"> <head> <meta property="og:title" content="__OG_TITLE__"> <meta property="og:description" content="__OG_DESCRIPTION__"> </head> <body> </body> </html> 复制代码

而后读取 index.html 并将 __OG_TITLE__ 和 __OG_DESCRIPTION__ 替换掉便可。

参考文献：Title(网页标题) 和 Meta 标签 - Create React App 中文文档

十九总结

react-create-app 构建react项目的流程以及须要注意的地方

一 目录

二 前言

三 安装及初始目录

四 默认支持特性

五 配合 VS Code 调试

六 分析包大小

七 模块引入 CSS