kangkai124
commented
5 years ago webpack
自定义匹配规则，动态引入模块。
// 目录结构
|- index.js
|- components
|- a.js
|- b.js// a.js
console.log(1);
module.exports = {
hello: 'hello'
}// b.js
console.log(2);
module.exports = {
kk: 'kk'
}// index.js
const componentsContext = require.context('./components', true, /\.js$/)
console.log(componentsContext.keys()) // ["./a.js", "./b.js"]
function importAll(r) {
console.log(r) // ƒ webpackContext(req) {}
r.keys().forEach(component => {
console.log(component); // ./a.js ./b.js
const componentConfig = componentsContext(component)
console.log(componentConfig) // {hello: "hello"} {kk: 'kk'}
});
}
importAll(componentsContext);在 vue 中的应用：在components目录下创建一个global目录，里面放置一些需要全局注册的组件。
// components/index.js
import Vue from 'vue'
// 自动加载 global 目录下的 .js 结尾的文件
const componentsContext = require.context('./global', true, /\.js$/)
componentsContext.keys().forEach(component => {
const componentConfig = componentsContext(component)
/**
* 兼容 import export 和 require module.export 两种规范
*/
const ctrl = componentConfig.default || componentConfig
Vue.component(ctrl.name, ctrl)
})
关于 webpack、npm、cli 等