antd原始碼解讀（1）-index.js

markzzw發表於2017-10-10
原始碼IndexJS

github: 地址
gitbook: 地址

Index.js

看一個程式碼的時候首先當然是從他的入口檔案開始看起，所以第一份程式碼我們看的是/index.js檔案

開始

開啟index.js檔案，程式碼只有28行，其中包含了一個camelCase函式（看函式名就知道這是個給名稱進行駝峰命名法的函式），一個req變數，以及這個的變數操作和export操作

在這個檔案裡面我首先查了require.context()這個函式的使用，可以參考這裡，以及exports和module.exports的區別，可以參考這裡，這裡是一些鋪墊，下面進入正題

通過上面兩個鋪墊，我們知道了req這個變數是用來迴圈丟擲元件的一個物件，並且還丟擲了每一個元件的樣式檔案

  // index.js
  function camelCase(name) {
    return name.charAt(0).toUpperCase() +
      name.slice(1).replace(/-(\w)/g, (m, n) => {
        return n.toUpperCase();
      });
  }

  // 丟擲樣式 這個正則是匹配當前目錄下的所有的/style/index.tsx檔案
  const req = require.context('./components', true, /^\.\/[^_][\w-]+\/style\/index\.tsx?$/);

  req.keys().forEach((mod) => {
    let v = req(mod);
    if (v && v.default) {
      v = v.default;
    }
    // 丟擲元件 這個正則是匹配當前目錄下的素有index.tsx檔案
    const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/);
    if (match && match[1]) {
      if (match[1] === 'message' || match[1] === 'notification') {
        // message & notification should not be capitalized
        exports[match[1]] = v;
      } else {
        exports[camelCase(match[1])] = v;
      }
    }
  });

  module.exports = require('./components');複製程式碼

但是最後不知道為甚還需要加上對吼那一句module.exports = require('./components');
既然上面都已經丟擲，為什麼這裡還需要再次丟擲，不過好像是跟什麼環境和打包之後的一些操作有關，所以這裡一兩次丟擲。這個地方還需要向大家請教。

相關文章