How to expose an es6 module globally - javascript

I need to write a module that will be available on the window global.
I'm using es6 to create the module and every single class I define has it's own file.
I'm using webpack to babelify and bundle these classes.
The entry point of my module is also the file containing the global to be exposed.
I've tried every method to make this possibe, icluding:
expose-loader
import-loader
expoert-loader
output: library
black-magic :(
Example of code I've tried:
I want to get: window.MyMod
// mymod.js
export class MyMod {
constructor(aaa) {
this.aaa = aaa;
}
toString() {
return this.aaa;
}
}
// webpack.config
var entries = [
'./src/mymod.js'
];
module.exports = {
...,
module: {
loaders: [
{
test: require.resolve('./src/mymod.js'),
loader: 'expose?MyMod'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
This only gets me an object MyMod on the window that contains MyMod as a constructor.
Any help will be appreciated.

You should combine export default class Foo with the library and libraryTarget settings in Webpack's config. Something like:
// src/Foo.js
export default class Foo { ... }
// webpack.config.json
{
"output": {
"library": "Foo",
"libraryTarget": "var"
}
}
You should be able to use the library as window.Foo once the bundle has been loaded.

This is basically the same issue as Exporting a class with Webpack and Babel not working , except that you have a named export instead of a default export. Your entry file should be
import {MyMod} from './mymod';
module.exports = MyMod;
or
module.exports = require('./mymod').MyMod;
If you don't want to do any of these and keep './src/mymod.js' as entry file, use a CommonJS export instead of an ES6 export in that file:
// mymod.js
exports.MyMod = class MyMod {
constructor(aaa) {
this.aaa = aaa;
}
toString() {
return this.aaa;
}
}

Related

How to properly export an ES6 module function as a library for use in a node app?

Let's say that I have a node.js application, which does NOT go through my webpack bundling:
Node App
const Html = require('./build/ssr-bundle.js');
let result = Html.ssrbundle.render();
console.log(result);
Here is my ES6/JSX file, which is getting processed by webpack and I want to be able to access that render function in my node app (you guessed right, I am trying to SSR react stuff ;) )
src/Html.js -(webpack)-> build/ssr-bundle.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import CustomComponent from './custom-component.js';
module.exports = {
render : function () {
return ReactDOMServer.renderToString(<CustomComponent />);
} };
And here is my Webpack config
webpack.config.js
var path = require('path');
module.exports = {
entry: {
ssr: './src/Html.js',
//frontend: './src/frontend-Html.js'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'ssr-bundle.js',
library: 'ssrbundle'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['env','react'],
plugins: ["transform-es2015-destructuring", "transform-object-rest-spread"]
}
},
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
stats: {
colors: true
},
devtool: 'source-map'
};
Whatever I do, I cannot figure out how to properly use that exported variable "ssrbundle" and subsequently the render function. If I had my node app included in the bundle, everything would be all right, but this is not what I want to do.
As apokryfos suggested, I played around with the libraryTarget Webpack setting. You can find more info on using Webpack to author a library (what I was really trying to achieve) here:
https://webpack.js.org/guides/author-libraries/
and here are code examples:
https://github.com/kalcifer/webpack-library-example/blob/master/webpack.config.babel.js.
What did the trick for me, was to set the libraryTarget to "umd" , which is different than the "var" setting which is set by default and is suitable i.e. for including the script in an HTML file

Babel not transpiling `class` in *.mjs files

Given
import test from './test.js';
import test2 from './test.mjs';
and test.js and test.mjs both containing
class A {
test() {
console.log('from mjs'); // or console.log('from js');
}
}
export default A;
Babel transpiles
[...];
(0, _createClass2.default)(A, [{
key: "test",
value: function test() {
console.log('from js');
}
}]);
[...]
class A {
test() {
console.log('from mjs');
}
}
[...]
How should I configure babel to treat *.mjs files exactly like *.js files. I need them to be *.mjs files so that I can run it in node without transpilation.
Plugins I am currently explicitly adding are
'#babel/plugin-proposal-class-properties', '#babel/plugin-transform-runtime', '#babel/plugin-transform-classes'
You need to add *.mjs extension to your Webpack configuration:
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: 'babel-loader',
options: {
// ...

Cannot export API in WebPack

I am creating a library in Javascript and I am shipping it as a bundle .js file using Webpack. The following file lib.js serves as the entry for Webpack in order to expose all the API in the library:
import * as bodies from "./bodies.js";
import * as composites from "./composites.js";
import * as connections from "./connections.js";
export var bodies = {
Body: bodies.Body,
Pyramid: composites.Pyramid
};
export var connections = {
Connection: connections.Connections
};
All the files imported basically export classes that I am referencing in lib.js:
// In bodies.js
export class Body { ... };
// In composites.js
export class Pyramid { ... };
// In connections.js
export class Connection { ... };
The file for bundling using Webpack is:
const path = require('path');
module.exports = {
entry: './lib.js',
output: {
filename: 'lib-bundle.js',
path: path.resolve(__dirname, 'out')
},
module: {
rules: [
/* In order to transpile ES6 */
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: { presets: ['env'] }
}
}
],
}
};
Webpack successfully bundle everything and I get my lib file in the end.
Problems using it
Then I use it in another project:
import * as mylib from "./lib/lib-bundle.js";
// Trying to use Pyramid
var pyramid = new mylib.bodies.Pyramid();
I use again Webpack to bundle this file into a file called start.js which i import in my page:
<script type="application/javascript" src="./start.js"></script>
However when running this page, I get an error. If I run the F12 tools and break in the bundle where I try creating an instance of the pyramid, there i can clearly see that object mylib does not have anything I have exposed. It is empty, lacking all the objects I exposed before.
What am I doing wrong?
You need to specify a libraryTarget in the output section of your webpack config file.
With it the bundle will correctly export your defined values, which
can be then imported with the various module loaders.
I suggest using libraryTarget: "umd" since it will add support for the most commonly used loaders. From the webpack docs:
This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD and as global variable.
The resulting webpack config file is as follows:
const path = require('path');
module.exports = {
entry: './lib.js',
output: {
filename: 'lib-bundle.js',
path: path.resolve(__dirname, 'out'),
libraryTarget: 'umd',
},
module: {
rules: [
/* In order to transpile ES6 */
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: { presets: ['env'] }
}
}
],
}
};

ES6/Babel Class constructor cannot be invoked without 'new'

I'm trying to create a custom Quill theme, extending the bubble one. I'm facing a strange ES6 inheritance problem, where it seems I cannot call super() in my constructor. Here is my code:
import BubbleTheme, { BubbleTooltip } from 'quill/themes/bubble'
class LoopTheme extends BubbleTheme {
constructor (quill, options) {
super(quill, options)
}
extendToolbar (toolbar) {
super.extendToolbar(toolbar)
this.tooltip = new LoopTooltip(this.quill, this.options.bounds);
this.tooltip.root.appendChild(toolbar.container);
}
}
class LoopTooltip extends BubbleTooltip {
}
LoopTooltip.TEMPLATE = [
'<span class="ql-tooltip-arrow"></span>',
'<div class="ql-tooltip-editor">',
'<input type="text" data-formula="e=mc^2" data-link="https://myurl.com" data-video="Embed URL">',
'<a class="ql-close"></a>',
'</div>'
].join('');
export { LoopTooltip, LoopTheme as default }
Bubble theme could be found here
My Babel presets:
{
"presets": [
"es2015",
"es2016",
"stage-0",
"react"
]
}
Webpack js file config:
module: {
rules: [
{
test: /\.js$/,
include: [
resolve(__dirname, 'app')
],
loader: 'babel-loader',
exclude: /node_modules/
}, {...
Output generated code:
var LoopTheme = function (_BubbleTheme) {
_inherits(LoopTheme, _BubbleTheme);
function LoopTheme() {
_classCallCheck(this, LoopTheme);
return _possibleConstructorReturn(this, (LoopTheme.__proto__ || Object.getPrototypeOf(LoopTheme)).apply(this, arguments));
}
_createClass(LoopTheme, [{
key: 'extendToolbar',
value: function extendToolbar(toolbar) {
_get(LoopTheme.prototype.__proto__ || Object.getPrototypeOf(LoopTheme.prototype), 'extendToolbar', this).call(this, toolbar);
this.tooltip = new LoopTooltip(this.quill, this.options.bounds);
this.tooltip.root.appendChild(toolbar.container);
}
}]);
return LoopTheme;
}(_bubble2.default);
var LoopTooltip = function (_BubbleTooltip) {
_inherits(LoopTooltip, _BubbleTooltip);
function LoopTooltip() {
_classCallCheck(this, LoopTooltip);
return _possibleConstructorReturn(this, (LoopTooltip.__proto__ || Object.getPrototypeOf(LoopTooltip)).apply(this, arguments));
}
return LoopTooltip;
}(_bubble.BubbleTooltip);
LoopTooltip.TEMPLATE = ['<span class="ql-tooltip-arrow"></span>', '<div class="ql-tooltip-editor">', '<input type="text" data-formula="e=mc^2" data-link="myurl.com" data-video="Embed URL">', '<a class="ql-close"></a>', '</div>'].join('');
exports.LoopTooltip = LoopTooltip;
exports.default = LoopTheme;
I'm having the following error: events.js:59 Uncaught TypeError: Class constructor BubbleTheme cannot be invoked without 'new'. However, the LoopTheme is correctly called with new by Quill here. When I debug step by step, I correctly enter the LoopTheme constructor, and the error is raised when super is called.
Am I missing something here? I've always used inheritance, and I use it elsewhere in my code (between my classes), where here am I having trouble?
Thanks for your help
I ran into the exact same issue while extending Quill’s BaseTheme.
As Bergi correctly pointed out in the comments above, this has to do with the fact that babel-loader isn’t transpiling Quill’s modules because they're inside node_modules/, which is excluded.
You can either update the exclude option in your Webpack config and use a regex to skip the node_modules/quill/ folder or use include instead:
{
test: /\.js$/,
loader: 'babel-loader',
include: [
path.join(__dirname, '../src'), // + any other paths that need to be transpiled
/\/node_modules\/quill/,
]
}
You can also replace this:
import BubbleTheme from 'quill/themes/bubble'
into this:
const BubbleTheme = Quill.import('themes/bubble')
I would like to suggest another way. In case you are not building quill in you pipe line, you could very well reference the runtime constructor above the extended class.
import { sanitize } from 'quill/formats/link';
let BlockEmbed = window['Quill'].import('blots/block/embed');
export class MediaBlot extends BlockEmbed {
...
}

using ES6 npm module (webpack) in the front end

I'm making an npm module using ES6 syntax (imports, exports etc) via webpack.
When I try to initialize an instance of the exported class in the frontend to test it, it isn't working and I've got a feeling it's to do with what CommonJS exports return vs ES6 exports.
example.js
export default class Example { ....
example-after-webpack-stuff.js
var Example = (function() ....
demo.js
var example = new Example();
demo.html
<script src="../example-after-webpack-stuff.js"></script>
<script src="demo.js"></script>
I receive the following:
Error: Uncaught TypeError: Example is not a function
EDIT
Webpack config:
module.exports = {
entry: './src/example.js',
output: {
filename: "./dist/example.js",
library: "Example",
libraryTarget: "var"
},
module: {
loaders: [
{
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
};
Since babel 6, export default class Example will be compiled to exports.default = Example. While in Babel 5, it will be compiled to exports = Example. So you code will run without error using babel 5.
In babel 6, you can use CommonJS way module.exports:
class Example {
constructor() {
...
}
}
module.exports = Example;
Or you can use babel-plugin-add-module-exports to change babel 6's behavior.
npm install babel-plugin-add-module-exports --save-dev
Add it in webpack.config.js:
loaders: [
{
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015'],
plugins: ['add-module-exports']
}
}
]

Categories