乐趣区

关于vue.js:利用webpack-requirecontext加载多个vue组件

jiezi
场景

咱们在开发我的项目的时候，会遇到某个组件需加载多个组件，失常的状况下；咱们会用一下形式去引入：

  import A from './components/a.vue'
  import B from './components/b.vue'
  import C from './components/c.vue'
  
  components: {
          A,
          B,
          C
   },

或者间接用异步组件的形式：

components: {A: resolve => require(['./components/a.vue'],resolve),
      B: resolve => require(['./components/b.vue'],resolve),
      c: resolve => require(['./components/c.vue'],resolve),
    },

只引入三个还好，如果须要引入很多呢？

  • 代码看起来很乱
  • 不便于保护、不优雅

明天尝试用了 webpack 中 require.context，完满解决了这个问题。
官网文档
其实 VUE 官网也提供了这种解决方案；传送门

  • 根本用法

require.context 接管三个参数：

  1. 须要搜寻的文件夹目录（必传）
  2. 是否须要搜寻它的子孙目录，默认为 false
  3. 匹配文件名的正则表达式

引入咱们的组件便能够这么做：

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查问其子目录
  false,
  // 匹配根底组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

咱们能够再控制台打印这个 requireComponent，会失去如下：

webpackContext(req) {var id = webpackContextResolve(req);
    return \_\_webpack\_require\_\_(id);
}

再深刻的我就没去看了，当前缓缓深挖；

  • 利用到我的项目中的代码如下：

在 libs 文件夹下创立 requireComponents.js 文件

/** 利用 require.context 动静引入指定目录下的所有.vue 组件，并注册为全局组件 **/
import Vue from 'vue'
const requireAreaComponent = require.context(
  // 其组件目录的相对路径
  '../view/components/AreaBudgetManagement/ReportsCheckTemplate/childTemplate',
  // 是否查问其子目录
  false,
  // 匹配根底组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)
const requireProjectComponent = require.context(
  // 其组件目录的相对路径
  '../view/components/GroupBudgetManagement/ReportsCheckTemplate/childTemplate',
  // 是否查问其子目录
  false,
  // 匹配根底组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

console.log("requireProjectComponent", requireProjectComponent)
const requireComp = (r) => {r.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = r(fileName)

    // 获取组件的 PascalCase 命名
    const componentName = upperFirst(
      camelCase(
        // 获取和目录深度无关的文件名
        fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
      )
    )

    // 全局注册组件
    Vue.component(
      componentName,
      // 如果这个组件选项是通过 `export default` 导出的，// 那么就会优先应用 `.default`，// 否则回退到应用模块的根。componentConfig.default || componentConfig
    )
  })
}
// 注册区域、团体里明细页面所有组件
[requireAreaComponent,requireProjectComponent].forEach(item => requireComp(item))

main.js
`
import ‘@/libs/requireComponents’
`
这样就相当于全局注册了，在咱们须要用的中央间接应用。

require.context 还有其余的用法，比方查找某个文件夹下的 js 文件：

const requireJs = require.context('../api', false, /\.js$/)
let fileNames = requireJs.keys();
console.log("fileNames", fileNames)

打印：

心愿对还在
import from
import from
import from
import from
的同学有帮忙~

退出移动版