{"action":"created","issue":{"url":"https://api.github.com/repos/mozilla/localForage/issues/424","labels_url":"https://api.github.com/repos/mozilla/localForage/issues/424/labels{/name}","comments_url":"https://api.github.com/repos/mozilla/localForage/issues/424/comments","events_url":"https://api.github.com/repos/mozilla/localForage/issues/424/events","html_url":"https://github.com/mozilla/localForage/issues/424","id":101258342,"number":424,"title":"Use a new generation module bundler to create the dist files","user":{"login":"thgreasi","id":1295829,"avatar_url":"https://avatars.githubusercontent.com/u/1295829?v=3","gravatar_id":"","url":"https://api.github.com/users/thgreasi","html_url":"https://github.com/thgreasi","followers_url":"https://api.github.com/users/thgreasi/followers","following_url":"https://api.github.com/users/thgreasi/following{/other_user}","gists_url":"https://api.github.com/users/thgreasi/gists{/gist_id}","starred_url":"https://api.github.com/users/thgreasi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thgreasi/subscriptions","organizations_url":"https://api.github.com/users/thgreasi/orgs","repos_url":"https://api.github.com/users/thgreasi/repos","events_url":"https://api.github.com/users/thgreasi/events{/privacy}","received_events_url":"https://api.github.com/users/thgreasi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-08-16T12:19:06Z","updated_at":"2015-08-18T04:55:33Z","closed_at":null,"body":"This is just to track a discussion about using a module bundler to create the dist files, instead of `grunt-contrib-concat` that we currently use.\r\n\r\nSome points of consideration are:\r\n* Do we have a preference on any specific bundler.\r\n* UMD standalone package generation\r\n  * should it be able to automatically create one\r\n  * or we can write our own export code\r\n* How does requiring the dist bundle works from the same/other bundlers\r\n  * [Webpack](https://github.com/webpack/webpack) renames all require calls by default\r\n  * [Browserify](https://github.com/substack/node-browserify) needs [derequire](https://github.com/calvinmetcalf/derequire) in order to require existing bundles\r\n* Is it possible to require parts from within the dist bundle\r\n  * for example can we require the serializer"},"comment":{"url":"https://api.github.com/repos/mozilla/localForage/issues/comments/132071645","html_url":"https://github.com/mozilla/localForage/issues/424#issuecomment-132071645","issue_url":"https://api.github.com/repos/mozilla/localForage/issues/424","id":132071645,"user":{"login":"thgreasi","id":1295829,"avatar_url":"https://avatars.githubusercontent.com/u/1295829?v=3","gravatar_id":"","url":"https://api.github.com/users/thgreasi","html_url":"https://github.com/thgreasi","followers_url":"https://api.github.com/users/thgreasi/followers","following_url":"https://api.github.com/users/thgreasi/following{/other_user}","gists_url":"https://api.github.com/users/thgreasi/gists{/gist_id}","starred_url":"https://api.github.com/users/thgreasi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thgreasi/subscriptions","organizations_url":"https://api.github.com/users/thgreasi/orgs","repos_url":"https://api.github.com/users/thgreasi/repos","events_url":"https://api.github.com/users/thgreasi/events{/privacy}","received_events_url":"https://api.github.com/users/thgreasi/received_events","type":"User","site_admin":false},"created_at":"2015-08-18T04:55:33Z","updated_at":"2015-08-18T04:55:33Z","body":"## Summary\r\n\r\n### [browserify build](https://github.com/thgreasi/localForage/tree/browserify-dist-build)\r\n\r\n* uses [babelify](https://github.com/babel/babelify) for ES6 compilation\r\n* browserify leaves `require` calls intact in the dist file, so we need to use a [derequire](https://github.com/calvinmetcalf/derequire) step to allow rebundling\r\n* webpack users can use both `require('localforage')` and `require('script!localforage')`\r\n* rebundling with webpack, using `require('localforage')`, shows a warning :\r\n```\r\nWARNING in ./dist/localforage.js\r\nCritical dependencies:\r\n8:484-491 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.\r\n @ ./dist/localforage.js 8:484-491\r\n ```\r\n\r\n### [webpack build](https://github.com/thgreasi/localForage/tree/webpack-dist-build)\r\n\r\n* uses [babel-loader](https://github.com/babel/babel-loader) for the ES6 compilation\r\n* webpack renames `require` calls to `__webpack_require__` by default\r\n* webpack users can use both `require('localforage')` and `require('script!localforage')`\r\n\r\n\r\n## File Sizes\r\n\r\n### pre ES6\r\n90.7KB localforage.js\r\n25.2KB localforage.min.js\r\n71.7KB localforage.nopromises.js\r\n20.0KB localforage.nopromises.min.js\r\n\r\n### babel + concat\r\n97.3KB localforage.js\r\n26.5KB localforage.min.js\r\n78.3KB localforage.nopromises.js\r\n21.4KB localforage.nopromises.min.js\r\n\r\n### browserify\r\n89.0KB localforage.js\r\n26.0KB localforage.min.js\r\n67.3KB localforage.nopromises.js\r\n19.8KB localforage.nopromises.min.js\r\n\r\n### webpack\r\n88.6KB localforage.js\r\n24.4KB localforage.min.js\r\n69.6KB localforage.nopromises.js\r\n19.2KB localforage.nopromises.min.js\r\n\r\n## UMD code\r\n\r\n### pre ES6\r\n```js\r\nif (moduleType === ModuleType.DEFINE) {\r\n    define('localforage', function() {\r\n        return localForage;\r\n    });\r\n} else if (moduleType === ModuleType.EXPORT) {\r\n    module.exports = localForage;\r\n} else {\r\n    this.localforage = localForage;\r\n}\r\n```\r\n\r\n### babel + concat\r\n```js\r\n(function (global, factory) {\r\n    if (typeof define === 'function' && define.amd) {\r\n        define('localforage', ['exports', 'module'], factory);\r\n    } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {\r\n        factory(exports, module);\r\n    } else {\r\n        var mod = {\r\n            exports: {}\r\n        };\r\n        factory(mod.exports, mod);\r\n        global.localforage = mod.exports;\r\n    }\r\n})(this, function (exports, module) {\r\n//...\r\n```\r\n\r\n### browserify\r\n```js\r\n(function(f) {\r\n    if (typeof exports === \"object\" && typeof module !== \"undefined\") {\r\n        module.exports = f()\r\n    } else if (typeof define === \"function\" && define.amd) {\r\n        define([], f)\r\n    } else {\r\n        var g;\r\n        if (typeof window !== \"undefined\") {\r\n            g = window\r\n        } else if (typeof global !== \"undefined\") {\r\n            g = global\r\n        } else if (typeof self !== \"undefined\") {\r\n            g = self\r\n        } else {\r\n            g = this\r\n        }\r\n        g.localforage = f()\r\n    }\r\n})(function() {\r\n//...\r\n```\r\n\r\n### webpack\r\n```js\r\n(function webpackUniversalModuleDefinition(root, factory) {\r\n\tif(typeof exports === 'object' && typeof module === 'object')\r\n\t\tmodule.exports = factory();\r\n\telse if(typeof define === 'function' && define.amd)\r\n\t\tdefine(factory);\r\n\telse if(typeof exports === 'object')\r\n\t\texports[\"localforage\"] = factory();\r\n\telse\r\n\t\troot[\"localforage\"] = factory();\r\n})(this, function() {\r\n//...\r\n```\r\n"}}