基于 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

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

构建工具：

本文基于 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() {
  <div className="studio-comment-entry-component">...</div>
}

共享的样式可以放入 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 分包：

@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

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