All geek questions in one place

Use webpack to merge multiple ES6 classes into one file for import in script tag

Three days have passed when I try to understand webpack to perform a simple task (which, of course, for three days, which I could do manually), but for the sake of exploring the web package and the possibility of scale up ...

I came with you with a desperate question, probably related to what this person was trying to achieve How to combine and minimize files using webpack , but his solution does not work for me.

The problem is pretty simple. I have three classes:

./SRC/class1.js

export default class One { constructor() { this.isHorrible = true } whatIsHorrible() { return (this) } }

./SRC/class2.js

 class Two { iMSoFat() { this.fatness = 88 return (this.fatness) } } export { Two }

./SRC/class3.js

 class Three { constructor() { this.isHorrible = true } whatIsHorrible() { return (this) } } export { Three }

What I would like to do on the index.html page:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test ton cul</title> <script src="./lib/ebjs.js" charset="utf-8"></script> </head> <body> <script type="text/javascript"> console.log(One, Two, Three); </script> </body> </html>

I would also be satisfied

 new window.One() //.. or EVEN new window.ebjs.One()

So, I tried several configs, I will spare you with the detailed details and disappointments that I experienced ... Lack of sleep and food.

I tried for a long time to make an entry point into the array ... but then I read somewhere in the document "If you pass an array: all modules are loaded at startup, and the last is exported." And that explained a lot ... I always had only one of the class ... whatever that means ... why do this? For me, this makes absolutely no sense ... anyway ... But even then the class I received did not have the form library.class () or window.class () or class ().

So, after some time I can load everything into index.js and export it!

At first I tried importing ES6 for the style, because why not. But import {One} from './src/class1' doesn't work anyway, just create a bundle on undefined export. Like window.library.One = undefined.

So, I muttered again before settling this index.js:

index.js

 const class1 = require('./src/class1') const class2 = require('./src/class2') const class3 = require('./src/class3') export { class1, class2, class3 }

My webpack configuration has changed quite a bit, but here is what I am using now:

webpackrc.config.babel.js

 const libraryName = 'ebjs' const outputFile = `${libraryName}.js` export default { entry: './index.js', target: 'web', // entry: './index.js', devtool: 'source-map', output: { path: `${__dirname}/lib`, filename: outputFile, library: libraryName, libraryTarget: 'umd', umdNamedDefine: true, }, module: { loaders: [ { test: /(\.jsx|\.js)$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/, }, ], }, }

Many details and trial / error were undertaken with pain .. and I wrote a journal of my experiments. Maybe I will share it with the world before pulling the trigger in a couple of hours.

In any case, this works, but not as expected, and definitely not in terms of production quality. To access the class I have to use "new libraryName.One.One ()". If I wanted to bundle this for npm, that would not make sense to users. This still does not work as expected.

Here is a screenshot of the object on the page: The first problems of the world

I hope someone comes to my aid. My life can really depend on this :)

Thanks!

EDIT AND END

So the cbll answer really worked ... I could use the es6 import statement and the classes were correctly exported to the kit. In html, I could use

 libraryName.class()

I created a small repo if someone was always in the same predicament as me:

https://github.com/albertbuchard/example-webpack-es6-class-bundle

Thanks again cbll and Michael Jungo!

+6
source share
2 answers

In each classN.js export each class by export default One either at the end of the file or at the beginning (as in the example of "One", but not in the others). Import each of them into index.js : import One from './classN.js' , of course, if they are in the same folder (if not, add the correct path). It will then be included in your main index.js and linked to Webpack.

In your case, this means that your index.js will start something like this:

 import One from ('./src/class1.js') import Two from ('./src/class2.js') import Three from ('./src/class3.js')

It is assumed that you export all your classes, such as One , in the following example:

export default class One { // code goes here

export default class Two { // code goes here

export default class Three { // code goes here

+7
source

You are pretty much there, but it looks like you are a little confused by the import / export syntax.

First of all, you export classes differently. In ./src/class1.js , the default export default class One { used: export default class One { , and in the other two you use named export export { Two } . To import them correctly, you must:

 import One from './src/class1' import { Two } from './src/class2' import { Three } from './src/class3'

Since require works differently from ES modules, the equivalent with the requirement is:

 const One = require('./src/class1').default; const Two = require('./src/class2').Two; const Three = require('./src/class3').Three;

Then you can simply export them with:

 export { One, Two, Three }

And in your index.html you need to add the library prefix:

 <script type="text/javascript"> console.log(ebjs.One, ebjs.Two, ebjs.Three); </script>
+2
source

Source: https://habr.com/ru/post/1015653/

More articles:


All Articles