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下实现动态引入文件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack打包并将文件加载到指定的位置方法

    使用webpack打包,最爽的事情莫过于可以直接require文件了,但是这 同时带来了一个问题,就是所有的文件整合到一起,那这一个包就太大了. 基于此:下面我们来了解下webpack的打包(主要是将如何将我们需要的内容模块,分开打包, 并且按照我们自己设定的存放路径进行存放) 首先在webpack.config.js文件中 entry入口函数出表示出哪些是需要单独打包成一个js包的: entry: { main: path.resolve(__dirname,'src/index.js'),

  • webpack打包js文件及部署的实现方法

    下面看下webpack打包js文件的实现代码 const path = require('path') const webpack = require('webpack') const htmlWebpackPlugin = require('html-webpack-plugin') // 每次打包之前,自动删除文件夹 const cleanWebpackPlugin = require('clean-webpack-plugin') // 分离 css 到独立的文件中 const Extra

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

    刚开始使用webpack时,可能很多人都会有过这样的想法,在require文件时,能不能不写静态的字符串路径,而是使用一个更灵活的方式,比如定义一个变量,根据具体的运行情况来确定需要require哪个文件! 比如,笔者就遇到了一个这样的需求. 当时是使用vue-router开发一个管理系统,管理系统自身有一个目录数组,而vue-router也需要一个route配置数组,而这两者恰恰是对应关系的.当时就想,能不能只维护一个目录数组,然后动态的生成route数组呢? 于是我实现了一个小demo,如下

  • python顺序的读取文件夹下名称有序的文件方法

    如下所示: import os path="/home/test/" #待读取的文件夹 path_list=os.listdir(path) path_list.sort() #对读取的路径进行排序 for filename in path_list: print(os.path.join(path,filename)) 以上这篇python顺序的读取文件夹下名称有序的文件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 同步异步动态引入js文件的几种方法总结

    动态加载js文件 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求 一.直接加载 <div id="divId"></div> <script> 二.异步加载,并发执行,但引入js内容不能直接使用 //1.1 直接document.write document.write("<script src='test.js'><\/script>

  • webpack 单独打包指定JS文件的方法

    背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChunkPlugin module.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPath: './dist/', //输出目录,index.html寻找资源的地址 path: BUILD_PATH, // 打包目录 filen

  • js动态引入的四种方法

    本文表述了关于js动态引入四种方式的实例代码.分享给大家供大家参考,具体如下: index.html <html> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type"> <title> </title> <script src='' id="s1"></script> &

  • webpack+vue-cli项目中引入外部非模块格式js的方法

    在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v

  • Linux下g++编译与使用静态库和动态库的方法

    Linux下g++编译与使用静态库和动态库的方法

    在windows环境下,我们通常在IDE如VS的工程中开发C++项目,对于生成和使用静态库(*.lib)与动态库(*.dll)可能都已经比较熟悉,但是,在linux环境下,则是另一套模式,对应的静态库(*.a)与动态库(*.so)的生成与使用方式是不同的.刚开始可能会不适应,但是用多了应该会习惯这种使用,因为步骤上并没有VS下配置那么繁琐. 下面就分别总结下linux下生成并使用静态库与动态库的方法:(由于是C++项目,所以编译器用的g++,但是与gcc的使用是相通的) 首先是准备工作,把我们需

  • JavaWeb项目中dll文件动态加载方法解析（详细步骤）

    相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO文件动态加载方法的文章. 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来实现一些JAVA不能实现的功能,或者是一些第三方dll插件.通常的做法是将这些dll文件复制到 %JAVA_HOME%\jre\bin\ 文件夹或者 应用中间件(Tomcat|Weblogic)的bin

  • C#读取目录下所有指定类型文件的方法

    本文实例讲述了C#读取目录下所有指定类型文件的方法.分享给大家供大家参考.具体分析如下: 首先要引入命名空间:using System.IO; 再写读取方法: DirectoryInfo dir = new DirectoryInfo(path); //path为某个目录,如: "D:\Program Files" FileInfo[] inf = dir.GetFiles(); foreach (FileInfo finf in inf) { if( finf.Extension.E

  • angularjs 动态从后台获取下拉框的值方法

    angularjs 动态从后台获取下拉框的值,只要是使用repeat指令,后台提供的是一个list的对象,里面包含value和显示的值,如下: js文件: //职务等级和档次/军衔等级和档次,需要从后台获取:poslist,type:2/3/4/5 $scope.getDyActivityInforItems=function(){ serviceData.getData('inforinput/getAllSelectValueByType','POST',{ type:2 }).then(f

随机推荐