zoukankan      html  css  js  c++  java
  • React学习笔记---项目构建

    简介

      ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具。

      今天要介绍一款工具,同时包含一个构建项目模板的工具,对于初学者来说,就有了一个可以学习、开发、测试的平台。

    Yeoman

      官方的介绍是这样形容的:“Web App的脚手架工具” --- Yeoman的目的是帮助用户更好的启动项目,提供最好的实践和工具使用户保持高生产率。

      Yeoman提供了一个生成器的生态系统,并提供了一个“Yeoman的工作流”,这个工作流集成了三大部分:

      - 脚手架工具Yo 

      职责:管理包依赖、记录构建配置信息等

      项目地址:https://github.com/yeoman/yo

      

      - 构建工具Grunt

      职责:构建工具,比较流行的有Grunt和Gulp

      项目地址:http://gruntjs.com/

                        http://gulpjs.com/

      

      - 包管理器Bower

      职责:包依赖管理工具,避免手动安装,比较流行的有Bower和npm

      项目地址:http://bower.io/

           https://www.npmjs.com/

      

    项目构建

      以Mac下为例:

      1. 启动terminal,然后进入到指定目录下:

      npm install -g yo

      2. 安装生成器(generator):

      npm install -g generator-react-fullstack

      3. 构建React-fullstack项目模板:

      yo react-fullstack

       4. 启动项目页面:

      npm start

       5. 打开浏览器:

     

    模板结构

      模板结构最好的就是参照官方给出的内容,这里就不一一举例了。

      Ract-starter-kit 官方地址:https://github.com/kriasoft/react-starter-kit

    .                   # 根目录
    ├── /build/                     # 编译输出目录
    ├── /docs/                      # 项目相关文档目录
    ├── /node_modules/              # 3D部分和工具目录
    ├── /src/                       # 代码源目录
    │   ├── /actions/               # Actions目录
    │   ├── /api/                   # REST API目录
    │   ├── /components/            # React组件目录
    │   ├── /constants/             # Constants (action types etc.)
    │   ├── /content/               # Static content 静态内容目录(plain HTML or Markdown, Jade, you name it)
    │   ├── /core/                  # Core components 核心组件(Flux dispatcher, base classes, utilities)
    │   ├── /decorators/            # Higher-order React components高级别的React组件库
    │   ├── /public/                # Static files which are copied into the /build/public folder静态文件库
    │   ├── /stores/                # Stores contain the application state and logic程序运行时状态和逻辑仓库
    │   ├── /utils/                 # Utility classes and functions工具类和方法
    │   ├── /app.js                 # Client-side startup script客户端启动脚本
    │   ├── /config.js              # Global application settings全局设置
    │   ├── /routes.js              # Universal (isomorphic) application routes通用的应用程序路由
    │   └── /server.js              # Server-side startup script服务端启动脚本
    ├── /tools/                     # Build automation scripts and utilities自动构建脚本及工具
    │   ├── /lib/                   # Library for utility snippets工具提示库
    │   ├── /build.js               # Builds the project from source to output (build) folder从源码编译输出
    │   ├── /bundle.js              # Bundles the web resources into package(s) through Webpack通过Webpack将资源打包
    │   ├── /clean.js               # Cleans up the output (build) folder清理输出文件夹
    │   ├── /webpack.config.js      # Configurations for client-side and server-side bundles配置客户端和服务端打包工具
    │   ├── /copy.js                # Copies static files to output (build) folder拷贝静态文件
    │   ├── /deploy.js              # Deploys your web application发布Web程序
    │   ├── /serve.js               # Launches the Node.js/Express web server启动服务
    │   └── /start.js               # Launches the development web server with "live reload"启动开发模式,带有时时更新
    │── package.json                # The list of 3rd party libraries and utilities3D部分列表
    └── preprocessor.js             # ES6 transpiler settings for Jest ES6的Jest设置

    更多资料

    @小狼的世界-Yeoman介绍:http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html 

    Yeoman官方地址:http://yeoman.io/

  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number (考虑负数的情况)
    8. String to Integer (整数的溢出)
    7. Reverse Integer (整数的溢出)
    LeetCode Minimum Size Subarray Sum
    LeetCode Course Schedule II
    Linux 文件缓存 (一)
    LeetCode Tries Prefix Tree
    Linux : lsof 命令
    LeetCode Binary Tree Right Side View
  • 原文地址:https://www.cnblogs.com/cuiyansong/p/4943540.html
Copyright © 2011-2022 走看看