react kit

简要说明

支持

1. ES6
2. ES7对象展开符
3. Fetch API
4. ES7的async 函数（async 函数的含义和用法 目前最好的 JavaScript 异步方案 async/await）
5. JSX使用 if-else 表达式
6. Sass
7. http-proxy（解决跨域问题，详细解释见Webpack dev server使用http-proxy解决跨域问题）

安装

• 执行 SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ yarn add node-sass -D便可以安装所有依赖
  • ps，这里不知道为什么这样
  • 另外，在 windows 下，只能在 git bash 命令行上才能执行上述命令

---

使用说明

步骤：

1. 配置 /kit_config/webpack_global_config.json 文件（webpack 的配置参数）
   • 具体字段含义见该文件里的注释
2. 配置 /kit_config/app_global_config.json 文件（app 的配置参数）
   • 具体字段含义见该文件里的注释
3. 配置 /kit_config/sftp_config.json 文件
   • 因为该文件包含服务器的账号密码，所有不可以添加到 git 中跟踪（.gitignore 忽略了这个文件）
   • 所以需要手动创建这个文件（详细见文末，附件）（现在不需要手动创建，在该目录下已经有一份模板）
   • 直接创建该文件并复制附件中的内容即可
4. 使用 npm run start 启动 webpack-dev-server，进行开发
5. 正式发布的步骤：
   • 使用 npm run build 打包代码
   • 使用 npm run sftp 将代码发布上服务器

---

框架说明

/src/lib/

此目录收录了各项目都通用的代码。

其中：

• _fetch.js
  • 对 fetch 的封装，实现了 timeout 处理
• lib.js
  • 杂项，不好分出单独一个文件时全部可以放在这里
  • 建议，对于可以经得起时间考验的代码，都建议单独出一个文件

/src/utils/

此目录，存放于特定项目相关的通用代码，包括 api等

其中：

• callFetch.js
  • 对 /src/lib/_fetch.js 的再次封装，在项目中可以直接调用
  • 可以修改此函数，做不同项目的定制化

---

附件

/kit_config/global_config.json

{
    /* 标志上传的模式 */
    /* 即为下面的 all、onlyChange、custom 三种方式 */
    "module": "onlyChange",

    "config": {
        "host": "xxxx",
        "user": "xxxx",
        "pass": "xxxx",
        "remotePath": "xxxx"
    },

    /* 上传所有文件 */
    "all": "./build/**",

    /* 仅上传变化的文件：bundle.js app.css index.html */
    "onlyChange": [
        "./build/bundle.js",
        "./build/app.css",
        "./build/index.html"
    ],

    /* 用户自定义上传的内容 */
    "custom": [
        
    ]
}