react.js 之 create-react-app 命令行工具系统讲解

Posted 2020-10-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react.js 之 create-react-app 命令行工具系统讲解相关的知识，希望对你有一定的参考价值。

react.js 教程之 create-react-app 命令行工具系统讲解

快速开始

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
通过http://localhost:3000/查看你的app
使用 npm run build 编译打包程序
npm test 文件修改后测试，这部分内容后面讲

更新到最新版本

创建react app的主要分为两个包，一个包是create-react-app命令行，一个包是react-scripts，这个是用来生成具体项目的第三方依赖，如果要更新的话，基本上不需要更新create-react-app包，它就是使用最新版本的react-scripts包创建项目的，所以你创建的项目能够获取最新的特性和改进而不需要更新create-react-app包，而只用更新react-scripts包，而要更新这个包，可以打开https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md找到你当前的react-scripts版本，然后通过给定的命令一步步更新，这样可能会很麻烦，但是你也可以直接修改package.json中的版本号，然后直接npm install安装，但是这样可能导致潜在的破坏变化，我们尽量保证这个破话最小化

文件结构

注意如下几点：
1.项目目录下面的public和src目录下的index文件必须存在不能改名，其他的文件可以删除和改名，你可能在src目录下面创建子目录，react为了达到最快速的代码重建，只有在src根目录下的文件会被webpack编译，所以必须把文件放在src根目录下面，否则webpack不会识别
2.只用public目录下的文件才会被public/index.html引用，请阅读下面的说明，从而使用js和html静态资源
3.你能够创建更多的和public同级的顶级目录，他们不会包含在项目构建中，你可以使用他们作为项目文档

可用的脚本命令

1.npm start 
    在http://localhost:3000下监视文件，文件修改将自动更新，你可以在控制台中看到检测错误
2.npm test
    在交互监视模式下启动测试运行程序。后面细讲
3.npm run build
    在生产环境中编译代码，并放在build目录中
    能够正确的打包代码，并且优化，压缩，使用hash重命名文件
4.npm run eject
    注意：这是一个单向操作，一旦你使用eject，那么就不能恢复了
    使用说明：如果你对create-react-app这个构建工具和配置项不满意，你可以在任何时候eject，从而导出可配置的模板，这个命令可以移除到项目的单一构建依赖，取而代之的是将配置文件和项目依赖到导入到你的项目中，你可以随意支配他们，之后除了eject命令以外其余的命令都是可用的，这些命令也是可配置的，所以这时候你就可以操作他们了，不得不说这个逼装的可以，不就是变成vue-cli类似了吗，关于react的配置文件，容我日后再总结出来
    你不是非要使用这个功能，原来的模板指定的功能在中小项目中有很好的表现，你没有必须使用npm run eject的义务，但是作为牛逼的我们意识到如果这个构建工具不能自定义那么鸟用都没有

支持最新的js语法和垫层

这个项目除了支持es6的特性外还支持其他的语法如es7,es8,jsx等
注意：这个react项目只支持Object.assign()（使用object-assign插件） Promise（使用promise插件） fetch（使用whatwg-fetch插件） 的垫层，如果要使用其他的es6特性需要手动添加合适的垫层，自己到npm中找吧，说实话这点和vue-cli比起来就逊色了

编辑器中的语法高亮

如果你使用vsCode自动支持es6语法高亮

在编辑器中展示检测输出

就是在编辑器中使用eslint，下载编辑器的ESlint插件，然后在项目中添加.eslintrc文件，这个东西用起来很不爽有种约束感，不推荐使用，感觉react的这套脚手架做的一般

在vsCode中调试代码

这个功能可谓是vsCode的神作，对于调试前端框架中的代码非常给力，强烈推荐使用
点击你的vsCode上面的调试按钮中的添加配置，把里面的配置项删除，然后添加如下代码
{
    "version": "0.2.0",
    "configurations": [{
        "name": "Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceRoot}/src",
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
        }
    }]
}
重启你的编辑器，然后按F5就可以在编辑器中调试了

自动格式化代码（略）
根据页面的内容动态的更改html页面的title
- 可以直接使用document.title即可，官网还介绍了其他几种做法，可以自行查阅

安装第三方依赖

例如react-router
npm install --save react-router

导入组件

使用import导入和export导出，推荐在组件中使用export default导出组件，只能出现一次该语法

代码分割

此即按需加载，要实现这个功能就是使用import函数，注意这和导入组件的import是有差别的，下面直接上demo
假设模块A中写如下代码
const moduleA = ‘hello‘;
export { moduleA };
在app.js中按需导入模块A
import(‘./moduleA‘).then( ({moduleA}) => {
    // 在这里面可以使用模块A
} ).catch( err => {
    // ...
} )

模块A的代码就单独放到一个代码块中，实现按需加载

导入css文件

也是借助webpack的导入css文件的功能，在js文件中导入css文件表明依赖关系
但是请注意，react在这里装了一个逼，我们不需要这个功能，尽管我们支持这个，但是作为react开发工程师，我强烈建议你看完下面的内容
以下是webpack导入css的缺点：
1.如果你使用webpack在js中导入代码了，那么你的项目很难移植到其他构建工具和开发环境中
2.在开发环境中，如果你修改了你的组件，那么会导致你的css文件没必要的重载
3.在生产环境中，所有的css文件都会被打包到一个单独的压缩后的css文件中，这样看来有几把用？
所以react建议你把css文件都放到src目录下的index.js文件中，这样一来如果要更换构建工具直接把index.js中的import拿掉就可以了

css文件后处理

这部分内容是来对css文件压缩和自动添加css兼容性前缀的，其实使用的就是webpack的postcss-loader，这个loader，react的脚手架已经配置好了，vue-cli也用了这个

css文件的预处理

react配置的sass预处理器，如果你必须要用sass，关于这部分配置可以去查看官网，我个人觉得没有必要使用sass，使用框架开发，有很多配套的ui框架，而你只需要简单的调整一下布局就可以了，在这一节你要知道，react脚手架并没有对sass做配置，需要你手动配置

添加图片，字体和文件

添加这类的静态资源和添加css文件类似
你使用import导入一个图片或者一个文件比如PDF，返回的是会是一个路径，这和css的import是不同的，返回的这个路径值可以当做src或者href的属性值，为了减少http请求，react脚手架对不超过10000字节的图片做了data URI处理，SVG格式的图片不支持这项设置，下面是demo
import logo from ‘./logo.png‘; 
logo就是绝对路径，所以当你的项目中需要使用图片等类似静态资源的时候，必须这样显示的import不然打包编译后的路径就不是你想要的。
注意点：在css文件中导入图片等静态资源，使用相对路径，webpack在编译的时候会自动的替换成绝对路径。
你要知道react在这里又装了一个逼，用他自己的方式处理静态资源，请看下一节

使用public目录

1.修改html
    这个html是可以修改的，编译完成的js文件是自动插入到这个文件中的，其实就是用的webpack的html插件，切。。。
2.添加其他的静态资源
    你可以把不需要webpack编译的文件放在public文件夹里面，这里面的文件都不会被编译，但是react又说，最好不要这样放静态资源，怎么样怎么样不好，但是如果你执意要自己导入文件，不需要webpack编译，可以看下面的介绍
    放在public目录下面的文件只是简单的复制到build目录中，那么想要正确的引入这个文件需要使用PUBLIC_URL这个变量，如下代码
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    也就是说你写路径的时候 "%PUBLIC_URL%" + "/img/logo.png" 这种格式就ok了
    注意点：这个变量只能在上述的情况下使用，如果你想导入src目录或者node_modules目录中的文件，你要把他复制过来，在编译的时候上面的变量会替换成绝对路径，如果你在js中导入可以如 return <img src={process.env.PUBLIC_URL + ‘/img/logo.png‘} />
    反正注意一点这样做是非常不合理的，这里只是应急方案
3.什么时候应该使用public文件夹？
    以下几种情况：
    1.你需要一些文件有特殊的文件名
    2.当你有很多图片，并且这些图片的路径是动态添加的，懂不？？就比如你在页面上展示一个图片，这个图片要一直变，使用webpack编译后的文件不能做到这点，思考一下
    3.如果你使用其他的很小的js库，并且这个库已经压缩和优化了，你可以直接用
    4.还有一些js库和webpack是有冲突的，你必需通过script标签的形式导入
    注意：如果你通过script导入的js是有全局变量的，你还要参考下一节的介绍

使用全局变量

如果你在你的src目录中的js文件中使用上面所述的js文件中的全局变量，那么会报错，因为eslint并不知道这个变量是什么，为了避免这个错误的发生可以通过window来访问，即const $ = window.$;这样类似的结构就可以访问到全局变量，如果你不想通过window访问可以在使用变量的那一行代码的后面添加 // eslint-disable-line 此注释即可

添加bootstrap

随着前端框架的盛行，原始的bootstrap已经快死了，react抄袭bootstrap做了一个react-bootstrap，用来充当自己的ui组件库，真的太low了，好好跟人家vue学学啊
https://react-bootstrap.github.io/，这时react-bootstrap的官网
安装 npm install --save react-bootstrap [email protected]3 
css还要单独的引入，在src/index.js中导入
import ‘bootstrap/dist/css/bootstrap.css‘;
import ‘bootstrap/dist/css/bootstrap-theme.css‘;
在src/App.js中导入你自己要的组件
import { Navbar,Jumbotron,Button } from ‘react-bootstrap‘
注意点：这里react官网上，叫我们自己发布基于bootstrap的样式包，然后自己安装，自己体会吧，不得不吐槽

添加Flow

Flow是一个静态数据类型检测工具，像java,c++这样的语言都是静态类型的，js和python都是动态类型的，也就是说js的数据类型可以随便修改，但是这个随便修改可能出现很多错误，打个很简单的比方，这个问题也是我平常遇到的，就是给一个值赋值数字，然后经过后台传递的数据修改成了字符串版的数字，就导致程序运行失败，但是谷歌也不报错，这尼玛就尴尬了，我找这个问题找了很长时间，所以如果此时js能够有静态版的数据类型这样的错误就可以避免了，TypeScript就是干这个的，但是react和Flow搭配的比较好，所以想成为一名不折不扣的超级前端工程师还是看看flow吧，https://flowtype.org/，下面是将flow引到react中来
npm install --save flow-bin
在package.json文件中添加命令 "flow": "flow"
运行 npm run flow init 会生成 .flowconfig配置文件，不用动他
然后在你需要检测的文件的顶部添加 // @flow 注释，看没看到，在我们用注释注释代码的时候人家已经用注释编程了，当你把代码写好后运行npm run flow，就可以检测是否有数据类型错误了

添加环境变量

1.在项目中可以使用声明在环境中的变量，就好像这个变量是定义在项目的js文件中一样，默认情况下，可以使用的环境变量有NODE_ENV(这个环境变量已经定义好了)，和其他以REACT_APP_开头的环境变量
2.这些环境变量在构建的过程中会自动替换成想要的值，如果在运行的过程中，在静态文件中修改或者使用环境变量，项目不会做出响应，所以你可以重新编译项目
3.普通的环境变量的创建必须要添加REACT_APP_开头，并且其他的环境变量除了NODE_ENV以外，都会被忽略，这是为了避免和系统本机的公钥冲突，如果修改了环境变量，必须重启你的项目
4.这些环境变量会被定义在process.env上面，比如你有一个环境变量叫做REACT_APP_SECRET_CODE当你在js中使用必须通过process.env.REACT_APP_SECRET_CODE才能访问到
5.有一种内置的环境变量叫做NODE_ENV，你可以通过process.env.NODE_ENV访问到这个变量，react不允许自己设置这个变量的值，默认已经设置好了，有development,test,production这几种情况
6.这些环境变量可以很方便的得到运行环境的相关信息和项目本身之外的敏感数据信息
7.使用环境变量之前需要自己定义变量，定义变量的方式有两种，第一种是在你的命令行工具中定义，第二种是新建一个.env文件，在public中的index.html中也可以使用环境变量%REACT_APP_WEBSITE_NAME%必须以REACT_APP开头，所有的环境变量都是编译的时候插入
    第一种方式：通过命令行的方式临时的添加环境变量，只介绍windows
        set REACT_APP_SECRET_CODE=abcdef&&npm start
    第二种方式：将环境变量定义在.env文件中
        在项目根目录中创建.env文件，在里面定义变量 REACT_APP_SECRET_CODE=abcdef，还有其他类型的文件，自行了解

能不能使用Decorators

这个语法是将一个函数定义的功能，干到另外一个函数里面，目前不稳定，react不支持这个

整合后端API

主要用来解决后端api接口和前台跨域的问题，一般情况下，我们的后台服务器和开发前台代码的服务器是不一样的，因为没有几个公司使用node开发服务器，域名端口不一样所以存在跨域问题，解决这个问题可以直接在package.json文件中添加 "proxy": "http://..." 这样你在你的localhost下面访问后台api如/api/todos直接代理到上面指定的域名中，所以跨域问题就解决了，要注意这种方式只能在开发环境中使用
特殊：如果你开发代码的环境不是在locallhost下面，那么上述方法也会是没用的，关于解决办法自行查看官网

自定义设置proxy

几种代理路径的方式
{
    // ...
    "proxy": {
        // 以/api的请求都匹配
        "/api": {
            "target": "<url_1>"
        },
        // 匹配/bar/abc.html
        "/bar/*.html": {
            "target": "<url_3>"
        },
        // 匹配 /baz/abc.html and /baz/sub/def.html
        "/baz/**/*.html": {
            "target": "<url_4>"
        }
    }
    // ...
}
设置的配置项的具体细节，请查看https://github.com/chimurai/http-proxy-middleware#options

在开发环境中使用HTTPS

可能你后台使用https的，所以你可以在cmd运行的时候输入set HTTPS=true&&npm start即可

运行测试功能

react脚手架使用jest作为测试工具，jest工具用来做单元测试的，端到端的测试react不支持
jest找自己的测试文件，放在src目录下，有如下三条规则
    1.__tests__目录下的.js文件
    2.后缀.test.js文件
    3.后缀.spec.js文件
    建议最好将测试文件和源文件放一起，减少搜索路径
命令行接口
    当你运行npm run test，jest会开启watch模式，一旦以保存文件，就会重新更新

结语

关于这篇文章的官网介绍有一部分内容没有提及，个人感觉对开发项目帮助不大

以上是关于react.js 之 create-react-app 命令行工具系统讲解的主要内容，如果未能解决你的问题，请参考以下文章

react.js 教程之 Installation 安装

react.js 之 create-react-app 命令行工具系统讲解

React.js学习笔记之事件系统

react.js 之批量添加与删除功能

Node.js 之react.js组件-Props应用

React Js之组件