webpack构建的项目自动引用文件下的所有指定类型的文件

mudiyouyou 发布于2019-08-23 13:00 / 1843人阅读

摘要：需求背景是这样，下有个文件，在中导出所有的文件，需要做到在新增文件时，自动引入到中。

需求背景是这样，./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;
}

专线服务私有云指定文件类型服务器下的文件路径 php查找指定的文件系统找不到指定的文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99142.html

使用webpack构建多页应用

摘要：然而在某些特殊的应用场景之中，则需要使用到传统的多页应用。在使用进行项目工程化构建时，也需要对应到调整。配置入口设置多页应用的打包会对应多个入口文件，以及多个模版文件。方法一使用的文件系统。组合如下完整可查看多页应用背景随着react, vue, angular 三大前端框架在前端领域地位的稳固，SPA应用正在被应用到越来越多的项目之中。然而在某些特殊的应用场景之中，则需要使用到传...

IamDLY 2019-08-23 16:50 评论0 收藏0
webpack + gulp 在前端中的应用

摘要：概述从去年短时间内对现有系统的改造到如今稳定实施，已经好几个月，这套流程满足了日常前端开发的流程。在讲这之前简单说下前端模块化历程。模块化以上是在规范出来之前的编码方式，大家应该非常熟悉。只要在代码中用来异步加载模块即可。概述从去年短时间内对现有系统的改造到如今稳定实施，已经好几个月，这套流程满足了日常前端开发的流程。由于之前项目组的模块化本身做的不是很好，基本算是推到一半重来，虽...

remcarpediem 2019-08-19 18:19 评论0 收藏0
webpack + gulp 在前端中的应用

摘要：概述从去年短时间内对现有系统的改造到如今稳定实施，已经好几个月，这套流程满足了日常前端开发的流程。在讲这之前简单说下前端模块化历程。模块化以上是在规范出来之前的编码方式，大家应该非常熟悉。只要在代码中用来异步加载模块即可。概述从去年短时间内对现有系统的改造到如今稳定实施，已经好几个月，这套流程满足了日常前端开发的流程。由于之前项目组的模块化本身做的不是很好，基本算是推到一半重来，虽...

Lucky_Boy 2019-08-05 17:48 评论0 收藏0
webpack 构建性能优化策略小结

摘要：但是，随者工程开发的复杂程度和代码规模不断地增加，暴露出来的各种性能问题也愈发明显，极大的影响着开发过程中的体验。对应的资源也可以直接由页面外链载入，有效地减小了资源包的体积。背景如今前端工程化的概念早已经深入人心，选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配，而在诸多的构建工具中，webpack以其丰富的功能和灵活的配置而深受业内吹捧，逐步取代了grunt和gu...

hiYoHoo 2019-08-21 11:21 评论0 收藏0
基于webpack的前后端分离开发环境实战

摘要：背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重视，前端负责展现交互逻辑，后端负责业务数据接口，基本上也成为了我们日常项目分工中的标配，但是前后端分离背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准web应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重...

soasme 2019-08-22 11:03 评论0 收藏0