基于 NPM 的大型 React 单页应用探索（多场景多方案）

tinylcy 发布于2019-08-22 10:59 / 486人阅读

摘要：基于的大型单页应用探索多场景多方案原文地址未完待续本文目标构建基于的大型单页应用以及多页面，支持多模块协同开发分布式构建与发布。

基于 NPM 的大型 React 单页应用探索（多场景多方案）

原文地址：https://github.com/luqin/blog/issues/10

未完待续……

本文目标构建基于 NPM 的大型 React 单页应用（以及多页面），支持多模块协同开发、分布式构建与发布。

React

React Router

Redux...

webpack

ES2015+/JSX with babel

JavaScript 规划

首先初始化顶层目录结构：

app/
config/
package.json
README.md
... and tons of project .dotfiles and tool files ...

按文件类型组织 File-Type First (FTF)

app/
  reducers/
    root.js
    memberships.js
  components/
    home.jsx
    memberships.jsx
  ... of course more type folders/ ...

按功能组织 Feature First (Pods)

app/
  authentication/
    api/
    components/
    helpers/
    ...
  comments/
    actions/
    api/
    components/
    reducers/
    stores/
    ...
  ...

可以像这样按功能分组：

app/
  settings/
    profile/
    notifications/
  ...

那么通用文件如何放置呢？一个方案是将他们放入框架文件夹：

app/
  flux/
    apiUtils.js
    baseActions.js
    baseStore.js
    connectToStores.js

多 App 模式 Multiple Apps

app/
  kapost.jsx
  studio/
    studioEntry.jsx
    content/
    ...
  gallery/
    galleryEntry.jsx
    collections/
    ...
  insights/
    insightsEntry.jsx
    content-scoring/
    ...
  members/
    membersEntry.jsx
    profile/
    ...

依然有很多通用代码，可以放入通用文件夹：

app/
  ...
  shared/
    users/
    ui/
      dropdowns/
      ...
    ...

到目前为止，按功能组织模式仍然可以 hold 住，我们可以在每个 App 使用按文件类型组织模式，但是依然有缺点，仅仅适合单 App 模式。

面对疯狂增长的 routes 或者 reducers，还有一种优雅的方式是使用代码分包（code-splitting），例如动态加载 React Router 和动态增加 Redux reducers，那么我们如何组织这些文件呢？我们可以定义一个顶级文件夹 boot/，一个项目文件夹例如 kapost/。

app/
  kapost/
    routes.jsx (holds and rolls up all other app routes dynamically)
    reducer.js (holds all reducers dynamically)
  studio/
    studioEntry.jsx
    app/
      routes.jsx (rolls up all application routes)
      reducers.jsx (rolls up all studio reducers across all the feature folders)
    ...
  ...

……

Application Organization API 同构 Universal Rendering

relative paths in Node

Backend Apps with Webpack (Part I)

Backend Apps with Webpack: Driving with Gulp (Part II)

Live Editing JavaScript with Webpack (Part III)

react-redux-universal-hot-example

Domains and Authentication

JSON Web Tokens

Secure cookies over HTTPS (under one primary domain name)

App Configuration Assets

webpack dev server

Styles

CSS 方案：

SASS

LESS

Inline Style

PostCSS

CSS Modules

构建工具：

autoprefixer

webpack for stylesheets

Introduction to Using NPM as a Build Tool

本文基于 SASS 实现模块化方案。

Without webpack and inlining

每个项目的样式文件目录：

studio/
  app/
  config/
  stylesheets/
  spec/
  package.json
  ...

每个样式文件通过命名空间来实现模块化，根据组件确定前缀：

studio/
  app/
    comments/
      commentEntry.jsx
  stylesheets/
    comments/
      _commentEntry.scss

// _commentEntry.scss
.studio-comment-entry-component {
  // my name-spaced styles
}


// commentEntry.jsx#render
render() {
  ...
}

共享的样式可以放入 shared/ 目录，全局样式可以放入类似 stylesheets/app/ 的目录（使用命名空间）。

每个 app 都负责引入所有功能模块的样式文件，顶层 app 负责引入所有子 app 的样式文件。如果分离一些 apps 到分离的代码仓库，可以共享相同的构建流程，只需要维护相同的构建配置。

With webpack and inlining

studio/
  app/
    comments/
      styles/
        individualComponentStylesheet.scss
      ...

Why You Shouldn’t Style React Components With JavaScript

Testing

studio/
  app/
    comments/
      components/
      commentsContainer.jsx
      specs/
        components/ (unit tests of sorts)
        integration/ (testing entire comment feature)
        commentsContainerSpec.jsx (container could even be the main integration test)
        ...
      ...

基于 NPM 的协同开发方案

私有 NPM 方案：

官方私有 NPM

搭建私有 NPM 仓库

NPM 分包：

@kapost/app
@kapost/studio
@kapost/gallery
@kapost/insights
...

module/
  ...
  assets
  dist
  js
  scss
  test
  tools
  routes.jsx
  package.json

……

分布式编译

gulp + webpack + babel

gulp + System.js + babel

参考：

Organizing Large React Applications

基于gulp+webpack的"约定大于配置"的构建方案探讨

基于gulp+webpack的"约定大于配置"的构建方案探讨_2

Ducks: Redux Reducer Bundles

专线服务云服务器全场景2-6多副本分布式存储多应用多线程应用多页面应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91588.html

koa-cola：只需一个react组件，同时支持单页应用(SPA)和服务器渲染(SSR)

摘要：是一个基于和的服务器端和浏览器端的的前后端全栈应用框架。是的组件，并且会进行数据初始化不但可以支持的数据初始化，还可以合并和的，使用同一个，和的无缝结合。 koa-cola是一个基于koa和react的服务器端SSR(server side render)和浏览器端的SPA(single page application)的web前后端全栈应用框架。 koa-cola使用typescr...

XGBCCC 2019-08-22 10:54 评论0 收藏0
前端每周清单第 10 期：Firefox53、React VR发布、Microsoft Edge现代

摘要：新闻热点国内国外，前端最新动态发布近日，正式发布新版本中提供了一系列的特性与问题修复。而近日正式发布，其能够帮助开发者快速构建应用。前端每周清单第 10 期：Firefox53、React VR发布、JS测试技术概述、Microsoft Edge现代DOM树构建及性能之道为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的 Web 前端入门...

MingjunYang 2019-08-20 16:04 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
ESLint 在中大型团队的应用实践

摘要：自动化接入和升级方案通过命令行工具提供一键接入升级能力，同时集成到团队脚手架中，大大降低了工程接入和维护的成本。原始代码经过解析器的解析，在管道中逐一经过所有规则的检查，最终检测出所有不符合规范的代码，并输出为报告。引言代码规范是软件开发领域经久不衰的话题，几乎所有工程师在开发过程中都会遇到，并或多或少会思考过这一问题。随着前端应用的大型化和复杂化，越来越多的前端工程师和团队开始重...

alogy 2019-08-26 10:34 评论0 收藏0
“别更新了，学不动了” 之：全栈开发者 2019 应该学些什么？

摘要：但是，有一件事是肯定的年对全栈开发者的需求量很大。有一些方法可以解决这个问题，例如模式，或者你可以这么想，其实谷歌机器人在抓取单页应用程序时没有那么糟糕。谷歌正在这方面努力推进，但不要指望在年会看到任何突破。对于什么是全栈开发者并没有一个明确的定义。但是，有一件事是肯定的：2019 年对全栈开发者的需求量很大。在本文中，我将向你概述一些趋势，你可以尝试根据这些趋势来确定你可能要投入的...

NervosNetwork 2019-08-23 14:48 评论0 收藏0