errors with webpack

[monei]

errors with webpack

[lpinca]

This is a bit problematic.

The first issue is fs.readdirSync. I'm not familiar with webpack but with browserify you can use the brfs transform and get the list of resources as expected in the bundle. I guess the same can be achieved in webpack.

The second issue is that resources are required and instantiated lazily. This will not work with bundlers because AFAIK they can only read require() calls that are statically analyzable.

So I think that right now there is no way to use the lib in the browser unless we remove the lazy require feature.

[lpinca]

Actually it seems that webpack supports dynamic requires. I'll see if I can find a way to make it work.

[lpinca]

I managed to make it work with webpack. Here is the configuration and the required dependencies:

'use strict';

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    libraryTarget: 'umd',
    library: 'Shopify'
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.js$/,
        loader: 'transform?brfs'
      }
    ]
  }
};

babel-core
babel-loader
babel-preset-es2015
brfs
json-loader
transform-loader
webpack

It seems to work but the generated bundle is ~750 KB 😄 (~180 KB when minimized).
As said above, I'm not a webpack expert so maybe it can be improved.

[lpinca]

With 5f83632 the size of the generated bundle is ~380 KB (~130 KB minimized). We can reduce it further by removing the lodash dependency and using some lightweight alternatives for _.pick and _.omit, but I don't know if it makes sense as the library has not been designed for the browser.

[Jan-Jan]

Thanks for this!