亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

tinylcy / 657人閱讀

摘要：基于的大型單頁應(yīng)用探索多場景多方案原文地址未完待續(xù)本文目標(biāo)構(gòu)建基于的大型單頁應(yīng)用以及多頁面，支持多模塊協(xié)同開發(fā)分布式構(gòu)建與發(fā)布。

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

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

未完待續(xù)……

本文目標(biāo)構(gòu)建基于 NPM 的大型 React 單頁應(yīng)用（以及多頁面），支持多模塊協(xié)同開發(fā)、分布式構(gòu)建與發(fā)布。

React

React Router

Redux...

webpack

ES2015+/JSX with babel

JavaScript 規(guī)劃

首先初始化頂層目錄結(jié)構(gòu)：

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，還有一種優(yōu)雅的方式是使用代碼分包（code-splitting），例如動態(tài)加載 React Router 和動態(tài)增加 Redux reducers，那么我們?nèi)绾谓M織這些文件呢？我們可以定義一個頂級文件夾 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 同構(gòu) 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

構(gòu)建工具：

autoprefixer

webpack for stylesheets

Introduction to Using NPM as a Build Tool

本文基于 SASS 實現(xiàn)模塊化方案。

Without webpack and inlining

每個項目的樣式文件目錄：

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

每個樣式文件通過命名空間來實現(xiàn)模塊化，根據(jù)組件確定前綴：

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 都負責(zé)引入所有功能模塊的樣式文件，頂層 app 負責(zé)引入所有子 app 的樣式文件。如果分離一些 apps 到分離的代碼倉庫，可以共享相同的構(gòu)建流程，只需要維護相同的構(gòu)建配置。

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 的協(xié)同開發(fā)方案

私有 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的"約定大于配置"的構(gòu)建方案探討

基于gulp+webpack的"約定大于配置"的構(gòu)建方案探討_2

Ducks: Redux Reducer Bundles

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91588.html

相關(guān)文章

  • koa-cola：只需一個react組件，同時支持單頁應(yīng)用(SPA)和服務(wù)器渲染(SSR)

    摘要：是一個基于和的服務(wù)器端和瀏覽器端的的前后端全棧應(yīng)用框架。是的組件，并且會進行數(shù)據(jù)初始化不但可以支持的數(shù)據(jù)初始化，還可以合并和的，使用同一個，和的無縫結(jié)合。 koa-cola是一個基于koa和react的服務(wù)器端SSR(server side render)和瀏覽器端的SPA(single page application)的web前后端全棧應(yīng)用框架。 koa-cola使用typescr...

    XGBCCC 評論0 收藏0

  • 前端每周清單第 10 期：Firefox53、React VR發(fā)布、Microsoft Edge現(xiàn)代

    摘要：新聞熱點國內(nèi)國外，前端最新動態(tài)發(fā)布近日，正式發(fā)布新版本中提供了一系列的特性與問題修復(fù)。而近日正式發(fā)布，其能夠幫助開發(fā)者快速構(gòu)建應(yīng)用。 前端每周清單第 10 期：Firefox53、React VR發(fā)布、JS測試技術(shù)概述、Microsoft Edge現(xiàn)代DOM樹構(gòu)建及性能之道 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請與InfoQ中文站聯(lián)系。從屬于筆者的 Web 前端入門...

    MingjunYang 評論0 收藏0

  • 指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

    摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計使用的站點是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...

    AlphaWallet 評論0 收藏0

  • ESLint 在中大型團隊的應(yīng)用實踐

    摘要：自動化接入和升級方案通過命令行工具提供一鍵接入升級能力，同時集成到團隊腳手架中，大大降低了工程接入和維護的成本。原始代碼經(jīng)過解析器的解析，在管道中逐一經(jīng)過所有規(guī)則的檢查，最終檢測出所有不符合規(guī)范的代碼，并輸出為報告。 引言 代碼規(guī)范是軟件開發(fā)領(lǐng)域經(jīng)久不衰的話題，幾乎所有工程師在開發(fā)過程中都會遇到，并或多或少會思考過這一問題。隨著前端應(yīng)用的大型化和復(fù)雜化，越來越多的前端工程師和團隊開始重...

    alogy 評論0 收藏0

  • “別更新了，學(xué)不動了” 之：全棧開發(fā)者 2019 應(yīng)該學(xué)些什么？

    摘要：但是，有一件事是肯定的年對全棧開發(fā)者的需求量很大。有一些方法可以解決這個問題，例如模式，或者你可以這么想，其實谷歌機器人在抓取單頁應(yīng)用程序時沒有那么糟糕。谷歌正在這方面努力推進，但不要指望在年會看到任何突破。 對于什么是全棧開發(fā)者并沒有一個明確的定義。但是，有一件事是肯定的：2019 年對全棧開發(fā)者的需求量很大。在本文中，我將向你概述一些趨勢，你可以嘗試根據(jù)這些趨勢來確定你可能要投入的...

    NervosNetwork 評論0 收藏0

發(fā)表評論

0條評論

tinylcy

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<