react项目的环境搭建

环境搭建：

1. webpack + webpack-dev-server
   / 指向 index所在位置，图片,数据 都指向 /
   js / css / jsx 相对定位

2. npm install create-react-app -g 官方脚手架
   参考:
   https://facebook.github.io/create-react-app/docs/getting-started
   https://github.com/facebook/create-react-app

3. 启动运行 第三方脚手架 (yeomen/dva/mumi)
   npm install
   npm run dev

目录解析:

manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
		registerServiceWorker.js  ==  pwa
			支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
		对Internet Explorer 9,10和11的支持需要polyfill。

使用yarn 创建项目：

yarn add create-react-app -global

使用yarn的相应命令：

create-react-app 目录名| .
yarn start 开发模式
yarn build 打包

更改默认的端口号:

	1.	node_modules\react-scripts\scripts
	const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;

	2.	npm run eject / yarn eject
	 修改script/start.js

	 报git错误时: git add . -> git commit -m 'init' -> yarn eject


	本地资源导入(import) 不可以导入src之外的包

	问题:jsx前景图片, ./ 和 / 都指向了 public目录
	解决：1.模块化导入 src目录里 要在jsx里src的图片
		  2.相对或者绝对导入public目录下的图片

去除eslint 警告：

yarn  eject
找到项目下config/webpack.config.dev|prod
注释关于eslint的导入和rules规则

打包 + 预览：

		npm run build / yarn build
		serve -s build --port 端口 --open
		serve 服务器命令行工具（npm i serve -g)

		public目录里面的资源会直接copy到build目录，src里面的资源会打包模块化

	help: 

解决方案:

		项目资源，尽量从src目录下引入，打包时会模块化
		图片资源模块化引入，如何来自库只能放到public目录下