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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
vue实现分页栏效果
Jun 28 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHP长连接实现与使用方法详解
2018/02/11 PHP
JavaScript中的类数组对象介绍
2014/12/30 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
python动态参数用法实例分析
2015/05/25 Python
Python守护线程用法实例
2017/06/23 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
详解Python3的TFTP文件传输
2018/06/26 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python如何统计代码运行的时长
2019/07/24 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
C语言基础笔试题
2013/04/27 面试题
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
总经理岗位职责范本
2014/02/02 职场文书
材料会计岗位职责
2014/03/06 职场文书
司机岗位职责范本
2015/04/10 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书