webpack的 rquire.context用法实现工程自动化的方法

最近仿写一个项目,如下目录,base内部都是一些基础的组件,但是并没有在main.js 中使用常规的方式去全局注册的,刚开始还不明白没有注册的组件怎么在全局使用的

项目目录

//main.js
import global from './utils/global'
Vue.use(global)
//解释:如果自动化的代码直接写在一个js文件中直接全局的引入main.js 中也是没有问题的,
//但是这里是按照自定义插件的方式写下global文件中的就要使用vue的use方法

自定义global插件,通过全局的Vue.use(global)来调用

//global.js
import {
 Input,
 Dialog,
} from "element-ui"
import VueLazyload from "vue-lazyload"
import Meta from 'vue-meta'
import * as utils from "./index"

export default {
 install(Vue) {
 const requireComponent = require.context(
  "@/base",
  true,
  /[a-z0-9]+\.(jsx?|vue)$/i,
 )
 //console.log(requireComponent);
 //console.log(requireComponent.keys(),)
 //console.log(requireComponent.resolve,)
 //console.log(requireComponent.id,)
 //console.log(requireComponent.resolve("./tabs.vue"))
 //console.log(requireComponent("./tabs.vue"));
 //console.log(requireComponent("./tabs.vue") === require("@/base/tabs"));

 // 批量注册base组件
 requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = componentConfig.default.name
  if (componentName) {
   Vue.component(componentName, componentConfig.default ||
    componentConfig)
  }
 })

 Vue.prototype.$ELEMENT = { size: "small" }
 Vue.prototype.$utils = utils

 Vue.use(Input)
 Vue.use(Dialog)
 Vue.use(Meta)
 },
}

解析 require.context

const requireComponent = require.context(
  "@/base",
  true,
  /[a-z0-9]+\.(jsx?|vue)$/i,
 )

require.context返回一个webpack的上下文环境 , 返回的是一个函数,

有三个参数:

  • 要搜索的文件夹目录,(不可以是变量,webpack在编译阶段无法定位目录)
  • 是否还要再搜索他的子目录
  • 匹配文件的正则表达式
require.context(directory, useSubdirectories, regExp);

总结:

  • require.context模块返回一个函数,这个函数可以接受一个参数,
  • require.context 的第一个参数不可以是变量,webpack在编译阶段无法定位到目录
  • 有三个属性和方法, resolve , keys , id
    • resolve 是一个函数,传入文件的路径得到解析后的模块的id
    • keys 是一个函数 , 返回所有文件路径组成的数组
    • id 是上下文环境中包含的模块的id , 可能在使用module.hot.accept (热模块更新)时使用

看下面两幅图片解析的更清晰

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈Webpack自动化构建实践指南

    由于现在的博客是使用wordpress搭建,自己得经常修改过一些代码,但是修改第三方源码真的比较痛苦,于是决定计划开始使用React + Node.js / Python开发新博客项目,最终替换当前博客代码,方便以后博客的维护和更新,也能实现自我开发技术,架构设计,解决问题能力的提升,同时记录下整个开发历程,总结,分享,希望能与读者们一起进步.本篇介绍如何使用Webpack和Babel,Eslint,documentation.js等搭建项目开发环境和生产环境,也算项目的准备工作,下一期计划介绍

  • 详解Vue-cli webpack移动端自动化构建rem问题

    相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上找了很多的方法发现以下问题: 1 照着老的视频教程去弄,发现node npm webpack px2rem的各种插件版本都不一样,根本没用 2 网上的教程缺斤少俩,不完整,搞得我整了半天搞不定,想想干脆手动vscode 的cssrem设置算了,但老子还是不服气,东拼西凑还是整出来了,最后还是研究出了以下方法希望对大家的移动端自动化构建rem有帮助 1 安装v

  • webpack的 rquire.context用法实现工程自动化的方法

    最近仿写一个项目,如下目录,base内部都是一些基础的组件,但是并没有在main.js 中使用常规的方式去全局注册的,刚开始还不明白没有注册的组件怎么在全局使用的 项目目录 //main.js import global from './utils/global' Vue.use(global) //解释:如果自动化的代码直接写在一个js文件中直接全局的引入main.js 中也是没有问题的, //但是这里是按照自定义插件的方式写下global文件中的就要使用vue的use方法 自定义global

  • 从零开始用webpack构建一个vue3.0项目工程的实现

    前言 入门级别教程,适用于初级工程师 移动端 单页面  Demo 正文 第一步 找一个你认为合适的磁盘.输入mkdir test, cd test , npm init -y. 第二步 安装依赖 webpack 系列依赖 webpack webpack-cli babel 系列依赖 @babel/core @babel/preset-env 移动兼容方案 amfe-flexible autoprefixer axios axios webpack loader babel-loader css-

  • 使用gulp构建前端自动化的方法示例

    使用gulp构建前端自动化的方法示例

    gulp是一个自动化构建工具,开发者可以用它来自动执行一些常见的任务.这里以我之前做的一个demo为例,简要介绍如何使用gulp实现前端工程自动化. 项目结构 其中src目录下表示的是项目的源代码,可以看到其中有less.js.html等,而dist目录则是保存的是gulp编译后生成的代码,相当于生产环境.最后也最重要的是gulpfile.js,这个文件用于设置gulp相关的配置,类似于webpack中的webpack.config.js. 安装 这里使用的gulp为v3.9.1,语法和最新的v

  • 详解用webpack把我们的业务模块分开打包的方法

    详解用webpack把我们的业务模块分开打包的方法

    webpack我自己还在摸索学习中,今天给大家分享个用webpack把我们的业务模块分开打包的方法,顺便留个笔记 如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js: // entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'], 这样就可以全部打包,最终生成./build/js/build.js 1,那么如果我们想最后生成不同的文件,

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • webpack配置导致字体图标无法显示的解决方法

    问题:在项目开发时使用字体图标,报错如下: 所有的字体图标都不能正常显示了,报错提示不能解码字体. 解决问题:找了很久,最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误:在 webpack.base.conf.js文件中删除 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }, 总结: 其实采用vue-cli 自动生成的配置文件已经完成了字体图标文件的编译,自己写的和自动生成的产生冲

  • Vue webpack 项目自动打包压缩成zip文件的方法

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i

  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • vue init webpack myproject构建项目 ip不能访问的解决方法

    问题 vue init webpack myproject构建项目 使用localhost 或者127.0.0.1 均可以正常访问,但是切换到本地ip就不行了 解决方式 在 webpack.dev.conf.js 追加以下代码 const HOST = process.env.HOST || '0.0.0.0'; 重新启动 npm run dev 重新打开即可 以上这篇vue init webpack myproject构建项目 ip不能访问的解决方法就是小编分享给大家的全部内容了,希望能给大家

  • vue webpack build资源相对路径的问题及解决方法

    默认情况webpack+vue-cli打包的css.js等静态资源路径都是绝对的,即static在根目录下,如果部署到带有文件夹目录的项目中,资源路径就会出错. 如图: 解决方法: 在webpack.prod.conf.js中,output中添加或者修改为 publicPath: './': output: { publicPath: './', path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunk

随机推荐