資訊專欄INFORMATION COLUMN
摘要：需求背景是這樣，下有個文件，在中導出所有的文件，需要做到在新增文件時，自動引入到中。
需求背景是這樣，./api/modules/下有n個js文件，在./api/index中導出所有modules的js文件，需要做到在modules新增js文件時，自動引入到./api/index中。因為在網上找不到好的解決方案，只能自己動手了
那么我就需要一個可以需求所有文件列表的api,也就是require.context,這里你們可以自己去找文檔啦，
require.context調用后會返回一個對象，對象的keys方法會返回文件列表，既然有了文件列表，那么就可以手動引入了，這里因為import只能在頂層作用域使用，所以我們使用的是require，在這里會有一個坑，require的參數只能是字符串或者字符串+變量，如果是變量會拋出錯誤，最后我們只要把獲取到的值導出就行啦！
this is the code
export default function (directory, useSubdirectories = false, regExp = /.(.*)$/) {
const context = require.context(directory, useSubdirectories, regExp);
const keys = context.keys();
let modules = {};
keys.forEach(item=>{
let file = item.replace("./","");
let name = /(.*/)([^.]).*/ig.exec(file)[1];
const data = require(`${directory}/${file}`);
const {default: d, ...o} = data;
modules[name] = {...d, ...o};
});
return modules;
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99142.html
摘要：然而在某些特殊的應用場景之中，則需要使用到傳統的多頁應用。在使用進行項目工程化構建時，也需要對應到調整。配置入口設置多頁應用的打包會對應多個入口文件，以及多個模版文件。方法一使用的文件系統。組合如下完整可查看多頁應用 背景 隨著react, vue, angular 三大前端框架在前端領域地位的穩固，SPA應用正在被應用到越來越多的項目之中。然而在某些特殊的應用場景之中，則需要使用到傳...
摘要：概述從去年短時間內對現有系統的改造到如今穩定實施，已經好幾個月，這套流程滿足了日常前端開發的流程。在講這之前簡單說下前端模塊化歷程。模塊化以上是在規范出來之前的編碼方式，大家應該非常熟悉。只要在代碼中用來異步加載模塊即可。 概述 從去年短時間內對現有系統的改造到如今穩定實施，已經好幾個月，這套流程滿足了日常前端開發的流程。由于之前項目組的模塊化本身做的不是很好，基本算是推到一半重來，雖...
摘要：但是，隨者工程開發的復雜程度和代碼規模不斷地增加，暴露出來的各種性能問題也愈發明顯，極大的影響著開發過程中的體驗。對應的資源也可以直接由頁面外鏈載入，有效地減小了資源包的體積。 背景 如今前端工程化的概念早已經深入人心，選擇一款合適的編譯和資源管理工具已經成為了所有前端工程中的標配，而在諸多的構建工具中，webpack以其豐富的功能和靈活的配置而深受業內吹捧，逐步取代了grunt和gu...
摘要：背景隨著互聯網應用工程規模的日益復雜化和精細化，我們在開發一個標準應用的早已開始告別單干模式，為了提升開發效率，前后端分離的需求越來越被重視，前端負責展現交互邏輯，后端負責業務數據接口，基本上也成為了我們日常項目分工中的標配，但是前后端分離 背景 隨著互聯網應用工程規模的日益復雜化和精細化，我們在開發一個標準web應用的早已開始告別單干模式，為了提升開發效率，前后端分離的需求越來越被重...
閱讀 1988·2021-11-19 09:40
閱讀 1931·2021-09-28 09:36
閱讀 2279·2021-09-22 10:02
閱讀 2724·2019-08-30 14:00
閱讀 1948·2019-08-29 15:31
閱讀 2893·2019-08-29 15:11
閱讀 2905·2019-08-29 13:04
閱讀 1080·2019-08-27 10:55
