Wondering what’s next for npm?Check out our public roadmap! »

    glob-import-loader

    1.1.4 • Public • Published

    Build Status npm version

    glob-import-loader

    Webpack loader that enables ES6 imports with glob patterns. Leverages Webpack's Enhanced Resolver to resolve aliases.

    Inspired by webpack-import-glob-loader

    Known Issues

    1. ?, +, and ! globbing characters have issues as they're currently incompatible with Enhanced Loader. Looking for workarounds!

    Notes on Sass's @use and @forward

    @use's configuration syntax (with) and @forward's configuration syntax (hide) is not supported and will be ignored. These should not be added in a wildcard fashion and should instead be set individually on each module.


    import modules from "./foo/**/*.js";

    Expands into

    import * as module0 from "./foo/1.js";
    import * as module1 from "./foo/bar/2.js";
    import * as module2 from "./foo/bar/3.js";
    
    var modules = [module0, module1, module2];

    For importing from node module

    import modules from "a-node-module/**/*js";

    Expands into

    import * as module0 from "a-node-module/foo/1.js";
    import * as module1 from "a-node-module/foo/bar/2.js";
    import * as module2 from "a-node-module/foo/bar/3.js";
    
    var modules = [module0, module1, module2];

    For side effects:

    import "./foo/**/*.scss";

    Expands into

    import "./foo/1.scss";
    import "./foo/bar/2.scss";

    For sass:

    @import "./foo/**/*.scss";

    Expands into

    @import "./foo/1.scss";
    @import "./foo/bar/2.scss";
    @use "./foo/**/*.scss" as *;

    Expands into

    @use "./foo/1.scss" as *;
    @use "./foo/bar/2.scss" as *;
    @forward "./foo/**/*.scss" as C;

    Expands into

    @forward "./foo/1.scss" as C0;
    @forward "./foo/bar/2.scss" as C1;

    Install

    npm install glob-import-loader --save-dev

    Usage

    You can use it one of two ways, the recommended way is to use it as a preloader

    // ./webpack.config.js
    
    module.exports = {
      ...
      module: {
        rules: [
          {
              test: /\.js$/,
              use: 'glob-import-loader'
          },
          {
              test: /\.scss$/,
              use: 'glob-import-loader'
          },
        ]
      }
    };

    Alternatively you can use it as a chained loader

    // foo/bar.js
    import "./**/*.js";
    
    // index.js
    import "glob-import-loader!foo/bar.js";

    Options

    Name Type Default Description
    resolve {Object} {} Your Webpack resolution (resolve) rules.
    banner {Function} undefined An optional function for how wildcard variables should display. Useful for things such as HMR Where names must be predictable.

    resolve

    Type: Object Default: {} (or default webpack resolution rules)

    This object should reference your resolution object in your webpack.config.js configuration.

    Example:

    webpack.config.js

    const resolve = {
      alias: {
        Sprite: path.resolve(__dirname, "src/assets/sprite"),
        CSS: path.resolve(__dirname, "src/css"),
        JS: path.resolve(__dirname, "src/js"),
      },
      modules: [path.resolve(__dirname, "node_modules")],
      extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
      plugins: [new DirectoryNamedWebpackPlugin(true)],
    };
    
    module.exports = {
      target: 'web',
      resolve,
      entry: { ... }
      module: {
        rules: [
          {
            test: /\.(j|t)sx?$/,
            include: [path.resolve(__dirname, 'src')],
            use: [
              'babel-loader',
              {
                loader: 'glob-import-loader',
                options: {
                  resolve,
                },
              },
            ],
          },
        ],
      },
      ... other settings ...
    };

    banner

    Type: Function Default: undefined

    This function gives you granular control over how "import" variables are output in the code should you need it. Can be useful when needing predictable variable names, such as with HMR. The banner function should return serialized JavaScript. The banner function receives two arguments:

    1. paths - An array of objects with the following structure:

      Name Description
      path The path to the imported file.
      module Variable reference to the value exported by the file.
      importString The import string use by Webpack to import the file
    2. varname - The variable name used when importing.

    banner Example:

    webpack.config.js

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(j|t)sx?$/,
            include: [path.resolve(__dirname, "src")],
            use: [
              "babel-loader",
              {
                loader: "glob-import-loader",
                options: {
                  banner(paths, varname) {
                    if (varname) {
                      return `var ${varname} = {${paths
                        .map(
                          ({ path: fn, module }) => `
                          "${path.basename(fn).split(".")[0]}":${module}
                        `
                        )
                        .join(",")}};`;
                    }
                  },
                },
              },
            ],
          },
        ],
      },
    };

    entry.js (source)

    import cmpts from "JS/**/*.cmpt.jsx";

    entry.js (output)

    ... webpack import statements ...
    
    // output via `banner` function
    var cmpts = {
      "loader": _webpack_path_to_module__,
      "autocomplete": _webpack_path_to_module__,
      "searchresults": _webpack_path_to_module__,
      "searchsuggestions": _webpack_path_to_module__
    };
    

    Install

    npm i glob-import-loader

    DownloadsWeekly Downloads

    442

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar