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');