I wrote a small library and now I am trying to translate it to ES6, but also to make a version for normal use, just to connect the script tag and use it. I use webpack and babel-loader. Code from the main library file:

'use strict'; import helpers from './lib/helpers'; import styles from './lib/styles'; import color from './lib/color'; import decorators from './lib/decorators'; import forms from './lib/forms'; import DOM from './lib/DOM'; import namespace from './lib/namespace'; import addMethod from './lib/addMethod'; var eclipse = { globals: {}, storage: { dropdowns: [], bundles: [], spinners: [], staticTabs: [], adaptiveTabs: [], searches: [], cache: {} }, helpers: helpers, styles: styles, color: color, decorators: decorators, forms: forms, DOM: DOM, modules: {} }; eclipse.namespace = namespace.bind(eclipse); eclipse.addMethod = addMethod.bind(eclipse); export default eclipse;

Webpack settings:

 var webpack = require('webpack'); module.exports = { entry: './eclipse.js', externals: { jquery: 'jQuery' }, output: { path: __dirname, filename: 'eclipse.js', library: 'eclipse', libraryTarget: 'umd', umdNamedDefine: false }, resolve: { extensions: ['', '.js'] }, module: { loaders: [ { loader: 'babel-loader', query: { presets: ['es2015'] }, test: /\.js$/, exclude: /(node_modules)/ } ] }, devtool: null };

It seems everything is going well, but there is one problem. When usually connected via a script tag, an object falls into the global scope:

 { __esModule: true, default: мой объект библиотеки eclipse }

It turns out that I can not do so

 eclipse.someMethod

It falls like this:

 eclipse.default.someMethod

How can I get around this. I'm not familiar with the webpack. I understand that this happens because of "export default eclipse;", but I don’t know how to get around this. You can of course write "module.exports = eclipse;" but maybe there is another way? Maybe my method of assembly is not suitable at all? I did not do anything like this before, so maybe I did stupid things. I also use Gulp, but probably its code is hardly needed here.

  • webpack is an amateur product. Your gulp will work fine without it. - vp_arth

1 answer 1

Firstly, export.default does not webpack but transpiler. One of the replies to the githaba states that:

webpack uses the standard reqire call, and if you convert to es5, it wraps the import using .default and returns it to export

And there they just offer to make module.exports = Library; .

Even as an option, try to make

  export { foo as myFoo } from 'src/other_module';
  • Did you get the latest version? - Kostiantyn Okhotnyk
  • Left module.exports. And I do not understand the second option, export from? Import probably? - Sergey Miroshnik
  • This is called re-exporting in detail you can read here 2ality.com/2014/09/es6-modules-final.html - Kostiantyn Okhotnyk
  • I did not try to do it, but you can twist the options with "as" export {D as default}; - Kostiantyn Okhotnyk
  • This option did not work, left module.exports. Thanks for the help - Sergey Miroshnik