vue

利用 webpack 的 require.context 自动注

2021-08-07  本文已影响0人  AizawaSayo

webpack 的 require.context 函数可以用来创建自己的 context。webpack 会在构建中解析代码中的 require.context()

require.context('./test', false, /\.test\.js$/);
//(创建出)一个 context,其中文件来自 test 目录,request 以 `.test.js` 结尾。

这行代码会去当前目录下的 test 文件夹 (不包括子目录) 下找所有以.test.js结尾的能被 require 的文件。
更直白地说就是,我们可以通过正则匹配引入相应的文件模块

require.context 方法有三个参数:

正文开始:

  1. 我们先创建一个 GlobalComs 目录,里面放需要注册到全局的组件。建议只包含经常使用且体积不大的组件,不然打包出来的初始 js 太大就不好了。


  2. 给组件提供name,不然注册时就采用.vue文件的文件名命名

    UploadSingle 组件
  3. 在 GlobalComs 目录下新建一个index.js文件:

import Vue from 'vue'
// 自动注册全局组件
function registerAllComponents(requireContext) {
  return requireContext.keys().forEach(comp => {
    const vueComp = requireContext(comp)
    // default.name 就是我们 .vue 组件导出的 name
    // 这块逻辑需要根据自己的命名习惯去调整
    const compName = vueComp.default.name ? vueComp.default.name : /\/([\w-]+)\.vue$/.exec(comp)[1]
    Vue.component(compName, vueComp.default)
  })
}

// 注册当前目录下的所有 .vue 文件,包括子目录
registerAllComponents(require.context('./', true, /\.vue$/))
  1. src/main.js导入这个文件即可:
// 自动注册全局组件
import './components/GlobalComs'
  1. 可以在任意模版中愉快地直接使用了:
<template>
  <div class="app-container">
    ...
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryInfo.page"
      :limit.sync="queryInfo.pageSize"
      @pagination="fetchData"
    />
    <el-dialog>
      <upload-single v-model="newIslander.photoSrc" drag />
    </el-dialog>
    ...
  </div>
</template>

完事儿~

上一篇下一篇

猜你喜欢

热点阅读