本模板工程为快速开发适配手机屏幕的网页而设计。 整合了React、mobx,能让开发者从搭建工程到发布做到开箱即用。
UI库建议使用MaterialUI,我用的antd-design
本文档大多内容来自官方文档,如需查看原版请点击这里
- 文件结构
- 可用的脚本
- 自定义WebPack配置
- 提交代码自动格式化
- 修改标题
- 异步加载组件
- CSS样式编写
- 引入图片、文件等资源
- 添加自定义的环境变量
- 调用接口
- 在开发中使用https
- 引用第三方JS
- 自定义Babel配置
创建之后你会看到如下目录:
my-app/
README.md
node_modules/
package.json
server.js
public/
index.html
favicon.ico
src/
base-compoents/
stores/
transport-layer/
pages/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
你可以在 src
下创建子目录. 当这个目录下内容用更改时,如果正在运行状态下,会触发快速自动构建。
JS和CSS就反正这个目录下。
public
目录存放入口文件 public/index.html
,如果要引入第三方JS可以放在这个目录
server.js
发布时的服务器使用,主要用来代理跨域的接口。
In the project directory, you can run:
App会以开发模式运行
会自动在浏览器打开 http://localhost:3000
每次你编辑文件后,这个页面都会自动重新加载
运行测试模式
See the section about running tests for more information.
App构建出发布的文件到 build
目录.
现在你就可以将build目录下的文件发布到服务器上去了。
关于 发布 .
如果你先自定义webpack的配置,可以使用这个库rescripts
只有使用Git作为代码服务器时有效
使用以下插件 husky lint-staged prettier 实现在提交代码时,自动进行格式化 To format our code whenever we make a commit in git, we need to install the following dependencies:
如果要修改网页标题,请在到public下的html中的<title>标签修改。 还可替换favicon.ico为自己的ico。 manifest.json中的信息也一并修改。
如果你想动态修改标题,请使用这个组件
因为默认情况下,webpack会将引用到的包都打包到同一个JS文件中,所以可能入口js文件可能会很大。 为了使用之变小,在使用react-router打开组件时,请使用如下方法引入
const Login =loadable({loader: () => import('./pages/Login'),loading: MyLoadingComponent,})
<Route path='/Login' component={Login}/>
默认开启了CSS-Module功能(后缀为.module.css),所以不需要在样式前面添加 请用后缀.css
.Button {
padding: 20px;
}
import React, { Component } from 'react';
import styles from './index.module.css';
class Button extends Component {
render() {
// You can use them as regular CSS styles
return <div className={styles.Button} />;
}
}
请参考sass文档
如果你使用了上面的@value @composes,vscode会警告这个符号。请在设置中将css.validate
设为false
为了减小Http的请求数目,在打包时webpack会将小于10k的图片直接转换成base64字符串放在html中。 目前只支持bmp,gif,jpg,jpeg,png
写法如下:
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
.Logo {
background-image: url(./logo.png);
}
本工程可以使用VSCode进行调试。但需要先安装这个Debugger for Chrome
你可以在工程设置环境变量,好在JS、Html、CSS中使用,比如测试环境和正式环境需要不同的AppKey之类的。
默认的环境变量有 NODE_ENV
,它的值有development
production
test
分别对应运行的命令行yarn start
yarn build
yarn test
。
环境变量的值会在打包阶段被动态的替换掉
注意: 自定义的环境变量必须以
REACT_APP_
开头.
可以在项目根目录下新建如下的文件(不同命令,会读取不同的文件)
-
.env: 默认使用
-
.env.local:用于本地变量覆盖,这个文件会在除了test环境的所有环境加载
-
.env.development,.env.test,.env.production:在对应的环境加载
-
.env.development.local,.env.test.local,.env.production.local:在对应的环境加载,最高优先级,会覆盖.env.*的配置
加载的优先级从高到低,依次为: -
npm start
:.env.development.local
,.env.development
,.env.local
,.env
-
npm run build
:.env.production.local
,.env.production
,.env.local
,.env
-
npm test
:.env.test.local
,.env.test
,.env
(注意没有.env.local
)
环境变量还可以在运行命令行的时候直接设置
- Windows(cmd.ext):
set REACT_APP_SECRET_CODE=123&&npm start
- Mac:
REACT_APP_SECRET_CODE=123 npm start
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>
);
}
if (process.env.NODE_ENV !== 'production') {
analytics.disable();
}
<title>%REACT_APP_WEBSITE_NAME%</title>
请先到stores/RootStore.js中的_handleData方法中根据自己接口返回结果的格式情况,进行修改
由于现在都是前后的分离的,前端调用的接口都是跨域的,所以需要进行代理
在本地开发的时候,你只需要将相对路径配到./src/api/ApiUrl.js中即可。
例如:LOGIN: '/login'
然后修改src/setupProxy.js
中的target
值。
例如:
"proxy": "http://localhost:4000",
这样配置后所有XHR请求都会被代理到本地的4000端口。
set HTTPS=true&&npm start
(Note: the lack of whitespace is intentional.)
HTTPS=true npm start
使用npm安装后,直接在js文件中import即可。
如果文件符合AMD/CMD规范可以直接import,如果不符合请在public/index.html中引入
删除调.rescriptsrc.js
中的注释即可
/"start": "rescripts start",/