Parcel: how to introduce a module as globals variable to all other sub modules

Created on 18 Jan 2019  路  9Comments  路  Source: parcel-bundler/parcel

i am using parcel to bundle my js, before with webpack it provides a plugin using that we can introduce some variable which will be available in all other module as a global.
Example: Like i need jquery for other modules and for that i have to import jquery in all of them instead if there is a way the jquery variable would be available as a global to all my modules.

Question
Source
picture mayank-bansal-e1781

All 9 comments

Like i need jquery for other modules

By module, do you mean bundle or an actual module?
If you have only one bundle, then you need to import jQuery in every module
```js
const jQuery = require("jquery");
````

mischnic picture mischnic on 18 Jan 2019
👍1

i meant module but for further clarification please open and see the link below
https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack

mayank-bansal-e1781 picture mayank-bansal-e1781 on 21 Jan 2019

See the --global command line option: https://parceljs.org/cli.html#expose-modules-as-umd

danmarshall picture danmarshall on 22 Jan 2019
👍1

@danmarshall how do i import jquery and pass that as UMD.

mayank-bansal-e1781 picture mayank-bansal-e1781 on 25 Jan 2019

@Mayank694 If you use the global $ of JQuery for example, you might just have:

index.html

Loading Jquery from CDN and injecting a global variable $

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
    <script src="moduleA.js"></script>
</body>
</html>

moduleA.js

import B from './moduleB';
$(document.body).append('<div>AAA</div>');
B();

moduleB.js

export default function B() {
    $(document.body).append('<div>BBB</div>');
}

Both moduleA and moduleB just use the global variable named $. Or whatever global variable you are trying to use.

danmarshall picture danmarshall on 26 Jan 2019

thanks @danmarshall for the help

mayank-bansal-e1781 picture mayank-bansal-e1781 on 29 Jan 2019

That do not works for me. My global variable is named global. How can I access it ?

danielo515 picture danielo515 on 22 May 2019

@danielo515
See this: https://github.com/kedzior-io/parcel-global-var-typescript-vue-test (ignore vue part)

kedzior-io picture kedzior-io on 31 Oct 2019
👍1

Loading Jquery from CDN and injecting a global variable $

Is it possible to load jQuery not from CDN? I need to use it from local file ./assets/js/jquery.min.js
Thanks in advance! :)

goodleby picture goodleby on 3 Sep 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

medhatdawoud picture medhatdawoud  路  3Comments
davidnagli picture davidnagli  路  3Comments
dsky1990 picture dsky1990  路  3Comments
devongovett picture devongovett  路  3Comments
will-stone picture will-stone  路  3Comments