React原理探索- @providesModule 模塊系統

My_Oh_My 發布于2019-08-22 13:46 / 3322人閱讀

摘要：原理探索模塊系統是什么拋出組件化的概念后，對于開發者而言，為了提高代碼的可讀性與結構性，通過文件目錄結構去闡述組件嵌套關系無疑是一個很好的辦法，但是目錄級別的加深，同時讓的文件路徑讓人頭疼。

React原理探索- @providesModule 模塊系統 @providesModule是什么

react拋出組件化的概念后，對于開發者而言，為了提高代碼的可讀性與結構性，通過文件目錄結構去闡述組件嵌套關系無疑是一個很好的辦法，但是目錄級別的加深，同時讓require的文件路徑讓人頭疼。絕大多數公司會使用自己定制的alias工具，在腳手架入口配置文件中給相應的filePath賦予別名，pack時，進行統一替換。

#ykit.config

...
alias:{
    "Common":"./src/util/index.js",
    "Component":"src/components/index.js"
}
...

當然也可以在文件中寫入唯一的標識位，pack時將該標識位與當前聲明標識位的filePath建立聯系，facebook提供的@providesModule的就是這一策略。使用方法如下：

#a.js
/**
 * @providesModule Common
 */

export const isArray = () => {
    ...
}

export const isObject = () => {
    ...
}

#b.js

import { isArray } from "Common"

isArray([])

如何實現@providesModule

fbjs-script/gulp:

shared/provides-module.js中提供了這樣一段正則，用于匹配文件中是否有類似@providesModule的標識符

module.exports = {
  regexp: /
?
 * @providesModule (S+)(?=
?
)/,
};

modules-map.js 中：

transform函數調用如上正則對讀入文本進行解析，并將alias的別名與filePath建立映射關系

flush函數將前面拿到的映射表進行處理加上統一前綴，并導入到json文件中


  function transform(file, enc, cb) {
    if (file.isNull()) {
      cb(null, file);
      return;
    }

    if (file.isStream()) {
      cb(new gutil.PluginError("module-map", "Streaming not supported"));
      return;
    }

    // Get the @providesModule piece of out the file and save that.
    var matches = file.contents.toString().match(PM_REGEXP);
    if (matches) {
      var name = matches[1];
      if (moduleMap.hasOwnProperty(name)) {
        this.emit(
          "error",
          new gutil.PluginError(
            PLUGIN_NAME,
            "Duplicate module found: " + name + " at " + file.path + " and " +
              moduleMap[name]
          )
        );
      }
      moduleMap[name] = file.path;
    }
    this.push(file);
    cb();
  }
  
    function flush(cb) {
    // Keep it ABC order for better diffing.
    var map = Object.keys(moduleMap).sort().reduce(function(prev, curr) {
      // Rewrite path here since we don"t need the full path anymore.
      prev[curr] = prefix + path.basename(moduleMap[curr], ".js");
      return prev;
    }, {});
    fs.writeFile(moduleMapFile, JSON.stringify(map, null, 2), "utf-8", function() {
      // avoid calling cb with fs.write callback data
      cb();
    });
  }

最后導出如下json(以fbjs build為例)

{
  "BrowserSupportCore": "fbjs/lib/BrowserSupportCore",
  "CSSCore": "fbjs/lib/CSSCore",
  "CircularBuffer": "fbjs/lib/CircularBuffer",
  "DOMMouseMoveTracker": "fbjs/lib/DOMMouseMoveTracker",
  "DataTransfer": "fbjs/lib/DataTransfer",
  "Deferred": "fbjs/lib/Deferred",
  "ErrorUtils": "fbjs/lib/ErrorUtils",
  "EventListener": "fbjs/lib/EventListener",
  "ExecutionEnvironment": "fbjs/lib/ExecutionEnvironment",
  "Heap": "fbjs/lib/Heap",
  "IntegerBufferSet": "fbjs/lib/IntegerBufferSet",
  "Keys": "fbjs/lib/Keys",
  "Locale": "fbjs/lib/Locale",
  "Map": "fbjs/lib/Map",
  "PhotosMimeType": "fbjs/lib/PhotosMimeType",
  "PrefixIntervalTree": "fbjs/lib/PrefixIntervalTree",
  "Promise": "fbjs/lib/Promise",
  "PromiseMap": "fbjs/lib/PromiseMap",
}

而后該做什么大家也清楚了，要么node腳本去把文件里require 對應別名的進行路徑替換，要么通過babel替換，當然，facebook是通過babel玩的

題外話

其實對于alias system目前提供的兩種方法，各有利弊。fb提供的方法，使得使用上更加便利，但是由于alias遍地存在，聲明沖突也變得家常便飯（當然可以通過統一前綴解決）。傳統在腳手架配置文件中聲明的方法，雖然能讓你對alias的聲明一目了然，但是使用上也繁瑣很多

GPU云服務器云服務器 webrtc 降噪模塊原理 webrtc中AGC模塊的原理 webrtc的NS模塊的原理 providesModule

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92423.html

React Native組件開發指南

摘要：的組件開發一直處在一個比較尷尬的處境。目錄包含了當前組件的源碼，是組件開發最主要的目錄。許多的開發者對于依然持懷疑態度。 React Native的組件開發一直處在一個比較尷尬的處境。在官方未給予相關示例與腳手架的情況下，社區中依然誕生了許許多多的React Native組件。因為缺少示例與規范，很多組件庫僅含有一個index.js文件。這種基礎的目錄結構也導致了一些顯而易見的問題，例...

yuanxin 2019-08-23 15:29 評論0 收藏0
ReactNative-HMR原理探索

摘要：原理探索前言在開始本文前，先簡單說下我們在開發項目中，本地的服務究竟扮演的是什么樣的角色。這無疑是閹割了一大部分功能綜上，如果僅僅用于切圖，可能不會有那么多的問題 ReactNative-HMR原理探索前言在開始本文前，先簡單說下我們在開發RN項目中，本地的node服務究竟扮演的是什么樣的角色。在我們的RN APP中有配置本地開發的地方，只要我們輸入我們本地的IP和端口號8081就...

GT 2019-08-22 16:28 評論0 收藏0
初窺基于 react-art 庫的 React Native SVG

摘要：語法更近似于移動端。當參數為兩個時，等同于，繪制光滑二次貝塞爾曲線。有些精通的同學這時候可能就要問我了，不對啊，二次貝塞爾曲線和光滑三次貝塞爾曲線的參數都是個，你這里沒有光滑三次啊因為開發的同學留坑沒寫了呀微笑。和則是用于指定旋轉的原點。技術背景在移動應用的開發過程中，繪制基本的二維圖形或動畫是必不可少的。然而，考慮到Android和iOS均有一套各自的API方案，因此采用一種更普...

xiaowugui666 2019-08-19 17:35 評論0 收藏0
SegmentFault 技術周刊 Vol.4 - 這份 Android 有點甜

摘要：閱讀本期周刊，你將快速入門，開啟甜蜜之旅。然則的原理負責發送以及處理消息，創建消息隊列并不斷從隊列中取出消息交給，則用于保存消息。 showImg(/img/bVCN99?w=900&h=385); 2016 年 8 月，Android 7.0 Nougat（牛軋糖）正式發布，那么問題來了，你 Marshmallow 了么(? -? ?) Cupcake、Donut、Gingerbre...

jay_tian 2019-08-14 14:38 評論0 收藏0