【代码片段】自动化导入组件模块

---

使用require.context代替大量使用import

1.require.context()

/**
 * dir:要查找的文件路径
 * useSubdirectories:是否查找子目录
 * regExp:要匹配文件的正则
 */
require.context(dir, useSubdirectories, regExp)

2.使用

---

目录结构

src
  ├── components
  |     ├─ A.js
  |     ├─ B.js
  |     └─ C.js 
  └── index.js

// index.js
const ctx = require.context('./components/', true, /\.js$/)
console.log(ctx.id) // './src/components'
// 返回的是模块内部变量map的keys，通过模块提供的keys()方法访问
console.log(ctx.keys()) // ['./A.js', './B.js', './C.js' ]
// 返回相对于整个工程的相对路径
console.log(ctx.resolve('./A.js')) // './src/components/A.js'

var map = {
	"./A.js": "./src/components/A.js",
	"./B.js": "./src/components/B.js",
	"./C.js": "./src/components/C.js"
};

function webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}
function webpackContextResolve(req) {
	var id = map[req];
	if(!(id + 1)) { // check for number or string
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return id;
}
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
webpackContext.id = "./src/components sync recursive \\.js$";
module.exports = webpackContext;

2.实际使用

// ./src/components/index.js

// 查找当前目录下所有的index.vue
const ctx = require.context('./', true, /index\.vue$/)

// install() 被Vue.use()调用
export default {
  install: (Vue) => {
    ctx.keys().forEach(i => {
      const component = ctx(i).default
      Vue.component(component.name, component)
    })
  }
}

// ./src/main.js
import Vue from 'vue'
import Components from '@/components/index.js'

// 全局注册公用组件
Vue.use(Components)

最后更新： 2021年11月30日 15:40

wsw