动态引入文件
有时我们想动态引入某个文件夹下的所有模块,文件名称事先是不知道的,这时可以使用 require.context
来实现该需求
mod/mod1.js:
export default {
name : 'mod1'
}
mod/mod2.js:
export default {
name : 'mod2'
}
index.js
const files = require.context('./mod', false, /\.js$/) //第一个参数可以使用正则,第二个参数用来指定是否要递归子目录
const modules = {}
files.keys().forEach(key => {
console.log(key,files(key).default.name);
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default;
})
export default modules;
运行结果:
动态加载模块
(一)vue路由的的动态加载:
{
path: '/',
name: 'Content',
component: resolve => require(['@/pages/Content'], resolve)
}
或者使用 es6 的方式
{
path: '/',
name: 'Content',
component: () => import('@/pages/Content')
}
(二)模块的动态加载
require.ensure([], (require)=>{ //懒加载阿里云sdk
var OSS = require('ali-oss');
this._initOSS(OSS);
});
或者使用 es6 的方式
import('ali-oss').then((OSS)=>{
this._initOSS(OSS);
});