「React」PC脚手架，与新移动脚手架的区别

Jack

.babelrc (pc端)
{
  "presets": ["react", "stage-0", “es2015"]
}
.babelrc (移动端)
{

     "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    ["import", { "style": “css", "libraryName": "antd-mobile" }],
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}
babel区别不大 无非是 移动端专门引入了 热加载 和antM的样式的 转码

两套框架的 package.json 和webpack.js 存在很大差异

首先是webpack.js

pc：

Paste_Image.png

移动端：

Paste_Image.png

移动端新版脚手架 将对ant的css样式的 转译 从webpack中移至了 .babelrc中去
因为移动端的原因 所以不用对 jsx进行ie8兼容的处理

移动端：

Paste_Image.png

PC端

Paste_Image.png

移动端对文件的入口的引入方式：将文件的入口声明从packjson中移了出来。同时不再像pc版一样，用js插件打包对象进行入口引入。

其次是packjson.json

移动端

Paste_Image.png

pc端

Paste_Image.png

pc端用的是atool蚂蚁金服提供的打包工具

移动端用的是webpack 进行打包

David

pc端没有的：
Package:
script{
"main": "index.js",
"open:src": "babel-node server.js",
"clean": "rimraf dist",
"build:webpack": "webpack --config webpack-pro-config.js --progress —colors”
}

依赖："antd-mobile":"^0.9.12”, //蚂蚁金服出的移动端设计指南和前端框架
"isomorphic-fetch": "^2.2.1",
"moment":"^2.15.1”,  //处理时间的js，配合最新的antdM
"react-fastclick":"^2.1.2”, //移动端触摸点击事件的js文件

devDependencies: 移动端要求的依赖很多都是不同的

Babelrc 里面，预加载导入的基本一样，主要是对基本的ES语法杰斯
主要的不同是antd-mobile 对移动端CSS和style不同导入的js

Webpack.config
    PC端：把我们写的src里的index.js引进和nodde_modules 里的环境依赖引进。

Webpack  打包完后，解析成bundle.js和这个文件的存放路径

移动端：在CSS方面，用的是scss文件，与PC端less不同

XuYang

React+redux脚手架异同
相同点：
1.       都是使用react+ redux架构。
2.       Action reducers 使用方式相同
3.       Store 中都使用applyMiddleware 中间件
4.       使用redux-logger 打印日志
不同点
1.       pc框架 使用thunkMiddleware 中间件来通信action和reducer. h5框架使用redux-saga 中间件
2.       pc框架使用less 预编译样式 h5框架使用 sass
3.       pc框架 封装了api 来处理ajax的请求。H5框架使用 fetch来处理请求，监听异步请求
4.       pc 框架封装了 reducers的type响应。H5框架使用switch case 来判断type响应
5.       pc框架不能直接使用样式名。H5框架可以直接使用。
6.       h5框架处理了样式，使用公用样式和私有样式，更加友好。便于css的管理

结论：可以结合两者的有点，整合出更加合理易用的脚手架。

Blue

区别：
1、移动端的脚手架把字体，样式，图片放在指定的文件夹内作为汇总，另外单独建了一个js文件用于存储js 文件， pc端的脚手架把字体、样式、和图片放在自身所属页面的文件夹内，操作的js文件都在src目录下。
2、移动端的脚手架对type的定义和pc 端的不一样，存放位置和命名方式也不一样。
3、移动端的脚手架中 action里面js文件命名后缀都加了action，里面的方法均采用箭头试的写法，应该是为了减少this 的请求方式。
4、移动端的脚手架中， reducers里面js文件，最初是定义路由，通过标记来连接action和reducers，pc 端脚手架对type进行了封装。
5、移动端的脚手架中，增加了sagas文件，应该是用来异步获取数据的。
粗略看了下，没有细看，大致知道怎么运行这个脚手架。