美文网首页
3行代码实现import一个目录下的所有文件

3行代码实现import一个目录下的所有文件

作者: 杭州_前端_求内推 | 来源:发表于2020-02-07 09:52 被阅读0次

    点赞再看,养成习惯,你们的支持是我持续分享的最大动力()

    最近在做一个理财App,在引入svg图片的时候,起初我是这样子处理的:

    import  money from '@/assets/icons/money.svg'
    import  labels from '@/assets/icons/labels.svg'
    import  statistics from '@/assets/icons/statistics.svg'
    

    刚开始只需要引入3svg图片,一个一个引入的话工程量也不是很大,可是如果后期随着项目的增大,需要引入的文件越来越多,处理起来将非常麻烦。

    于是就有了下面3行代码,一次性引入某一目录下相同后缀的所有文件:

     let importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext)
        try{
            //经验告诉我,这个代码在单元测试的时候可能会有问题,于是我就加了一个try catch
            importAll(require.context('../assets/icons',true,/\.svg$/));
        }catch(error){
            console.log(error);
        }
    

    有了上面三行代码,大大提高了开发的效率,即便后期有再多的svg图片需要引入也不需要担心。

    告诫自己,即使再累也不要忘记学习,成功没有捷径可走,只有一步接着一步走下去。 共勉!

    相关文章

      网友评论

          本文标题:3行代码实现import一个目录下的所有文件

          本文链接:https://www.haomeiwen.com/subject/bixmxhtx.html