Better webpack/npm support. module export, main

[seancolyer]

This package is currently available on via npm, but does not seem to be well formatted to be used via npm/webpack. I have a project where I include this to be bundled as part of my client side code, built via webpack. I make it work as logged below, but it would be nice if it were easier.

Issue: main

In webpack.config.js, you must set resolve.alias to: 'office-ui-fabric-js': path.join(__dirname, './node_modules/office-ui-fabric-js/dist/js/fabric.min.js')

This seems to be due to not having specified a main value in the built package.json.

Issue: exports

Then when actually requiring it (though you could do this in webpack.config as well), you must use the exports-loader to export the var fabric that is being created within office-ui-fabric-js. This would not be necessary if the library were exporting as a module.

Current hack: const fabric = require('exports?fabric!office-ui-fabric-js');

This seems to be due to writing to global fabric rather than exporting in module format

Please let me know if I missed something! It's entirely possible I overlooked an obvious step to take here.

[fume]

+1. Same here. Your suggestion about exports was really helpful to me, thanks!

I did it the following way:

Installed exports-loader

npm install exports-loader --save-dev

Defined a loader in the webpack.config for fabric.js (or fabric.min.js)

module:{
   rules:[
      { test: /fabric(\.min)?\.js$/, use: 'exports-loader?fabric' }
   ]
}

Imported fabric.js as @seancolyer suggested

const fabric = require('office-ui-fabric-js/dist/js/fabric.min.js');

[hxhieu]

Thanks @fume
For now, you snippet works well 👍

[Linda-Editor]

Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend that you use the newer version, Office UI Fabric, with React as your front-end framework. We are closing this issue; if you still need assistance with Fabric.js, visit Stack Overflow/office-ui-fabric.