网站建设要些什么,阿里巴巴网站装修,企业展厅设计制作,wordpress前台投稿 djd1. 作用#xff1a;
利用require创建context (上下文)#xff0c;来告知在编译时具体需要导入哪些模块(即#xff1a;批量处理待导入模块进行导入)#xff1b; webpack会在构建的时候解析代码中的require.context() (实际上是webpack的方法#xff0c;vue一般基于webpack…1. 作用
利用require创建context (上下文)来告知在编译时具体需要导入哪些模块(即批量处理待导入模块进行导入) webpack会在构建的时候解析代码中的require.context() (实际上是webpack的方法vue一般基于webpack所以可以使用)
1-1. 背景
当我们代码的request中含有表达式(expressions)时就会创建一个上下文(context)因为在编译时(compile time)不清楚具体导入哪个模块;
例如我们项目中可能会包含 .ejs 的文件目录
example_directory
│
└───template
│ │ table.ejs
│ │ table-row.ejs
│ │
│ └───directory
│ │ another.ejs那么 require() 调用会被评估解析
require(./template/ name .ejs);webpack会解析 require() 调用并提取出以下信息
Directory: ./template
Regular expression: /^.*\.ejs$/然后会生成一个 context module(上下文模块)。它包含目录下的所有模块 的引用如果一个request 符合正则表达式就能require进来。该context module包含一个map(映射)对象会把requests翻译成对应模块的id。 示例map(映射)对象
{./table.ejs: 42,./table-row.ejs: 43,./directory/another.ejs: 44
}这意味着 webpack 能够支持动态地 require但会导致所有可能用到的模块都包含在 bundle 中。
2. 使用
require.context()可以传入三个参数要搜索的目录表示是否还搜索其子目录的标记匹配文件的正则表达式
require.context(directory,(useSubdirectories true),(regExp /^\.\/.*$/),(mode sync)
);示例
require.context(./test, false, /\.test\.js$/);
//创建出一个 context其中文件来自 test 目录request 以 .test.js 结尾。require.context(../, true, /\.stories\.js$/);
// 创建出一个 context其中所有文件都来自父文件夹及其所有子级文件夹request 以 .stories.js 结尾。3. 返回
require.context创建出一个context一个context module会导出一个(require)函数此函数可以接收一个参数request。 此导出函数有三个属性resolve、keys、id
resolve是一个函数它返回request被解析后得到的模块id。keys也是一个函数它返回一个数组由所有可能被此 context module 处理的请求组成(即符合require.context()参数中正则表达式的所有文件的组成)。id是 context module 的模块 id. 它可能在你使用 module.hot.accept 时会用到。
如果想引入一个文件夹下面的所有文件或者引入能匹配一个正则表达式的所有文件这个功能就很有用
function importAll(r) {r.keys().forEach(r);
}importAll(require.context(../components/, true, /\.js$/));const cache {};function importAll(r) {r.keys().forEach((key) (cache[key] r(key)));
}importAll(require.context(../components/, true, /\.js$/));
// 在构建时(build-time)所有被 require 的模块都会被填充到 cache 对象中。4. 运用
4-1. 动态将components文件下的组件自动化注册为全局组件
// main.js文件import Vue from vue;// 自动加载components目录下的 .vue 结尾的文件 第二参数是是否查询其子目录
const requireComponent require.context(./components, true, /\.vue$/);requireComponent.keys().forEach(fileName {const componentConfig requireComponent(fileName);// 兼容 import export 和 require module.export 两种规范const ctrl componentConfig.default || componentConfig;Vue.component(ctrl.name, ctrl);
});4-2. 动态导入router文件下所有的分模块路由文件
// routes.jsimport Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter)const routerAry []
// 自动加载modules目录下的 .js 结尾的文件
const requireRouter require.context(./modules, true, /\.js$/);requireRouter.keys().forEach(fileName {const routerConfig requireRouter(fileName);routerAry.push(routerConfig);
})const routes [{path: /login,component: load(login),meta: {requireAuth: false,title: 登录}},...routerAry
]
