Awesome Open Source
Awesome Open Source

react-molin

react-molin是一个全新的基于webpack3、react15、react-router4、antd-mobile的前端架构实现方案(h5)

react-molin的优势

  • 基于最新的webpack3、react15、react-router4
  • 相比antd官方框架dva更加轻量级
  • 支持多个单页面应用同时开发
  • 不同入口页面css/js单独合并压缩
  • 静态文件自动添加版本号
  • 高清脚本解决方案,完美支持1px
  • ES2015
  • less替代css
  • fetch替代Ajax
  • ESlint在代码提交前进行规范检测

项目依赖

  • webpack^3.0.0
  • antd-mobile^1.0.7
  • react^15.4.2
  • react-router-dom^4.0.0

运行

git clone https://github.com/Molin123/react-molin.git
cd react-molin
npm install(如果报错,请使用cnpm) 
npm run start/npm run start-win

然后即可以访问http://127.0.0.1:1024/home.html#/index看到页面了

编译

npm run build/npm run build-win

编译后的文件会生成到output目录下,直接将这个目录下的文件部署到服务器上即可。

目录结构

.
├── src
│   ├── app
│   │   ├── images/
│   │   ├── index.js
│   │   └── list.js
│   ├── home
│   │   ├── images/
│   │   ├── index.js
│   │   └── list.js
│   ├── home.js
│   ├── app.js
│   ├── bundle.js
│   └── template.ejs
├── output
│   ├── images/
│   ├── **.html
│   ├── **.css
│   └── **.js
├── config
│   ├── config.page.js
│   ├── config.server.js
│   ├── config.deploy.js
│   └── config.proxy.js
├── mock
│   └── **.json
├── .babelrc
├── .eslintrc
├── gulpfile.js
├── package.json
└── webpack.config.js
  1. 其中homeapp是两个单独的页面
  2. src/template.ejs为生成HTML文件的模板,可自由修改
  3. src/bundle.js是代码分割模型
  4. output/目录下是build后的生成文件,可直接部署到服务器

多页面入口配置

如果想在项目里面增加入口,只需要在./config/config.page.js中增加配置即可

module.exports = {
    "list": [{
        "name": "app",
        "entry": "./app.js",
        "title": "app页面",
        "filename": "app.html",
        "template": "template.ejs",
        "chunks": "app"
    }, {
        "name": "home",
        "entry": "./home.js",
        "title": "home页面",
        "filename": "home.html",
        "template": "template.ejs",
        "chunks": "home"
    }]
}

todoList

  1. 支持多入口(3.30 done)
  2. common拆分(暂时不做)
  3. 静态文件加戳(3.31 done)
  4. dev-server配置(4.6 done)
  5. 目录结构优化(4.7 done)
  6. webpack配置拆分(暂时不需要)
  7. 使用react-router路由(3.30 done)
  8. fetch语法支持(4.1 done)
  9. 静态文件输出(3.31 done)
  10. 打包后js文件过大(3.31 做压缩处理 4.20 做代码拆分)
  11. 热更新(4.5 done)
  12. css打包存在问题(4.5 done)
  13. 验证多less文件的合并情况(4.6 done)
  14. 图片目录(4.7 done)
  15. css压缩(4.24 done)
  16. 代码拆分(4.20 done)

更新日志

1.0.1版本 2017/06/12

更新内容:

  1. 修改webpack配置,开发环境下不压缩js/css,缩短热更新时间。
  2. 增加代码部署功能gulp deploy --env serverName

1.0.2版本 2017/06/20

更新内容:

  1. 升级webpack版本到3.0.0
  2. 使用webpack3.0.0新功能——范围提升(Scope Hoisting ),提高JavaScript在浏览器中执行速度。

1.0.3版本 2017/07/13

更新内容:

  1. 新增功能可自动将样式表中的px转换为rem。

hot和inline的区别

webpack-dev-server的inline和hot参数都可以在代码改变的时候实现浏览器页面自动更新,具体的区别请参考webpack-dev-server中inline和HMR的区别

react-router4如何做Code Splitting

react-router4做按需加载,需要使用bundle-loader来实现。具体请参考react-router4实现按需加载

如何在react项目中使用ESlint检测代码规范

ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误。使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大、越来越多的人参与进来时,需要加强一些最佳实践。

如何在react项目中使用ESlint检测代码规范

代码部署

使用gulp-sftp实现文件上传到服务器上的指定目录。需要全局安装gulpnpm install -g gulp

config/config.deploy.js中增加部署服务器的配置,可添加多个。

module.exports = {
    "testServer": {
        "host": '123.206.221.185',
        "remotePath": '/root/www',
        "user": 'root',
        "pass": 'password'
    },
    "testServer2": {
        "host": '123.206.221.185',
        "remotePath": '/root/www',
        "user": 'root',
        "pass": 'password'
    }
}

然后在build之后执行gulp deploy --env testServer即可将./output下的代码部署到对应的服务器上。


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,847
webpack (1,169
reactjs (1,127
eslint (262
ant-design (112
antd-mobile (18