亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

webpack構(gòu)建的項(xiàng)目自動(dòng)引用文件下的所有指定類型的文件

mudiyouyou / 2078人閱讀

摘要：需求背景是這樣，下有個(gè)文件，在中導(dǎo)出所有的文件，需要做到在新增文件時(shí)，自動(dòng)引入到中。

需求背景是這樣，./api/modules/下有n個(gè)js文件，在./api/index中導(dǎo)出所有modules的js文件，需要做到在modules新增js文件時(shí)，自動(dòng)引入到./api/index中。因?yàn)樵诰W(wǎng)上找不到好的解決方案，只能自己動(dòng)手了

那么我就需要一個(gè)可以需求所有文件列表的api,也就是require.context,這里你們可以自己去找文檔啦，

require.context調(diào)用后會(huì)返回一個(gè)對(duì)象，對(duì)象的keys方法會(huì)返回文件列表，既然有了文件列表，那么就可以手動(dòng)引入了，這里因?yàn)閕mport只能在頂層作用域使用，所以我們使用的是require，在這里會(huì)有一個(gè)坑，require的參數(shù)只能是字符串或者字符串+變量，如果是變量會(huì)拋出錯(cuò)誤，最后我們只要把獲取到的值導(dǎo)出就行啦！

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;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99142.html

相關(guān)文章

  • 使用webpack構(gòu)建多頁應(yīng)用

    摘要：然而在某些特殊的應(yīng)用場(chǎng)景之中，則需要使用到傳統(tǒng)的多頁應(yīng)用。在使用進(jìn)行項(xiàng)目工程化構(gòu)建時(shí)，也需要對(duì)應(yīng)到調(diào)整。配置入口設(shè)置多頁應(yīng)用的打包會(huì)對(duì)應(yīng)多個(gè)入口文件，以及多個(gè)模版文件。方法一使用的文件系統(tǒng)。組合如下完整可查看多頁應(yīng)用 背景 隨著react, vue, angular 三大前端框架在前端領(lǐng)域地位的穩(wěn)固，SPA應(yīng)用正在被應(yīng)用到越來越多的項(xiàng)目之中。然而在某些特殊的應(yīng)用場(chǎng)景之中，則需要使用到傳...

    IamDLY 評(píng)論0 收藏0

  • webpack + gulp 在前端中的應(yīng)用

    摘要：概述從去年短時(shí)間內(nèi)對(duì)現(xiàn)有系統(tǒng)的改造到如今穩(wěn)定實(shí)施，已經(jīng)好幾個(gè)月，這套流程滿足了日常前端開發(fā)的流程。在講這之前簡單說下前端模塊化歷程。模塊化以上是在規(guī)范出來之前的編碼方式，大家應(yīng)該非常熟悉。只要在代碼中用來異步加載模塊即可。 概述 從去年短時(shí)間內(nèi)對(duì)現(xiàn)有系統(tǒng)的改造到如今穩(wěn)定實(shí)施，已經(jīng)好幾個(gè)月，這套流程滿足了日常前端開發(fā)的流程。由于之前項(xiàng)目組的模塊化本身做的不是很好，基本算是推到一半重來，雖...

    remcarpediem 評(píng)論0 收藏0

  • webpack 構(gòu)建性能優(yōu)化策略小結(jié)

    摘要：但是，隨者工程開發(fā)的復(fù)雜程度和代碼規(guī)模不斷地增加，暴露出來的各種性能問題也愈發(fā)明顯，極大的影響著開發(fā)過程中的體驗(yàn)。對(duì)應(yīng)的資源也可以直接由頁面外鏈載入，有效地減小了資源包的體積。 背景 如今前端工程化的概念早已經(jīng)深入人心，選擇一款合適的編譯和資源管理工具已經(jīng)成為了所有前端工程中的標(biāo)配，而在諸多的構(gòu)建工具中，webpack以其豐富的功能和靈活的配置而深受業(yè)內(nèi)吹捧，逐步取代了grunt和gu...

    hiYoHoo 評(píng)論0 收藏0

  • 基于webpack的前后端分離開發(fā)環(huán)境實(shí)戰(zhàn)

    摘要：背景隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化，我們?cè)陂_發(fā)一個(gè)標(biāo)準(zhǔn)應(yīng)用的早已開始告別單干模式，為了提升開發(fā)效率，前后端分離的需求越來越被重視，前端負(fù)責(zé)展現(xiàn)交互邏輯，后端負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)接口，基本上也成為了我們?nèi)粘ｍ?xiàng)目分工中的標(biāo)配，但是前后端分離 背景 隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化，我們?cè)陂_發(fā)一個(gè)標(biāo)準(zhǔn)web應(yīng)用的早已開始告別單干模式，為了提升開發(fā)效率，前后端分離的需求越來越被重...

    soasme 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<