antd源碼解讀（1）-index.js

zeyu 發(fā)布于2019-08-21 16:58 / 3151人閱讀

github: 地址
gitbook: 地址

Index.js

看一個(gè)代碼的時(shí)候首先當(dāng)然是從他的入口文件開始看起，所以第一份代碼我們看的是/index.js文件

開始

打開index.js文件，代碼只有28行，其中包含了一個(gè)camelCase函數(shù)（看函數(shù)名就知道這是個(gè)給名稱進(jìn)行駝峰命名法的函數(shù)），一個(gè)req變量，以及這個(gè)的變量操作和export操作

在這個(gè)文件里面我首先查了require.context()這個(gè)函數(shù)的使用，可以參考這里，以及exports和module.exports的區(qū)別，可以參考這里，這里是一些鋪墊，下面進(jìn)入正題

通過上面兩個(gè)鋪墊，我們知道了req這個(gè)變量是用來循環(huán)拋出組件的一個(gè)對(duì)象，并且還拋出了每一個(gè)組件的樣式文件

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

  // 拋出樣式 這個(gè)正則是匹配當(dāng)前目錄下的所有的/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;
    }
    // 拋出組件 這個(gè)正則是匹配當(dāng)前目錄下的素有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");

但是最后不知道為甚還需要加上對(duì)吼那一句module.exports = require("./components");
既然上面都已經(jīng)拋出，為什么這里還需要再次拋出，不過好像是跟什么環(huán)境和打包之后的一些操作有關(guān)，所以這里一兩次拋出。這個(gè)地方還需要向大家請(qǐng)教。