{"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":17,"created_at":"2015-09-09T09:50:27Z","updated_at":"2015-11-04T18:56:06Z","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/153829818","html_url":"https://github.com/Automattic/wpcom.js/pull/117#issuecomment-153829818","issue_url":"https://api.github.com/repos/Automattic/wpcom.js/issues/117","id":153829818,"user":{"login":"aduth","id":1779930,"avatar_url":"https://avatars.githubusercontent.com/u/1779930?v=3","gravatar_id":"","url":"https://api.github.com/users/aduth","html_url":"https://github.com/aduth","followers_url":"https://api.github.com/users/aduth/followers","following_url":"https://api.github.com/users/aduth/following{/other_user}","gists_url":"https://api.github.com/users/aduth/gists{/gist_id}","starred_url":"https://api.github.com/users/aduth/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aduth/subscriptions","organizations_url":"https://api.github.com/users/aduth/orgs","repos_url":"https://api.github.com/users/aduth/repos","events_url":"https://api.github.com/users/aduth/events{/privacy}","received_events_url":"https://api.github.com/users/aduth/received_events","type":"User","site_admin":false},"created_at":"2015-11-04T18:56:06Z","updated_at":"2015-11-04T18:56:06Z","body":">>I see the following in my browser console when loading the dist copy: I'm `fs` modules\r\n>\r\n>Still need to look into and address this.\r\n\r\nCould it be the addition of the `fs` module to dependencies here? Do we need that? How about specifying `fs: 'empty'` in the Webpack config `node` option?"}}