Babel Glob Import

Babel plugin to import multiple files from one import statement using glob patterns.

Installation

1npm i --save-dev babel-plugin-glob-import

Setup

1// Import the plugin
2import BabelGlobImport from 'babel-plugin-glob-import';
3
4// Initialize the glob import Babel plugin
5const babelGlobImport = BabelGlobImport({ 
6    // (Optional): You can set it to true if you need debugging
7    //  It will help you to better understand the different transformation steps, 
8    //      and will print the output code in the logs
9    debug: boolean,
10})

Usage by examples

Let consider that the folder @server/routes contains the following files:

• index.ts
• file1.ts
• file2.ts
• users/
  • index.ts
  • user1.ts
  • auth/
    • google.ts
    • facebook.ts
    • file-a1.ts
    • file-a2.ts
• admin/
  • index.ts
  • settings.ts

For all the examples below, we assume that these files export a Function.

How to use glob patterns

Glob patterns are used to match multiple files based on specific rules. Here are the key features and their uses, adapted to the example folder structure:

• Wildcards:

  • *.ts matches all .ts files in the @server/routes directory.

    1import routes from '@server/routes/*.ts';
    2// Matches: index.ts, file1.ts, file2.ts

  • **/*.ts matches all .ts files in @server/routes and its subdirectories.

    1import routes from '@server/routes/**/*.ts';
    2// Matches: index.ts, file1.ts, file2.ts, users/index.ts, users/user1.ts, users/auth/google.ts, users/auth/facebook.ts, users/auth/file-a1.ts, users/auth/file-a2.ts, admin/index.ts, admin/settings.ts

• Negation:

  • !users/*.ts matches all .ts files except those in the users directory.

    1import routes from '@server/routes/!users/*.ts';
    2// Matches: index.ts, file1.ts, file2.ts, admin/index.ts, admin/settings.ts

  • *!(index).ts matches all .ts files except index.ts.

    1import routes from '@server/routes/*!(index).ts';
    2// Matches: file1.ts, file2.ts

• Extglobs (extended globbing):

  • +(users|admin) matches the users and admin directories.

    1import routes from '@server/routes/+(users|admin)/**/*.ts';
    2// Matches: users/index.ts, users/user1.ts, users/auth/google.ts, users/auth/facebook.ts, users/auth/file-a1.ts, users/auth/file-a2.ts, admin/index.ts, admin/settings.ts

  • !(auth) matches everything except the auth directory.

    1import routes from '@server/routes/users/!(auth)/**/*.ts';
    2// Matches: users/index.ts, users/user1.ts

• POSIX character classes:

  • [[:alpha:][:digit:]] matches any alphabetic or numeric character. For example, to match files with alphabetic or numeric names.

    1import routes from '@server/routes/[[:alpha:][:digit:]]/**/*.ts';
    2// Matches: index.ts, file1.ts, file2.ts, users/index.ts, users/user1.ts, admin/index.ts, admin/settings.ts

• Brace expansion:

  • Example: foo/{1..5}.ts matches foo/1.ts, foo/2.ts, foo/3.ts, foo/4.ts, and foo/5.ts.
  • Example: bar/{a,b,c}.ts matches bar/a.ts, bar/b.ts, and bar/c.ts.

    1import routes from '@server/routes/{index,users/auth/google}.ts';
    2// Matches: index.ts, users/auth/google.ts

• Regex character classes:

  • Example: foo-[1-5].ts matches foo-1.ts, foo-2.ts, foo-3.ts, foo-4.ts, and foo-5.ts.

    1import routes from '@server/routes/users/auth/file-[a1-a2].ts';
    2// Matches: users/auth/file-a1.ts, users/auth/file-a2.ts

• Regex logical "or":

  • Example: foo/(abc|xyz).ts matches foo/abc.ts and foo/xyz.ts.

    1import routes from '@server/routes/users/auth/(google|facebook).ts';
    2// Matches: users/auth/google.ts, users/auth/facebook.ts

These patterns can be combined and used to create powerful matching rules for your file import statements, allowing for flexible and efficient module imports.

The different ways to import modules

This plugin provides four different ways to import these files in one shot via glob patterns:

1. Import default

Import the default export of every file into one object.

1import routes from '@server/routes/**/*.ts';

1> console.log(routes)
2{
3    'index': Function,
4    'file1': Function,
5    'file2': Function,
6    'users/index': Function,
7    'users/user1': Function,
8    'users/auth/google': Function,
9    'users/auth/facebook': Function,
10    'users/auth/file-a1': Function,
11    'users/auth/file-a2': Function,
12    'admin/index': Function,
13    'admin/settings': Function
14}

With metadatas:

In addition of the modules, you can get the metadata of each import by prefixing the glob expression by metas:.

1import routes from 'metas:@server/routes/**/*.ts';

1> console.log(routes)
2{
3    'index': {
4        filename: '/root/server/routes/index.ts',
5        matches: [undefined, 'index'],
6        exports: Function
7    },
8    'file1': {
9        filename: '/root/server/routes/file1.ts',
10        matches: [undefined, 'file1'],
11        exports: Function
12    },
13    'file2': {
14        filename: '/root/server/routes/file2.ts',
15        matches: [undefined, 'file2'],
16        exports: Function
17    },
18    'users/index': {
19        filename: '/root/server/routes/users/index.ts',
20        matches: ['users', 'index'],
21        exports: Function
22    },
23    'users/user1': {
24        filename: '/root/server/routes/users/user1.ts',
25        matches: ['users', 'user1'],
26        exports: Function
27    },
28    'users/auth/google': {
29        filename: '/root/server/routes/users/auth/google.ts',
30        matches: ['users', 'auth', 'google'],
31        exports: Function
32    },
33    'users/auth/facebook': {
34        filename: '/root/server/routes/users/auth/facebook.ts',
35        matches: ['users', 'auth', 'facebook'],
36        exports: Function
37    },
38    'users/auth/file-a1': {
39        filename: '/root/server/routes/users/auth/file-a1.ts',
40        matches: ['users', 'auth', 'file-a1'],
41        exports: Function
42    },
43    'users/auth/file-a2': {
44        filename: '/root/server/routes/users/auth/file-a2.ts',
45        matches: ['users', 'auth', 'file-a2'],
46        exports: Function
47    },
48    'admin/index': {
49        filename: '/root/server/routes/admin/index.ts',
50        matches: ['admin', 'index'],
51        exports: Function
52    },
53    'admin/settings': {
54        filename: '/root/server/routes/admin/settings.ts',
55        matches: ['admin', 'settings'],
56        exports: Function
57    }
58}

2. Import all (Typescript)

Import all exports of every module into one object.

1import * as routes from '@server/routes/**/*.ts';

1> console.log(routes)
2{
3    'index': { default: Function },
4    'file1': { default: Function },
5    'file2': { default: Function },
6    'users/index': { default: Function },
7    'users/user1': { default: Function },
8    'users/auth/google': { default: Function },
9    'users/auth/facebook': { default: Function },
10    'users/auth/file-a1': { default: Function },
11    'users/auth/file-a2': { default: Function },
12    'admin/index': { default: Function },
13    'admin/settings': { default: Function }
14}

With metadatas:

1import * as routes from 'metas:@server/routes/**/*.ts';

1> console.log(routes)
2{
3    'index': {
4        filename: '/root/server/routes/index
5
6.ts',
7        matches: [undefined, 'index'],
8        exports: { default: Function }
9    },
10    'file1': {
11        filename: '/root/server/routes/file1.ts',
12        matches: [undefined, 'file1'],
13        exports: { default: Function }
14    },
15    'file2': {
16        filename: '/root/server/routes/file2.ts',
17        matches: [undefined, 'file2'],
18        exports: { default: Function }
19    },
20    'users/index': {
21        filename: '/root/server/routes/users/index.ts',
22        matches: ['users', 'index'],
23        exports: { default: Function }
24    },
25    'users/user1': {
26        filename: '/root/server/routes/users/user1.ts',
27        matches: ['users', 'user1'],
28        exports: { default: Function }
29    },
30    'users/auth/google': {
31        filename: '/root/server/routes/users/auth/google.ts',
32        matches: ['users', 'auth', 'google'],
33        exports: { default: Function }
34    },
35    'users/auth/facebook': {
36        filename: '/root/server/routes/users/auth/facebook.ts',
37        matches: ['users', 'auth', 'facebook'],
38        exports: { default: Function }
39    },
40    'users/auth/file-a1': {
41        filename: '/root/server/routes/users/auth/file-a1.ts',
42        matches: ['users', 'auth', 'file-a1'],
43        exports: { default: Function }
44    },
45    'users/auth/file-a2': {
46        filename: '/root/server/routes/users/auth/file-a2.ts',
47        matches: ['users', 'auth', 'file-a2'],
48        exports: { default: Function }
49    },
50    'admin/index': {
51        filename: '/root/server/routes/admin/index.ts',
52        matches: ['admin', 'index'],
53        exports: { default: Function }
54    },
55    'admin/settings': {
56        filename: '/root/server/routes/admin/settings.ts',
57        matches: ['admin', 'settings'],
58        exports: { default: Function }
59    }
60}

3. Import with destructuration

Import the default export of every module separately.

1import { index, file1, file2, users_index, users_user1, users_auth_google, users_auth_facebook, users_auth_file_a1, users_auth_file_a2, admin_index, admin_settings } from '@server/routes/**/*.ts';

1> console.log({ index, file1, file2, users_index, users_user1, users_auth_google, users_auth_facebook, users_auth_file_a1, users_auth_file_a2, admin_index, admin_settings })
2{
3    'index': Function,
4    'file1': Function,
5    'file2': Function,
6    'users_index': Function,
7    'users_user1': Function,
8    'users_auth_google': Function,
9    'users_auth_facebook': Function,
10    'users_auth_file_a1': Function,
11    'users_auth_file_a2': Function,
12    'admin_index': Function,
13    'admin_settings': Function
14}

With metadatas:

1import { index, file1, file2, users_index, users_user1, users_auth_google, users_auth_facebook, users_auth_file_a1, users_auth_file_a2, admin_index, admin_settings } from 'metas:@server/routes/**/*.ts';

1> console.log({ index, file1, file2, users_index, users_user1, users_auth_google, users_auth_facebook, users_auth_file_a1, users_auth_file_a2, admin_index, admin_settings })
2{
3    'index': {
4        filename: '/root/server/routes/index.ts',
5        matches: [undefined, 'index'],
6        exports: Function
7    },
8    'file1': {
9        filename: '/root/server/routes/file1.ts',
10        matches: [undefined, 'file1'],
11        exports: Function
12    },
13    'file2': {
14        filename: '/root/server/routes/file2.ts',
15        matches: [undefined, 'file2'],
16        exports: Function
17    },
18    'users_index': {
19        filename: '/root/server/routes/users/index.ts',
20        matches: ['users', 'index'],
21        exports: Function
22    },
23    'users_user1': {
24        filename: '/root/server/routes/users/user1.ts',
25        matches: ['users', 'user1'],
26        exports: Function
27    },
28    'users_auth_google': {
29        filename: '/root/server/routes/users/auth/google.ts',
30        matches: ['users', 'auth', 'google'],
31        exports: Function
32    },
33    'users_auth_facebook': {
34        filename: '/root/server/routes/users/auth/facebook.ts',
35        matches: ['users', 'auth', 'facebook'],
36        exports: Function
37    },
38    'users_auth_file_a1': {
39        filename: '/root/server/routes/users/auth/file-a1.ts',
40        matches: ['users', 'auth', 'file-a1'],
41        exports: Function
42    },
43    'users_auth_file_a2': {
44        filename: '/root/server/routes/users/auth/file-a2.ts',
45        matches: ['users', 'auth', 'file-a2'],
46        exports: Function
47    },
48    'admin_index': {
49        filename: '/root/server/routes/admin/index.ts',
50        matches: ['admin', 'index'],
51        exports: Function
52    },
53    'admin_settings': {
54        filename: '/root/server/routes/admin/settings.ts',
55        matches: ['admin', 'settings'],
56        exports: Function
57    }
58}

4. Require

1const routes = require("@server/routes/**/*.ts");

1> console.log(routes)
2[
3    Function,
4    Function,
5    Function,
6    Function,
7    Function,
8    Function,
9    Function,
10    Function,
11    Function,
12    Function,
13    Function
14]

With metadatas:

1const routes = require("metas:@server/routes/**/*.ts");

1> console.log(routes)
2[
3    {
4        filename: '/root/server/routes/index.ts',
5        matches: [undefined, 'index'],
6        exports: Function
7    },
8    {
9        filename: '/root/server/routes/file1.ts',
10        matches: [undefined, 'file1'],
11        exports: Function
12    },
13    {
14        filename: '/root/server/routes/file2.ts',
15        matches: [undefined, 'file2'],
16        exports: Function
17    },
18    {
19        filename: '/root/server/routes/users/index.ts',
20        matches: ['users', 'index'],
21        exports: Function
22    },
23    {
24        filename: '/root/server/routes/users/user1.ts',
25        matches: ['users', 'user1'],
26        exports: Function
27    },
28    {
29        filename: '/root/server/routes/users/auth/google.ts',
30        matches: ['users', 'auth', 'google'],
31        exports: Function
32    },
33    {
34        filename: '/root/server/routes/users/auth/facebook.ts',
35        matches: ['users', 'auth', 'facebook'],
36        exports: Function
37    },
38    {
39        filename: '/root/server/routes/users/auth/file-a1.ts',
40        matches: ['users', 'auth', 'file-a1'],
41        exports: Function
42    },
43    {
44        filename: '/root/server/routes/users/auth/file-a2.ts',
45        matches: ['users', 'auth', 'file-a2'],
46        exports: Function
47    },
48    {
49        filename: '/root/server/routes/admin/index.ts',
50        matches: ['admin', 'index'],
51        exports: Function
52    },
53    {
54        filename: '/root/server/routes/admin/settings.ts',
55        matches: ['admin', 'settings'],
56        exports: Function
57    }
58]

Setup example with Webpack

1// Import the plugin
2import BabelGlobImport from 'babel-plugin-glob-import';
3
4// Define rules for Javascript files
5const JavascriptRules = {
6    test: /\.(ts|tsx|js|jsx)$/,
7    rules: [{
8        // Configure Babel
9        loader: 'babel-loader',
10        options: { 
11            plugins: [
12                
13                // Add the glob import Babel plugin
14                BabelGlobImport({ 
15                    debug: true,
16                })
17            ]
18        }
19    }]
20}
21
22// Export Webpack compilation configuration
23module.exports = {
24
25    name: 'server',
26    target: 'node',
27    entry: './src/server/index.ts',
28
29    ...
30
31    module: {
32        rules: [JavascriptRules]
33    }
34}

Fix Typescript errors

Typescript will not recognize your glob importations statements, and will show show you errors about missing files. To fix that, you have to create a type definitions file (ex: global.d.ts) and to manually define typings for the imported glob into this file:

1declare module "@server/routes/**/*.ts" {
2
3    const Route: import("@server/services/router").Route;
4
5    export = Route;
6}

If you imports metadatas, you can use the GlobImportedWithMetas generic:

1declare module "metas:@server/routes/**/*.ts" {
2
3    const Route: import("@server/services/router").Route;
4    const GlobImportedWithMetas: import('babel-plugin-glob-import').GlobImportedWithMetas;
5
6    export = GlobImportedWithMetas<Route>;
7}

Importation transformers

This plugin also allows you to transform importation statements.

You can define a list of custom transformation rules while initializing the plugin:

1BabelGlobImport({ 
2    debug: boolean,
3}, [{
4    // A function where you put the conditions to test for matching the 
5    test: (request: TUnresolvedRequest) => boolean,
6    // A function where you return by which statements 
7    replace: (
8        // The importation request (ex: ./src/server/models/**.ts)
9        request: TRequest,
10        // The files
11
12 that were matched by the importation request
13        matches: FileMatch[],
14        // Access to babel's methods to create new statements
15        t: typeof types
16    ) => types.Statement[] | void
17}])

Example

This example replaces import models from "@models" by import models from "@server/models/index.ts";

1BabelGlobImport({ }, [{
2
3    // (Optional) Giving a name to your transformer will make debugging easier
4    name: 'Models import shortcut',
5
6    // Match the import we want to replace 
7    test: (request) => (
8        // import
9        request.type === 'import' 
10        && 
11        // models
12        request.imported.type === 'default'
13        && 
14        // from '@models';
15        request.source === '@models' 
16    ),
17
18    // If matched, replace it
19    replace: (request, matches, t) => {
20        // import
21        return t.importDeclaration(
22            // models
23            [t.importDefaultSpecifier( t.identifier( request.imported.name ))],
24            // from "@server/models/index.ts";
25            t.stringLiteral("@server/models/index.ts")
26        )
27    }
28}])

Changelog

16/07/2024

• Fix conflict between import names

15/07/2024

• Added support for using regex and other shortcuts in glob patterns

28/06/2024

• Fixed potential naming conflict between two imports. An error was triggered when you import two different folders having the same structure.

13/07/2023

• Fixed issue with simple imports without specifiers import 'my/glob/path/*.ts was crashing

07/02/2023

• Fixed issue where generated importation statement was invalid (the imported name was empty)

06/01/2023

• Add a comment before an import to debug it. Ex:

1// @babel-debug
2import * from 'metas:./**/*.ts';

• Possibility to add a name to each transformer to improve debugging

01/01/2023

• Export the plugin factory via module.exports
• Added possibility to get importation metadata (by prefixing the glob path by metas:)
• Code cleanup & restructuration
• Fix bad characters in importation names

TODO

• Cleanup the code
• Improve debugging
• Improve the doc with more examples