Webpack require.context() 前端工程化之动态导入文件

时间: 2019-07-26阅读: 2107标签: 文件

前言

随着项目越来越大,业务需要越来越多,我们项目的目录层级也是非常的多。如果还是通过import分别引入文件,那是非常的不科学的。


比如vue项目vuex文件非常多:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import user from './stores/user';
import info from './stores/info';
... // 此处省略N多文件

export default new Vuex.Store({
  modules: {
      user,
      info,
      ...
  },
});

要是有几个文件,还好。几十个,几百个,就非常头疼了。怎么解决这个问题了?

我们就要用到 webpack 中的require.context()方法,动态加载某个文件夹下的所有js文件,是不是就解决问题了呢!下面看看require.context()如何使用。


require.context()

语法

require.context(directory, useSubdirectories = false, regExp = /^.//);

示例

// 一个test文件夹下面(不包含子目录),能被require请求到,所有文件名以 `.test.js` 结尾的文件形成的上下文(模块)。
require.context("./test", false, /\.test\.js$/);

// 一个父级文件夹下面(包含子目录),所有文件名以 `.stories.js` 结尾的文件形成的上下文(模块)。
require.context("../", true, /\.stories\.js$/);

下面看看,我们如何应用到vue项目中?


Vue项目中,使用require.context()

import Vue from 'vue'
import Vuex from 'vuex'
import { sync } from 'vuex-router-sync'
import App from './App'
import router from './router'

const strict = process.env.NODE_ENV !== 'production'

Vue.config.productionTip = false

const modules = {}
// 获取stores文件夹下所有js文件
let requireContext = require.context('./stores', true, /^\.\/.*\/index\.js$/)
// requireContext.keys() 返回匹配成功模块的名字组成的数组
requireContext.keys().forEach((key) => {
  // 通过 requireContext(key)导出文件内容
  const mod = requireContext(key)
  modules[key.slice(2, -9)] = mod.__esModule && mod.default ? mod.default : mod
})
Vue.use(Vuex)

const store = new Vuex.Store({
  modules,
  strict
})
sync(store, router)

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

通过以上方法就可以动态的导入stores文件夹中的所有js文件,这样就方便管理了,也不用一个个引入, 同理,如果路由文件等非常多,也可以用require.context()导

全局过滤器导入

Vue.use((Vue) => {
  ((requireContext) => {
    const arr = requireContext.keys().map(requireContext);
    (arr || []).forEach((filter) => {
      filter = filter.__esModule && filter.default ? filter.default : filter;
      Object.keys(filter).forEach((key) => {
        Vue.filter(key, filter[key]);
      });
    });
  })(require.context('./filters', false, /^\.\/.*\.js$/));
});


全局指令导入


Vue.use((Vue) => {
  ((requireContext) => {
    const arr = requireContext.keys().map(requireContext);
    (arr || []).forEach((directive) => {
      directive = directive.__esModule && directive.default ? directive.default : directive;
      Object.keys(directive).forEach((key) => {
        Vue.directive(key, directive[key]);
      });
    });
  })(require.context('./directives', false, /^\.\/.*\.js$/));
});


总结

webpack作为前端构建的打包工具, 把各种资源,例如JS(含JSX)、coffee、css(含less/sass)、图片等都作为模块来处理和使用,它已经做了非常好了,它还有非常多的功能等待我们去发掘,研究。

原文地址:http://www.javanx.cn/20190725/webpack-require-context/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/4374

PHP读取文件内容的方法

下面我们就为大家详细介绍PHP读取文件内容的两种方法。第一种方法:fread函数;第二种方法:file_get_contents函数,这个方法就非常简单了,我们直接使用file_get_contents函数来读取本地文件内容。

js和css文件位置对页面性能有什么影响?

js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来

使用HTML5来实现本地文件读取和写入

最近有这样一个需求,就是在HTML页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。

前端实现.md文件转换成.html文件

.md文件是markdown的一种标记语言,和html比较起来,更简单快捷,主要体现在:标记符的数量。使用i5ting_toc插件、gitbook来生成

php使用 header 头下载文件

header() 函数向客户端发送原始的 HTTP 报头。认识到一点很重要,即必须在任何实际的输出被发送之前调用 header() 函数

vue引入静态js文件

由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。

nodejs fs怎么读取文件是否存在?

nodejs fs怎么读取文件是否存在?下面本篇文章就来给大家介绍一下使用nodejs fs模块读取并判断文件是否存在的方法,希望对大家有所帮助。在nodejs中,可以使用fs模块的access()方法来读取、判断文件是否存在。

前端使用js读取文件操作

首先我们定义一个input标签type=file、然后我们定义一个jsReadFiles的方法将文件作为参数;当上传文件的时候读取这个文件。图片上传成功,只是图片路径变成了base64编码的形式。

node.js 中的fs.rename()模块

node.js的核心模块 原生模块。修改文件名称,可更改文件的存放路径,方法说明 : 修改文件名称,可更改文件的存放路径.

在nodejs中怎么返回文件状态?

在nodejs中可以使用fs模块的stat()方法来返回文件状态,如使用stats.size获取文件大小,使用stats.isFile()判断是否为文件等。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!