基于 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
Secure cookies over HTTPS (under one primary domain name)
App Configuration
Assets
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
