webpack4利用import动态加载的一些说明

最近开始学习webpack4, 有一个新功能,是可以用import做动态加载。
ES6的import语法告诉我们,模块只能做静态加载。
所谓静态加载,就是你不能写成如下形式:

let filename  = 'module.js';
import {mod} from './' + filename. 

也不能写成如下形式:

if(condition) {
import {mod} from './path1'
} else {
import {mod} from './path2'
}

但是现在有新提案让import进行动态加载,虽然还没有被ECMA委员会批准,但是webpack已经开始用了。

大致用法是这样的:

let filename = 'module.js'; 

import('./' + filename). then(module =>{
    console(module);
}).catch(err => {
    console(err.message); 
});

//如果你知道 export的函数名
import('./' + filename). then(({fnName}) =>{
    console(fnName);
}).catch(err => {
    console(err.message); 
});

//如果你用的是export default function() 
import('./' + filename). then(module =>{
    console(module.default);
}).catch(err => {
    console(err.message); 
});

//或者
import('./' + filename). then(({default:fnName}) =>{
    console(fnName);
}).catch(err => {
    console(err.message); 
});

这里有一点要注意的是:
import的加载是加载的模块的引用。而import()加载的是模块的拷贝,就是类似于require(),怎么来说明?看下面的例子:

module.js 文件:

export let counter = 3;
export function incCounter() {
  counter++;
}

main.js 文件:

let filename = 'module.js'; 
 import('./' + filename).then(({counter, incCounter})=>{
 console.log(counter); //3
 incCounter(); 
 console.log(counter); //3
 }); 
import {counter, incCounter} from './module.js';
console.log(counter); //3
incCounter();
console.log(counter); //4
展开阅读全文

没有更多推荐了,返回首页