3

I have a npm module (https://www.npmjs.com/package/squarebook), it is using webpack with babel loader to generate dist/bundle.js from src/index.js then I have specified in my package.json that the main file is index.js (main directory), that main file has the following code:

module.exports = require('./dist/bundle');

Now I have installed that module via npm (npm install squarebook) in other project where I am using gulp browserify with babel this way:

import browserify from 'gulp-browserify';
import babelify from 'babelify';

   gulp.task('build_js', function() {
     return gulp.src('src/js/main.js')
      .pipe(browserify({debug:true}))
      .pipe(gulp.dest('dist/js/'));
   });

What this other project has in src/js/main.js is:

import guestbook from 'squarebook';

I am expecting to be able to use guestbook as my exported function from squarebook package but it is just an empty object with proto.

What am I missing or doing wrong?

1

2 Answers 2

1

You wouldn't need that index.js file you created on your squarebook package. The main file of your library could just be the distributable file generated by webpack. Read in the webpack docs on how to build your code in to a distributable library. Your main file could also be the normal entry point of your application, but in that case you force the users of your library to use the same webpack transformers as you do (e.g. if you use ES6 syntax in your library they would need to use Babel as well).

Edit: If you want to be able to import the main function directly

 var squarebook = require('squarebook');

You should export it from your index module like this:

 module.exports = squarebook;

Instead of using the ES6 export default statement. Have a look at the es6console fiddle to understand why using export default will not work correctly when you import from an ES5 file.

2
  • I will try this later if it works I will accept this answer, thanks!
    – ferflores
    Sep 23, 2016 at 15:17
  • I did put dist/bundle.js file as main file in package json now when I am importing the package I have a object with a 'default' property but there is not the main function of the square package, still empty, I guess if it will work if I put the main (not bundled) file as main it will work but I would like it to be es5 compatible, what else can I do or test?
    – ferflores
    Sep 23, 2016 at 18:19
0

@Matthisk answer works but the solution without using module.exports and keeping export default was to specify the library target (libraryTarget: 'umd') in my package webpack config file like this:

module.exports = {
  entry: {
    'bundle': './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'umd'
  }

That way I was able to import my module in my ES6 project and it is importable also from ES5 modules this way:

var squarebook = require('squarebook').default;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.