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

 更新时间:2018年02月22日 10:09:02   作者:_小刀   我要评论

下面小编就为大家分享一篇webpack下实现动态引入文件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

刚开始使用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 继承机制的实现

    要用ECMAScript实现继承机制,首先从基类入手。所有开发者定义的类都可作为基类。出于安全原因,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击。
    2009-08-08
  • js实现带三角符的手风琴效果

    js实现带三角符的手风琴效果

    本文主要介绍了js实现带三角符手风琴效果的实例。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • javascript移动设备Web开发中对touch事件的封装实例

    javascript移动设备Web开发中对touch事件的封装实例

    这篇文章主要介绍了javascript移动设备Web开发中对touch事件的封装实例,分别对tap事件、doubleTap事件、longTap事件、swipe事件做了封装,需要的朋友可以参考下
    2014-06-06
  • JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例

    JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例

    这篇文章主要介绍了JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例的相关资料,需要的朋友可以参考下
    2015-12-12
  • 第三篇Bootstrap网格基础

    第三篇Bootstrap网格基础

    Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,网格系统类似一个表格。接下来通过本文给大家介绍Bootstrap网格基础,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • js中日期的加减法

    js中日期的加减法

    JavaScript实现日期加减计算功能代码实例,因为在js中没有类似C#中的AddDays方法,所以要想实现日期加减的话,就需要自己写函数来实现。
    2015-05-05
  • 如何丰富alt属性的显示效果

    如何丰富alt属性的显示效果

    如何丰富alt属性的显示效果...
    2007-01-01
  • JavaScript原型对象原理与应用分析

    JavaScript原型对象原理与应用分析

    这篇文章主要介绍了JavaScript原型对象原理与应用,结合实例形式分析了javascript原型对象的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-12-12
  • javascript获取URL参数与参数值的示例代码

    javascript获取URL参数与参数值的示例代码

    本篇文章主要是对javascript获取URL参数与参数值的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript自定义文本框光标

    JavaScript自定义文本框光标

    本篇文章主要介绍了JavaScript自定义文本框光标的方法实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论