初识工程化

前几天上马新项目，我自己独立负责一个后台系统，看需求有点复杂。当时想能不能用一下VueX，然后就按照官方文档进行模块化。文件结构如下：

store --------------------------- // vuex
│ │ ├─index.js ---------------------- // vuex 注册主入口
│ │ └─modules ----------------------- // 模块目录
│ │   ├─d2admin --------------------- // D2组件自带模块
│ │   │ ├─index.js中发现问题所在。
.js ------------------ // 模块主入口
│ │   │ └─modules ------------------- // 子模块
│ │   └─personal--------------------- // 自己加的业务模块
│ │     ├─index.js ------------------ // 模块主入口
│ │     └─modules ------------------- // 子模块

这时候在personal->modules中写单独的业务模块Vuex，应该没问题的，打印store时在控制台，还找到自己定义的state参数，但就是找不到mutations。只有D2的mutations，没办法，只能去读D2的源码，从store开始一级级向下，在store->modules->d2admin->index.js中发现问题所在。代码如下：

const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default {
  namespaced: true,
  modules
}

这时候就发现与官方文档不同，做为小白，我就找 require.context的意思，发现这是前端工程化的操作。当时就不明觉厉，学到了，好激动！

工程化代码含义

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

参数

三个参数表示： 1要搜索的文件夹目录——'./modules'，同级modules下的文件。 2是否还应该搜索它的子目录——false，modules文件夹下的文件，不遍历子文件夹 3以及一个匹配文件的正则表达式——/.js$/，匹配js文件。

导出方法files

导出的files方法有 3 个属性： resolve, keys, id。

files.keys()会得到包含js文件名的数组,例如：["./a.js","./b.js"]
files(key).default得到对应的js导出对象。
key.replace(/(./|.js)/g, '')把.js和./换成空。最后得到：

modules = {
a:xxx,
b:xxx
}

总结

我自己设置store模块也可以按照这样写工程化添加，就不需要每次手动引入了。确实很方便。最后在store->index.js的引用和官方一样。这次阅读D2的源码对我这样的小白收获挺大的。虽然这只是前端工程化的冰山一角，但也让我初步了解。

前端工程化的第一次实践——Vuex模块自动添加

初识工程化

工程化代码含义

参数

导出方法files

总结

参考