I am trying to build a library using webpack. When consuming my library, I want to be able to call myLibrary.showAlert() from a script tag or other js document. My issue is that I have multiple files all being imported into a main.js file which is the entry point of my library. If I import and export each file in main.js, it works. My question is, is there a way to export all files without listing each one individually?

Example:

//alerts.js
export function showAlert() {
  console.log("show alert called");
}

//translations.js
export function translateText() {
  console.log("translate text called");
}

//main.js
import "./components/alerts.js";
import "./components/translations.js";

     //Note: I want to avoid this part
export * from "/components/alerts.js";
export * from "/components/translations.js";

//webpack.library.config.js
const path = require("path");
const libraryName = "rmsui";
var configLib = Object.assign({}, config, {
    mode: "development",
    name: "myLibrary",
    entry: {
        // JS
        myLibrary: "./js/main.js",
        errorPages: "./js/errorPages.js" //some other entrypoint not shown above
    },
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        filename: "js/[name].js",
        globalObject: "this",
        library: {
            name: libraryName,
            type: "umd",
        },
        libraryTarget: "var",
        //umdNamedDefine: true,
        assetModuleFilename: "assets/[hash][ext][query]"
    },
    plugins: [
        //new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ]
});
module.exports = configLib;

I am trying to build a library using webpack. When consuming my library, I want to be able to call myLibrary.showAlert() from a script tag or other js document. My issue is that I have multiple files all being imported into a main.js file which is the entry point of my library. If I import and export each file in main.js, it works. My question is, is there a way to export all files without listing each one individually?

Example:

//alerts.js
export function showAlert() {
  console.log("show alert called");
}

//translations.js
export function translateText() {
  console.log("translate text called");
}

//main.js
import "./components/alerts.js";
import "./components/translations.js";

     //Note: I want to avoid this part
export * from "/components/alerts.js";
export * from "/components/translations.js";

//webpack.library.config.js
const path = require("path");
const libraryName = "rmsui";
var configLib = Object.assign({}, config, {
    mode: "development",
    name: "myLibrary",
    entry: {
        // JS
        myLibrary: "./js/main.js",
        errorPages: "./js/errorPages.js" //some other entrypoint not shown above
    },
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        filename: "js/[name].js",
        globalObject: "this",
        library: {
            name: libraryName,
            type: "umd",
        },
        libraryTarget: "var",
        //umdNamedDefine: true,
        assetModuleFilename: "assets/[hash][ext][query]"
    },
    plugins: [
        //new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ]
});
module.exports = configLib;

• javascript
• webpack

Share Improve this question Follow edited Mar 20 at 23:33 Hilory 2,14177 gold badges1414 silver badges3030 bronze badges asked Mar 20 at 17:35 Lee HarringtonLee Harrington 1111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

try this solution: Modify your main.js file like this:

    const modules = require.context("./components", false, /\.js$/);
    
    modules.keys().forEach((key) => {
        Object.assign(exports, modules(key));
    });

require.context("./components", false, /.js$/) loads all .js files from the components directory.

.keys() gets all file paths.

.forEach() iterates over them and imports the modules.

Object.assign(exports, modules(key)) merges all exports into a single object.