最近プロジェクトを模倣した、次のディレクトリ、ベース内にいくつかの基本的なコンポーネントがありますが、main.js で通常の方法でグローバルに登録されていません。
プロジェクト ディレクトリ
//main.js
import global from './utils/global'
Vue.use(global)
//解释:如果自动化的代码直接写在一个js文件中直接全局的引入main.js 中也是没有问题的,
//但是这里是按照自定义插件的方式写下global文件中的就要使用vue的use方法
グローバルプラグインをカスタマイズし、グローバル 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 コンテキストを返します。これは、
3 つのパラメーターを持つ関数を返します。
- 検索するフォルダー ディレクトリ (変数にすることはできません。webpack はコンパイル フェーズ中にディレクトリを見つけることができません)
- 彼のサブディレクトリをもう一度検索しますか?
- ファイルに一致する正規表現
require.context(directory, useSubdirectories, regExp)
。
要約:
1 require.context モジュールは、パラメーターを受け入れることができる関数を返します。
2 require.context の最初のパラメーターを変数にすることはできません。webpack は、コンパイル フェーズ中にディレクトリを見つけることができません。
3 3 つの属性とメソッド、 resolve 、 keys 、 id があります。
- resolve は関数であり、受信ファイルのパスは解析されたモジュールの ID を取得します
- keys は、すべてのファイル パスの配列を返す関数です。
- id は、コンテキストに含まれるモジュールの ID です。module.hot.accept (ホット モジュール アップデート) を使用する場合に使用できます。
ダイアグラム
より明確な分析のために、下の 2 つの写真を見てください。