V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Sakuyakun
V2EX  ›  JavaScript

搭建了一个较基础的 React 开发环境

  •  
  •   Sakuyakun · 2017-08-15 23:52:56 +08:00 · 3617 次点击
    这是一个创建于 2657 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目地址: https://github.com/Sakuyakun/Yorha-Boilerplate

    Introduction

    Yorha-Boilerplate 可能是最简单友好的 React 单页面开发环境

    如果有错误或者好的建议请联系我,正在使用该环境开发组件库。

    Feature

    • 技术栈 ES6/7 Immutable React React-Redux5 React-Router4
    • 可选用 SASS 或 Aphrodite,使用 PostCSS 进行处理
    • 可选用 Immutable-pure-render 方案优化组件渲染
    • 使用 React-With-Styles 方案处理配置主题色
    • 使用 Webpack3 进行处理打包
    • 使用 Hot Module Replacement 热加载
    • 使用 ESlint 代码检测与 Prettier 格式化
    • 启用 UglifyJS 代码压缩,文件后缀添加 MD5 缓存处理
    • 启用 Webpack-Bundle-Analyzer 可视化工具分析打包大小

    Directory Layout

    ├── dist                           # 打包输出目录
    ├── src
    │   ├── component                  # 组件目录
    │   ├── actions                    # Redux Actions 文件目录
    │   ├── reducers                   # Redux reducers 文件目录
    │   ├── assets                     # 资源目录
    │   ├── themes                     # 主题样式目录
    │   ├── template                   # 模板目录
    │   ├── utils                      # Utility and helper classes
    │   ├── views                      # 路由主页面
    │   ├── entry.jsx                  # 入口文件
    │   ├── routers.jsx                # React Router 路由文件
    │   ├── normalize.scss             # normalize
    │   ├── style.scss                 # 公共样式
    │   └── withStyles.js              # withStyles
    ├── index.html                     # devServer 主页
    ├── package-lock.json              # package 锁文件
    ├── package.json                   # package
    ├── postcss.config.js              # postCSS 配置文件
    ├── webpack.config.js              # Webpack 基本配置
    ├── webpack.dev.config.js          # Webpack 开发环境配置
    └── webpack.prod.config.js         # Webpack 部署环境配置
    

    Run

    npm run start 开发环境启动

    npm run build 部署打包

    npm run lint 代码检测

    10 条回复    2017-08-16 20:10:14 +08:00
    KeepPro
        1
    KeepPro  
       2017-08-16 02:27:35 +08:00 via Android
    感谢分享,最近再看 react 呢。
    zoues
        2
    zoues  
       2017-08-16 08:08:25 +08:00 via iPhone
    creat-react-app
    BearD01001
        3
    BearD01001  
       2017-08-16 09:32:00 +08:00
    creat-react-app +1
    tinytin
        4
    tinytin  
       2017-08-16 10:38:54 +08:00
    我搭了一个更基础的 typescript + react 环境

    ├── dist
    ├── node_modules
    ├── package.json
    ├── src
    ├── index.tsx
    ├── tsconfig.json
    ├── webpack.config.js
    └── yarn.lock

    yarn run dev
    yarn run build

    https://github.com/GaryChangCN/react-webpack-typescript-cli
    sohucw
        5
    sohucw  
       2017-08-16 12:48:46 +08:00
    现在 redux 基本被 mobx 取代了 建议 react + mobx 项目 ( redux 原理要懂)
    Sakuyakun
        6
    Sakuyakun  
    OP
       2017-08-16 13:38:18 +08:00
    @zoues @BearD01001 creat react app 确实十分方便直接但重新搭环境的话也是能了解到挺多东西的 我也是刚学 webpack 不久后搭出来 :D
    Sakuyakun
        7
    Sakuyakun  
    OP
       2017-08-16 13:40:56 +08:00
    @sohucw mobx 目前还没去看 现在包括公司的项目中还是用的 redux 加 immutable 后也在实践中
    Sakuyakun
        8
    Sakuyakun  
    OP
       2017-08-16 13:42:05 +08:00
    @tinytin 没有接触过 ts 但对泛型概念有所了解 :)
    lixiangzaizheli
        9
    lixiangzaizheli  
       2017-08-16 13:56:59 +08:00
    404
    Sakuyakun
        10
    Sakuyakun  
    OP
       2017-08-16 20:10:14 +08:00
    @lixiangzaizheli 地址错误已经改过来了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   909 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 21:45 · PVG 05:45 · LAX 13:45 · JFK 16:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.