{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wpcom.js/issues/117","labels_url":"https://api.github.com/repos/Automattic/wpcom.js/issues/117/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wpcom.js/issues/117/comments","events_url":"https://api.github.com/repos/Automattic/wpcom.js/issues/117/events","html_url":"https://github.com/Automattic/wpcom.js/pull/117","id":105562960,"number":117,"title":"Use webpack to build final product","user":{"login":"dmsnell","id":5431237,"avatar_url":"https://avatars.githubusercontent.com/u/5431237?v=3","gravatar_id":"","url":"https://api.github.com/users/dmsnell","html_url":"https://github.com/dmsnell","followers_url":"https://api.github.com/users/dmsnell/followers","following_url":"https://api.github.com/users/dmsnell/following{/other_user}","gists_url":"https://api.github.com/users/dmsnell/gists{/gist_id}","starred_url":"https://api.github.com/users/dmsnell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dmsnell/subscriptions","organizations_url":"https://api.github.com/users/dmsnell/orgs","repos_url":"https://api.github.com/users/dmsnell/repos","events_url":"https://api.github.com/users/dmsnell/events{/privacy}","received_events_url":"https://api.github.com/users/dmsnell/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Automattic/wpcom.js/labels/enhancement","name":"enhancement","color":"84b6eb"},{"url":"https://api.github.com/repos/Automattic/wpcom.js/labels/[Status]%20Needs%20Review","name":"[Status] Needs Review","color":"fbca04"}],"state":"open","locked":false,"assignee":{"login":"retrofox","id":77539,"avatar_url":"https://avatars.githubusercontent.com/u/77539?v=3","gravatar_id":"","url":"https://api.github.com/users/retrofox","html_url":"https://github.com/retrofox","followers_url":"https://api.github.com/users/retrofox/followers","following_url":"https://api.github.com/users/retrofox/following{/other_user}","gists_url":"https://api.github.com/users/retrofox/gists{/gist_id}","starred_url":"https://api.github.com/users/retrofox/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/retrofox/subscriptions","organizations_url":"https://api.github.com/users/retrofox/orgs","repos_url":"https://api.github.com/users/retrofox/repos","events_url":"https://api.github.com/users/retrofox/events{/privacy}","received_events_url":"https://api.github.com/users/retrofox/received_events","type":"User","site_admin":false},"milestone":null,"comments":2,"created_at":"2015-09-09T09:50:27Z","updated_at":"2015-10-02T23:41:54Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Automattic/wpcom.js/pulls/117","html_url":"https://github.com/Automattic/wpcom.js/pull/117","diff_url":"https://github.com/Automattic/wpcom.js/pull/117.diff","patch_url":"https://github.com/Automattic/wpcom.js/pull/117.patch"},"body":"This patch changes the way the `wpcom.js` library is generated and built\r\nas a library by incorporating a **webpack**-based build system.\r\n\r\nPreviously, when `wpcom.js` was imported into another project, the code\r\nthat was hand-written was what made it into the dependent project.\r\nPrevious coding style corresponded somewhat with this paradigm: skip\r\nwhitespace to save bytes.\r\n\r\nNow, webpack is used to bundle up all of the constituent code, run it\r\nthrough a processor, and spit out the final and single file. This opens\r\nup new possibilities for the project including but not limited to:\r\n\r\n - Significant size reduction due to the way **webpack** optimizes and\r\n   minifies the output code. For example, the previous standalone code\r\n   was produced with **browserify** and was still a single file, but\r\n   that file was around 100 KB. The new bundle produced by **webpack**\r\n   is only 17 KB.\r\n\r\n - Function stripping: As a demonstration, for the standalone product I\r\n   have imported a plugin into **webpack** that strips out calls to\r\n   `debug`, `console.log`, and `console.warn`. This can be helpful for\r\n   making a general-release build without the development hooks.\r\n\r\n - ES6 running natively in the library! The output bundle ends up\r\n   pulling in a core-js shim, but we can use any ES6 functionality that\r\n   might want, including Promises, spread/rest operators, template\r\n   strings, destructuring, fat-arrow functions, and more.\r\n\r\n### Major changes\r\n\r\n - Version bump from 4.7.0 to 4.7.1 to reflect the fact that the\r\n   development and build system are completely new.\r\n\r\n - Updated `package.json` file with all required development\r\n   dependencies.\r\n\r\n - Developers no longer mess with `index.js` in the root project\r\n   directory. Instead, they should work in `wpcom.js`. The reason for\r\n   this is that when `wpcom.js` gets included into another project, it's\r\n   the `index.js` file that loads. Therefore, I chose to load in the\r\n   processed and bundled version instead of the human-formatted one.\r\n\r\n### Special notes\r\n\r\n - The `webpack.config.js` and `webpack.config.dist.js` files are\r\n   related. The `dist` file simply extends the base configuration to\r\n   produce something like what **browserify** used to create. While the\r\n   base configuration is set to create a `commonjs2` module, the `dist`\r\n   bundle will still remain in the `UMD` format. Console logging has\r\n   also been removed from the standalone version.\r\n\r\n   Ironically, these files won't work with ES6 syntax, so I have\r\n   included the **babel** transform into the `dist` config so I can use\r\n   `Object.assign()`.\r\n\r\n - It's important that we explicitly tell **webpack** which imported\r\n   modules are external libraries otherwise it will try to merge them in\r\n   and then we lose proper naming conventions and things break.\r\n\r\n - Before committing I tried testing with both the standalone and base\r\n   bundles. You can try this by editing `test/util.js` and changing the\r\n   top import statement to specify the exact file you want.\r\n\r\n### Questions\r\n\r\n - Is there a good reason to remove the console warnings in either the\r\n   standalone or the base build? A reason not to? I didn't think that\r\n   developers would appreciate the messages in the console, but maybe\r\n   they would want the `debug()` statements...\r\n\r\n - Is there much of a purpose in even having a `dist` standalone build anymore\r\n   since the root `index.js` is now a processed bundle? Of course, we don't have\r\n   to replace `index.js` from what it was, but I think this makes integration into\r\n   other projects better because they won't get the code bloat and they won't run\r\n   into issues with ES6 syntax.\r\n\r\n - We can build source maps for these files but I didn't in this commit. Do we want\r\n   them? I wouldn't see why we wouldn't, but since they didn't already exists I didn't\r\n   change it.\r\n\r\ncc: @retrofox @TooTallNate "},"comment":{"url":"https://api.github.com/repos/Automattic/wpcom.js/issues/comments/145184095","html_url":"https://github.com/Automattic/wpcom.js/pull/117#issuecomment-145184095","issue_url":"https://api.github.com/repos/Automattic/wpcom.js/issues/117","id":145184095,"user":{"login":"dmsnell","id":5431237,"avatar_url":"https://avatars.githubusercontent.com/u/5431237?v=3","gravatar_id":"","url":"https://api.github.com/users/dmsnell","html_url":"https://github.com/dmsnell","followers_url":"https://api.github.com/users/dmsnell/followers","following_url":"https://api.github.com/users/dmsnell/following{/other_user}","gists_url":"https://api.github.com/users/dmsnell/gists{/gist_id}","starred_url":"https://api.github.com/users/dmsnell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dmsnell/subscriptions","organizations_url":"https://api.github.com/users/dmsnell/orgs","repos_url":"https://api.github.com/users/dmsnell/repos","events_url":"https://api.github.com/users/dmsnell/events{/privacy}","received_events_url":"https://api.github.com/users/dmsnell/received_events","type":"User","site_admin":false},"created_at":"2015-10-02T23:41:54Z","updated_at":"2015-10-02T23:41:54Z","body":"@aduth + @retrofox \r\n\r\nAfter lots of stewing and testing, I have decided to release this in the\r\nfollowing manner:\r\n\r\n\t- All production files are built into the `dist/` directory\r\n\t- The node file is `index.js`\r\n\t- The browser file is `wpcom.js`\r\n\t- Both files are minified and have source-maps included.\r\n\t- The node version depends on the `npm` dependencies\r\n\t- The browser version only depends on the ES6 shims, such as Babel's\r\n\t  polyfill or `core.js`.\r\n\r\nTo test the browser version I created an HTML file just like in\r\n`Readme.md` and included the minified `wpcom.js`. First, however, I\r\nintroduced a fatal error in the library and rebuilt the release files.\r\nWhen the Exception appeared in my browser, I was able to click on it in\r\nChrome's DevTools and see the original source code via the source maps.\r\n\r\nI believe that this should be sufficient for our purposes here in that\r\nothers are still welcome to use this without node and with the source\r\nmap and without requiring a huge file.\r\n\r\n\t- Minified node build (no libraries included) : 16 KB\r\n\t- Minified browser build (with libraries) : 38 KB"}}