基于 NPM 的大型 React 單頁應用探索（多場景多方案）

tinylcy 發布于2019-08-22 10:59 / 591人閱讀

摘要：基于的大型單頁應用探索多場景多方案原文地址未完待續本文目標構建基于的大型單頁應用以及多頁面，支持多模塊協同開發分布式構建與發布。

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

GPU云服務器云服務器全場景2-6多副本分布式存儲多應用多線程應用多頁面應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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