笔记-前端工程化引入文件

牛腩的小鱼饼

已于 2022-02-11 09:59:36 修改

阅读量514

点赞数 1

文章标签： vue.js javascript webpack

于 2022-02-10 09:35:49 首次发布

本文链接：https://blog.csdn.net/weixin_43913262/article/details/122853751

版权

vue动态引入组件

// 引入所有需要的动态组件
const requireComponent = require.context(
  "@/components/comContent", //组件所在目录的相对路径
  true, //是否查询其子目录
  /\w+\.vue$/ //匹配基础组件文件名的正则表达式
);
var comObj = { draggable };
requireComponent.keys().forEach((fileName) => {
  // 获取文件名
  var names = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");
  // 获取组件配置
  const componentConfig = requireComponent(fileName);
  // 若该组件是通过"export default"导出的，优先使用".default"，否则退回到使用模块的根
  comObj[names] = componentConfig.default || componentConfig;
});

// vue注册components
export default {
	components: comObj,
}

动态引入api

let api = {};
// 查询当前目录及子目录下的js
let files = require.context('./', true, /\.js$/)
files.keys().forEach(key => {
    if (key === './index.js') return;
    // 只保留文件名，需要避免文件名相同
    api[key.replace(/(\.\/|\w{0,}\/|\.js)/g, '')] = files(key).default
})
export default api

require.context()的使用

/*
这是webpack的一个api,可以使用此方法来创建自己的（模块）上下文，这个方法有 3 个参数：
	directory {String} -读取文件的路径
	useSubdirectories {Boolean} -是否遍历文件的子目录
	regExp {RegExp} -匹配文件的正则
*/
require.context(directory, useSubdirectories = false, regExp = /^\.\//)