webpack下实现动态引入文件方法


Posted in Javascript onFebruary 22, 2018

刚开始使用webpack时,可能很多人都会有过这样的想法,在require文件时,能不能不写静态的字符串路径,而是使用一个更灵活的方式,比如定义一个变量,根据具体的运行情况来确定需要require哪个文件!

比如,笔者就遇到了一个这样的需求。

当时是使用vue-router开发一个管理系统,管理系统自身有一个目录数组,而vue-router也需要一个route配置数组,而这两者恰恰是对应关系的。当时就想,能不能只维护一个目录数组,然后动态的生成route数组呢?

于是我实现了一个小demo,如下:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 componentPath: './a.vue'
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: r => require.ensure([], () => r(require(item.componentPath)), 'demo')
 });
}

大致如上,当时没留源码,大概手写个例子,忽略一些可能的语法错误。

当使用这段代码运行的时候,就开始报错了:Critical dependencies。

在查了一些资料后,我大致明白了webpack的运行机制,也明白了一个事实,那就是:使用webpack动态require文件是不可能实现的。

要知道,webpack是一个打包工具,它运行的时机属于预编译,而我们的想法呢,要在运行时才能确定到底要require哪些文件,这显然是不行的,因为这样,webpack不知道该把哪些包打包起来,结果就是那些文件都没有被打包进去,那么require也肯定require不到啊。

明白了这个机制,我们就应该确定直接传递path来动态注册route是一种不可能实现的方案。

那么如果又想实现动态引入文件,怎么办呢?我们可以考虑一些曲线救国的方案。

1. 预编译阶段确定require路径。

我们之所以使用动态的变量来存储路径字符串,无非是想要程序替我们执行一些动作,比如拼接字符串等等。那么很多情况下这些程序在运行时执行和在预编译时执行是一样效果的。比如我们上面的例子,就是不想手动去维护两张表。那么我们可以在打包的时候,执行读写文件,来动态执行解析操作,并将解析得到的route数组写入指定的文件。这样不就实现了目标吗?

2.直接传递component对象呢?比如下面的实现方式:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 component: r => require.ensure([], () => r(require('./a.vue')), 'demo')
 
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: item.component
 });
}

这种方案主要针对我们的例子,当然对其他情况也能给一个启发作用。

不过说来说去,这都是委曲求全的方案,我们必须明白一点,那就是在预编译阶段,webpack必须明确知道该引入哪些文件,否则什么方案都是不可行的。

顺便一提,网上还有说法require(path),只要path不是纯变量,比如require('./root/' + path),这样组合一下就行?我在这里require.ensure函数中尝试过,不行。也许是我使用方式不对吧。

再一提,传递component对象时,好像在跨文件时会有点问题,反正我是将目录数组和route数组以及解析过程写在一个文件的。也许是使用相对路径在不同文件中解析的问题,使用的时候需要注意下。

以上这篇webpack下实现动态引入文件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 #Javascript
3种vue路由传参的基本模式
Feb 22 #Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 #Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 #Javascript
webpack将js打包后的map文件详解
Feb 22 #Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 #Javascript
深入理解ES6中let和闭包
Feb 22 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
php开发工具之vs2005图解
2008/01/12 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
vue 实现图片懒加载功能
2020/12/31 Vue.js
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python实现学生成绩管理系统
2020/04/05 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python获取服务器响应cookie的实例
2018/12/28 Python
如何通过python实现全排列
2020/02/11 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
中国电视购物:快乐购
2017/02/04 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
英文自荐信常用句子
2014/03/26 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
Go 中的空白标识符下划线
2022/03/25 Golang
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
vue使用watch监听属性变化
2022/04/30 Vue.js
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python