antd源码解读（1）-index.js

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');
既然上面都已经抛出，为何这里还须要再次抛出，不过好像是跟什么环境和打包以后的一些操做有关，因此这里一两次抛出。这个地方还须要向你们请教。