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');
既然上面都已經丟擲,為什麼這裡還需要再次丟擲,不過好像是跟什麼環境和打包之後的一些操作有關,所以這裡一兩次丟擲。這個地方還需要向大家請教。