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


        随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢?

    先看一个项目中store项目结构:

      过去都是通过import分别引入文件:

     1 import Vue from 'vue';
     2 import Vuex from 'vuex';
     3 
     4 Vue.use(Vuex);
     5 
     6 import user from './modules/user';
     7 import info from './modules/info';
     8 //此处省略N多文件。。。。。
     9 
    10 export default new Vuex.Store({
    11     modules: {
    12         user,
    13         info
    14     },
    15 });

      通过上述引入虽然可以达成效果但是如果有很多文件呢?难道也要一个一个引入?那么如何动态加载modules文件下的所有JS文件呢?

      那么这里就会用到webpack文档中的require.context( ) ,来实现前端工程化;

        require.context( )语法如下:

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

        示例:

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

       那么我们怎么把它应用到Vue项目当中呢?

     1 import Vue from 'vue';
     2 import Vuex from 'vuex';
     3 import camelcase from 'camelcase’;    //驼峰命名的一个npm包
     4 Vue.use(Vuex);
     5 
     6 const context = require.context('./modules', false, /.js$/);
     7     //获取moudules文件下所有js文件;
     8 const moduleStores = {};
     9 
    10 context.keys().forEach(key => {
    11     // context.keys()    返回匹配成功模块的名字组成的数组
    12     const fileName = key.slice(2, -3);
    13     //截取名字
    14     const fileNameInCamelCase = camelcase(fileName);
    15     //camelcase 是一个驼峰命名包;
    16     const fileModule = context(key).default;
    17     //通过 context(key)导出文件内容。在文件中时通过 export.default 导出的,所以后边加.default
    18     moduleStores[fileNameInCamelCase] = {
    19         ...fileModule,
    20         namespaced: true,    //文件中有写可以省略;不过这样写可以不用给每个文件写入;这个属性不知道自己去查文档;
    21     };
    22 });
    23 
    24 export default new Vuex.Store({
    25     modules: {
    26         ...moduleStores,
    27     },
    28 });

      通过以上方法就可以动态的导入modules文件夹中的所有js文件,这样就方便管理了,也不用一个个引入;

      如果你某个文件不想引入可以在forEach中,通过判断来解决:

     1 context.keys().forEach(key => {
     2   const fileName = key.slice(2, -3);
     3   const fileNameInCamelCase = camelcase(fileName);
     4   const fileModule = context(key).default;
     5 
     6   if (fileName === 'user') {
     7     return;
     8   }
     9   moduleStores[fileNameInCamelCase] = {
    10     ...fileModule,
    11     namespaced: true,
    12   };
    13 });

      
               管理依赖-webpack中文档(2.2)-更多详细内容可查 :  https://www.html.cn/doc/webpack2/guides/dependency-management/

  • 相关阅读:
    spring1冲刺感想与总结
    Scrum 项目7.0
    读《构造之法》8、9、10章有感
    Scrum4.0+5.0
    scrum3.0
    0512操作系统之进程调度
    Scrum 项目1.0
    团队之阅读感想
    sprint3终极演示
    0622—软件工程第一学期总结
  • 原文地址:https://www.cnblogs.com/yuzhongyu/p/10451947.html
Copyright © 2020-2023  润新知