N
N
Nikita Gennadich2019-10-24 14:20:37
webpack
Nikita Gennadich, 2019-10-24 14:20:37

How to write a js module for Webpack so that module objects are available globally?

The essence of the problem:
There are two or three legacy libraries that are used in the system on pages inside the script tag , while no other webpack bundles are connected or planned on these pages.
However, it is not correct to keep the libraries in the repository, besides, it so happened that they already exist in our node_modules folder as dependencies, so the best solution is to create a separate entry_point for webpack so that it collects it in a separate bundle and connects it in the right place . I sort of figured out how to create a separate bundle, but the problem is that it’s not clear how to access this module from the global scope.
Tried like this:

import * as ClipboardJS from 'clipboard';
import * as lazy from 'jquery-lazy';

// console.log(ClipboardJS);
// Преобразуется в console.log(clipboard__WEBPACK_IMPORTED_MODULE_0___default.a);
// Внутри модуля корректно отрабатывает, что очевидно

export { ClipboardJS, lazy };

And like this:
// Синтаксис ES6-modules:
var ClipboardJS = require('clipboard');
var lazy = require('jquery-lazy');
module.exports = ClipboardJS;
module.exports = lazy;

Global scope doesn't care: I know there is a way to load modules via script-loader , when the module is bundled in one line without any parsing, but that doesn't seem like a good solution.
console.log(ClipboardJS); // undefined

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nikita Gennadich, 2019-10-28
@Psychosynthesis

Everything turned out to be much easier.

import * as ClipboardJS from 'clipboard';
import * as lazy from 'jquery-lazy';

window.ClipboardJS = ClipboardJS;
window.lazy = lazy;
// Работает как ожидается - обе библиотеки доступны глобально.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question