From Require.js to Webpack

Documents how the PayPal send money team moved from require.js to WebPack and some of the challenges

Transcript

1. From require.js to webpack
2. Why are you here? • Currently using webpack? • Currently using require.js? • Currently using browserify? • Not yet using any of these technologies?
4. AMD is great define([‘jquery’], function($) { $.get(‘/parties’).then(party); });
5. AMD is okay define([‘jquery’, ‘lodash’], function($, _) { $.get(‘/parties’).then(_.filter(onlyNiceParties)).then(party); });
6. THIS ALWAYS HAPPENS define([ ‘jquery’, ‘lodash’, ‘friends’, ‘chips’, ‘uber’, ‘music’, ‘records’, ’pillow’, ‘aGift’ ], function($, _, drinks, friends, cars, music, records, pillow, aGift) { $.get(‘/parties’).then(_.filter(party, goodOnes); });
7. browserify almost perfect
8. It didn't make sense to rewrite our entire app
9. webpack Just Worked • Moved build system over in a few hours • Supported all of AMD syntax without changing anything • Shims and aliases ported over without any headache • Build time was significantly shorter
10. Let me walk you through it...
11. Create a webpack.config.js file > touch webpack.config.js > vim webpack.config.js
12. Where does your code live? { resolve: { modulesDirectories: ["public/js"] // "baseUrl" } }
13. Migrate custom paths // require.js paths paths: { backbone: "lib/backbone-1.1.0", jquery: "lib/jquery-1.10.2", underscore: "lib/lodash.underscore-2.3.0", jqueryUI: "lib/jquery-ui.min" }
14. Paths become webpack aliases resolve: { alias: { backbone: "lib/backbone-1.1.0", jquery: "lib/jquery-1.10.2", underscore: "lib/lodash.underscore-2.3.0", jqueryUI: "lib/jquery-ui.min" } }
15. Migrate shims // require.js shim config shim: { "lib/jquery-1.10.2": { exports: "$" }, "lib/backbone-1.1.0": { deps: ["underscore", "jquery"], exports: "Backbone" } }
16. Backbone shim (webpack) loaders: [{ test: /backbone-1.1.0/, loaders: [ "imports?jquery,underscore", "exports?Backbone" ] }] Note: Many other shim examples can be found in the weppack wiki3 3 https:/ /github.com/webpack/docs/wiki/shimming-modules
17. Almost complete { modules: { loaders: [ /* shims, etc. */ ], }, resolve: { alias: { /* paths, etc. */ }, modulesDirectories: ["public/js"], } }
18. Preparing the Build { entry: "public/js/app.js", output: { path: "./public/js", filename: "[name].built.js" }, devtool: "source-map" }
19. // webpack.config.js module.exports = { entry: "./public/js/app.js", output: { path: "./public/js", filename: "[name].built.js" }, devtool: "source-map", modules: { loaders: [ /* shims, etc. */ ], }, resolve: { alias: { /* paths, etc. */ }, modulesDirectories: ["public/js"], } }
21. Update your Script tag Just replace the src and data-main: - <script data-main="config" src="vendor/require.js"></script> + <script src="public/js/main.built.js"></script>
22. !
23. Why do I want this? 1. Start using CJS syntax 2. Easy to add ES6 support 3. Let NPM manage your depdencies 4. Huge collection of plugins 5. Excellent debugging
24. 1. Start adding CommonJS modules
25. Remember this? define([ ‘jquery’, ‘lodash’, ‘friends’, ‘chips’, ‘uber’, ‘music’, ‘records’, ’pillow’, ‘aGift’ ], function($, _, drinks, friends, cars, music, records, pillow, aGift) { $.get(‘/parties’).then(_.filter(party, goodOnes); });
26. var $ = require("jquery"); module.exports = function() { $("body").html("This looks ways better!"); }
27. It just works
28. 2. Easy to add ES6 support
29. // webpack.config.js loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }] // .babelrc { presets: ["es2015"] }
30. // imports import $ from "jquery"; // template literals const text = ` multi-line strings are the best `; // export, let and arrow functions export let squares = [1, 2, 3].map(x => x * x);
32. 3. Let NPM manage dependencies
33. Update Config resolve: { alias: { - backbone: "lib/backbone-1.1.0", - jquery: "lib/jquery-1.10.2", - underscore: "lib/lodash.underscore-2.3.0", jqueryUI: "lib/jquery-ui.min" }, - modulesDirectories: ["public/js"] + modulesDirectories: ["public/js", "node_modules"] }
34. Install NPM Modules > npm install backbone jquery underscore • Easy to get updates to your libraries • Discourages re-inventing the wheel • Encourages sharing/modularity
35. NPM is the information superhighway of JavaScript
36. 4. Piles of cool plugins // webpack.config.js loaders: [{ // test: /\.js$/, // exclude: /node_modules/, // loader: "babel-loader" }, { test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ }]
39. 5. Excellent Debugging
40. webpack --display-modules
42. webpack --display-modules --verbose
44. Why the hate?
49. Tips to not hate webpack
50. Use a Config Validator
51. Get to Know Source Maps
54. Remember This • keep your config as simple as possible • avoid writing webpack-specific code • no need to get rid of gulp/grunt
55. Thank You @xjamundx
56. Appendix
57. webpack 2 • Coming soon • Adds "tree shaking" which will optimize ES6 modules • Replaces require.ensure() with System.import() syntax for dynamically requiring modules • Some changes to loader and resolve config
60. Async Requires // async require with known path works great require(["templates/a"], function(view) { // this will work }) // async require with a variable path has problem require(["templates/" + template], function(myFile) { // this will bundle all the things })
62. Smaller Dynamic Bundles switch (template) { case "a": require("templates/a", showView); break; case "b": require("templates/b", showView); break; // ... }
64. This one is 100x smaller!