2020/02/13 05-React项目构建

React的语法是用的比较新的，必须通过转译工具转义成真正能跑的起来的，开发都是比较新的语法，跑的时候都是比较兼容的语法

只要做React开发，模版几乎是一套，把这个打包，只要做项目，把这个包拿出来即可

包已经做好了

解压一下

开发需要用的包

git的忽略文件

两个配置文件

配置文件是很难配置的，要运行起来，就需要配置很多项
用VSCODE打开

babelrc

git的忽略文件
index就是首页，就是一个网页搞定全部网站，从首页开始变化，几个JS模版就可以搞定一个网站的样子

一个js就把所有的的东西打包进去

当下用的东西的配置文件

开发用的配置文件

生产用的配置文件

初始化最关键的就是这个文件，除了项目的基本信息，依赖也是在里面，用这个文件在，这里就是npm管理的项目
npm init就是来创建这个文件的，有这个文件在，npm就可以使用，npm所有的依赖包括打包都需要这个文件，包括你是dev依赖还是运行时的依赖，都要记录在这个文件里，这个文件很重要

i的意思就是install，npm i

i做的事情是把package.json中，已经列出的东西

只管install所有的依赖，包括开发和运行时要用的依赖

warn，如果时警告对开发影响不大，可以不管


这个很重要，就是在安装的

src是源码写在这里

、里面这个index.htnl是一个模板，外面的是真的网站

安装好，所有的js模块都在这里

两个配置文件


刚才开创建项目的时候都没有，先创建项目根目录，然后让这个项目给npm来管，如何管就需要执行npm init，就为这个项目建立了一个package.json文件，这个json文件要记录一些项目的描述性信息以及跟git仓库链接的问题，但是到目前为止没有任何依赖，开发以后有很多js文件，这些js文件需要依赖别人的库，这时候就需要npminstall，安装别人的库。
有的时候是开发时依赖，有的库是运行时依赖，把这些依赖的东西都下载了，每使用一下npm install，这个package.json里就在dev依赖里，和运行依赖里,包名就会加载进来，当时为这个项目使用的版本号加进来

这个包就省的你去下载了

1148个包，39秒安装完毕


npm install是首先要做的事情，把项目所有的依赖全部从网站上下载完成，这个完成会在本地生成一个modules目录，里面就是要用的东西
以后要是缺少包，只要写进去，重新npm install 是save还是save-dev中要考虑，

gitingnore传的时候应该把modules屏蔽掉

先熟练使用gogs，一般互联网公司都是使用gitlab


打包要用这个配置文件，prod（生产环境的意思)

start指定启动webpack，开发用的webserver，调试很方便，主要提供2个功能：静态文件支持、自动刷新和热替换HMR（Hot Module replactment）
最大好处是可以自动刷新，还可以做热替换

HRM可以在程序运行中替换，添加，删除模块，不需要重新加载页面，把变化部分替换掉，如果不用HRM就要页面强制刷新，用nginx做不了热刷新

inline是默认模式，使用HMR的时候建议开启，热替换时会有消息在控制台

用webpack连转带转译，一起全部做完

jtest是做java测试的

开发依赖save-dev，运行时依赖–save

env相当于一个集成，用一个env其实时可以搞定了
webpack里用了很多加载器

react-hot-loader热装载器

样式表的加载器

、包括测试服务器

版本号有4种

什么时候都只安装0.2.1

安装不低于2.4.1

、
^只安装4.x版本里最高的
~只会安装，1.2的最高版本

按照2.版本种最高的版本，比如现在是2.8.7，就下载2.8.7

用^相对比较安全，大版本的变化可能会很大，比如6和7版本差太多，就会不兼容

大多数采用^，最新版本太激进了，不敢用

代表在1版本里找最高的


跟样式表相关的

使用sourcemap可以定位到源码上去


运行时依赖更需要关注这些包
babel-polyfill替你磨平一些东西的
babel-runtime 运行时用的
mobx状态管理
axios异步网络通讯
antd react实现网页种控件的

antd ant design，时react做的比较好的一家

polyfill（腻子）浏览器支持的是参差不齐的,，有的功能浏览器没有提供，可以想办法用JS写一个，polyfill就是解决这些差异的

react提供的东西

操作DOM树的时候需要的

解决react-router 路由问题的

路由操作DOM树

react是三种管理方式管理状态的，一种是最基本的原始方式基本不用，

一种是Redwx，一种是Mobx，看起来小巧，功能绝对不弱的


这里面除了配置预设，还要配置一些插件

重要的其他两个配置文件

这是一个js脚本，符合commonjs的模块，用module.exports导出的，导出的是一个对象，这个对象内部该怎么写，哪些属性，我们也不知道，需要的插件都是从官网的添加进来

首先需要导入path和webpack,这是用commonjs的方式，就当import看

这就是commonjs的导出对象


让打包好的js跟源代码对应，方便调试代码错误

entry指的是程序入口，在src的index，index死因为下面有扩展extensions。也就是什么都不写调用的是index.js。这是js运行的入口

前面如果要做一些事情，把列表列起来即可，react-hot-loader是热加载组件，做刷新用的

output是告诉webpack输出bundles文件到哪里去

打包工具会把写好的所有js给打包成一个bundle捆，生成所有文件，生成所有逻辑都在里面
output就的是你想把它输出到哪里

找一个全局目录，找一个dist子目录，准备在里面输出一个

输出一个bundle.js

这个目录下取输出这个文件，将你写好的，所有JS打包，最后客户端看到JS文件放在哪个定义里，由publicPath定义

asserts就是它

在做一下导入 时候，如果什么扩展名都不写，默认当js


定义这些模块如何使用

它的正则表达式是以两个斜杠分界，以js结尾的，js结尾也称为模块，所以这里是做模块操作的，如果是以js结尾的文件就在里面。
排除在/node/modules这个目录里的，否则编译就把这个目录下所有文件也拿进来，巨大无比。
目录里的js将使用这些技术处理

如果碰到的结尾是.less结尾，则调用样式加载器，css加载器，less加载器，用他们来装载



新建一个LESS，看看这个到底是什么，rgb三原色表达形式

假设现在要统一修改颜色，less是预编译样式表，以后要换样式就把上面的样式统一换了

**有些浏览器不认，有几种办法，一种是 到less官方里下载js文件，由这个js文件动态解析，由它来支持less转换为css，
还一种还是在客户端使用前，把less先编译成css **

转换前需要安装 npm install less --save-dev

现在就被变量替换掉，下面是生成的东西

要么手动编译css，要么就使用一些其他的方式，比如在客户端增加一个less.js，由它来帮助我们
less就是增加了变量，mixin，函数等开发语言的特性，从而把css当编程的方式来写，less本身有一套语法规则

查看插件

plugin里有个数组，数组里有三个对象，定义全局变量的对象

**最下面有一个devserver的插件
compress是否支持压缩
publicapath 公共路径，也就是生成的js打包到哪里去
port这个网站会在3000端口
hot要不要热加载
historyapifallback **

最重要的就是端口是多少，使用路径是什么

这块内容暂时用不到，访问/api，会指向127.0.0.1:8080，转发到8080去了，可以实现动静分离的效果

除去这个，其他文件已经把开发要用的环境准备好了，有些人称这个开发文件搭了个脚手架，减少一些配置，直接在这个基础上做一些开发


启动项目

开发环境，还启动了一些支持热替换的方式

会把你下载的所有的包打包起来变成一个1.55M的东西

把bundle.js扔到了这个目录里，本地就可以看了，任何的404都会返回首页

这个脚手架好了，剩下的准备开发了

这个几万行还是sourcemap帮你做的，要不是有sourcemap，就需要你自己猜测了，不能查看源代码，因为这里面的内容都是js动态生成的

现在访问的是跟下的这个页面

src的index.htm就不一样

index。js是entry入口

调用了.app

这个就是用mobex实现的状态的控制

最后导出给你使用app

index导入app，默认后缀是js，缺省导出，这里用缺省导入即可

实际上跑的是这个，每隔一秒+1

现在改成+10

清零

按S保存

实际上这里重新编译了一遍

模块重新加载，页面自动刷新都不需要你管

改成+100保存

就重新编译了

用这些插件就可以快速进行调试了

如果有错误会在这里提示

有错误还可以到控制台，刷新不成功会有一大堆红色东西

devserver兼具着静态的页面

说明现在项目根目录被配置成了网站跟目录

z.css想办法引进来，一般放在head种，以前最早放在标记上

css就是用来控制html显示格式的，这里的样式都需要通过impot方式导入