If there is a miracle in life, it must be the path of hard work!Copy the code

Hello, everyone. I am Koba, an ordinary front-end development engineer who is unwilling to be ordinary

Emmm, you guys, when you’re working on a project, you don’t have to import all the files in the entire folder. This is fine when the files are small, but when the project is large, it is easy to import more than 10 or 20 files, which is the easiest and most annoying way to import one file at a time. So is there a good solution?

Koha also encountered this problem when developing the SULG UI component library. Let’s take a look at how Koha dealt with this problem

1.require.context()

Auto-loading files mainly uses require.context() in Webpack to dynamically import files.

Let’s see what require.context() is.

Open the webpack documentation, search require.context, and you’ll see something like this.

You can create your own context by using require.context().

You can pass this function three parameters: a directory to search, a flag to indicate whether subdirectories are also searched, and a regular expression to match files.

Webpack parses require.context() in the code at build time.

The syntax is as follows:

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = / ^ \ \ /. * $/),
  (mode = 'sync'));Copy the code

Example:

require.context('./test'.false./\.test\.js$/);
// create a context where the file is from the test directory and request ends with '.test.js'.
Copy the code

2. Obtain all files in the folder

Don’t want to lift chestnuts, then direct combat ~

If the command folder in SULG UI looks like this, how do we get all the files through require.context()?

In index.js, let’s write the following code and open the console. You can see that we have successfully obtained our file path.

let res = require.context('./modules'.false./^\.\/.*\.js$/)
console.log(res.keys())
Copy the code

3. Register custom instructions

The way to register custom directives in VUE is as follows

Vue.directive('Instruction name', {instruction content});Copy the code

Combining the directive registration with require.context() yields the following code

import Vue from "vue"
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('./modules'.false./^\.\/.*\.js$/));
});

Copy the code

We can then simply import this file and use the relevant instructions directly

4. Other scenarios

In addition to using this method in custom directives, there are several scenarios where this method is often used

API interface

In the API folder, we can also load all js files in modules dynamically in this way.

VUEX

As above, load all js files in Modules directly and then create them through createStore.

summary

This article is a small part of the knowledge obtained by Koha’s dismantling of SULG UI component library. Mainly with friends to achieve automatic file loading, and provide some common use scenarios, so as to improve the efficiency of development.

If you feel good after reading this series of articles, you can like it and follow it

If you want to communicate with Koha, you can add WX, also welcome friends to talk with Koha, hey, hey ~

Ps: pure original, reproduced please indicate the source

Finally, link to the SULG UI component library on GitHub: github.com/sulgweb/sul…

If possible, please add a star to Kohane’s Github