If you want to put each vuex object with different functions into modules, you need to create a file first, export the file, then import the file and write it into modules. If there are too many files, it will be very troublesome to repeat these steps every time. I want to automatically import the JS file in modules folder into index.js every time. And write to modules objects

You can automate this by importing a node that has a require method in it, printing this require, and the console prints out a method

ƒ webpackEmptyContext(req) {var e = new Error("Cannot find module '" + req + "'"); e.code = 'MODULE_NOT_FOUND'; throw e; }Copy the code

Require has a context method that prints console.log(require.context); , output undefined but print console.log(require.context()), he’ll get an error saying it’s not a method, Console. log(require.context(‘./modules’))(in the modules folder), output

ƒ webpackContext(req) {var ID = webpackContextResolve(req); return __webpack_require__(id); }Copy the code

Console. log(require.context(‘./modules’,false,/\.js$/)). Regular expression)/\.js$/ means to find only js files, \ means to escape, in the re. There are special contains, add a \ escape meaning, tell him just an ordinary.

The print result is the same function as above, which declares the expression as a variable stored, and prints the variable

let files=require.context('./modules',false,/\.js$/)
 console.log(files);
Copy the code

The result remains the same, but when you print Object.keys(files)

let files=require.context('./modules',false,/\.js$/)
console.log(Object.keys(files));
Copy the code

[“keys”, “resolve”, “id”], we need keys to print console.log(files.keys); The output

ƒ webpackContextKeys() {
  return Object.keys(map);
}
Copy the code

He is a method to print the console. The log files. The keys () () the output [“. / category. Js “, “. / order. Js “, “. / user. Js “]

This gets the path to the JS file split out of Modules, and iterating through the array yields the following result

files.keys().forEach(item => {
    console.log(item);
});
// ./category.js
// ./order.js
// ./user.js
Copy the code

We just want to get the file name and don’t want the prefix or suffix, use the re

files.keys().forEach(item => {
      console.log(item.match(/\.\/(.*)\.js/)[1]);
});
//category
// order
//user
Copy the code

It’s best to use the reduce method here and write these methods directly to the Modules method

Let modules =files.keys().reduce((res,modulePath) => {//res starts as an empty object, ModulePath is each value in files.keys() let moduleName= modulepath.match (/\.\/(.*)\.js/)[1] // leave modulePath names only in classics without prefix or suffix Res [moduleName]=files(modulePath) // Assign the corresponding methods to the three files, If you print files('./category.js'), the result is a single vuex object in this file. Return res //res starts as an empty object and is merged in the res object as a filename: corresponding method, so return},{});Copy the code

console.log(modules); The result is what you want, but the result is printed with a layer of Dafault

let modules =files.keys().reduce((res,modulePath) => {
      let moduleName=modulePath.match(/\.\/(.*)\.js/)[1]
      let value =files(modulePath).default
      if (value) {
           res[moduleName]=value
      }     
      return res 
},{});
Copy the code

In this way, there are corresponding objects in modules, and the code is split. In the future, as long as there are JS files in modules folder, it will automatically import vuex files of different modules

let files=require.context('./modules',false,/\.js$/) // console.log(files.keys()); ["./category.js", "./order.js", "./user.js"] let modules =files.keys().reduce((res,modulePath) => { let moduleName=modulePath.match(/\.\/(.*)\.js/)[1] Let value =files(modulePath). Default if (value) {res[moduleName]=value} return res // Res starts with an empty object and ends with a filename: },{}); const store = new Vuex.Store({ modules })Copy the code

Of course routes can also be imported automatically in this way! It just needs to be tweaked

let files=require.context('./modules',false,/\.js$/) let routes =files.keys().reduce((res,modulePath) => { //let ModuleName = modulePath. Match (/ \ \ / (. *) \. Js /) [1] / / routes is corresponding to the array, Let value =files(modulePath).default if (value) {res.push(... Value)} return res,[]); const router = new VueRouter({ routes })Copy the code

If there are js files in the modules folder, it will be automatically imported, so that you can split routes according to different sections freely when configuring routes, but the array obtained by this way is not in order. You can define an attribute such as sort: 1 in the meta of the route, and customize the order of the route you want to display, i.e

let files=require.context('./modules',false,/\.js$/) let routes =files.keys().reduce((res,modulePath) => { //let ModuleName = modulePath. Match (/ \ \ / (. *) \. Js /) [1] / / routes is corresponding to the array, Let value =files(modulePath).default if (value) {res.push(... Value)} return res,[]); routes.sort((a,b)=>{ return a.meta.sort - b.meta.meta.sort }) const router = new VueRouter({ routes })Copy the code