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