Chapter 7 ■ Modularization and WebpaCk
Listing 7-39. src/.eslintrc: Final client .eslintrc {
"env": {
"browser": true },
"rules": {
"no-alert": ["off"]
} }
Finally, for convenience of running ESLint using npm without having to remember all the options that it takes, let’s create a command under scripts in package.json that can be used to run the linter. This change is shown in Listing 7-40.
Listing 7-40. package.json: New Command for Running Lint ...
"scripts": { ...
"lint": "eslint --ext js,jsx src server webpack.config.js", "test": "echo \"Error: no test specified\" && exit 1"
}, ...
Chapter 7 ■ Modularization and WebpaCk
148
Answers to Exercises
Exercise: Transform and Bundle
1. No, webpack does not rebuild if you save a file with just an extra space. This is because the preprocessing or loader stage produces a normalized JavaScript, which is no different from the original. A rebundling is triggered only if the normalized script is different.
2. As of now, we have only one page to display, the Issue List.
Going forward, we’ll have other pages to render, for example, a page to edit the issue, maybe another to list all users, yet another to show one’s profile information, and so on. The file App.jsx was created keeping in mind different page components that could come up in the future.
3. Not using the default keyword has the effect of exporting the class as a property (rather than itself) of the object that’s exported. In the import statement, you would have to do this:
import { IssueList } from ‘./IssueList.jsx’;
Note the curly braces around the LHS. This allows multiple objects to be exported from a single file, each object you want from the import being separated by a comma. If there’s only one object being exported, you just default it, so that the curly braces are not required.
Exercise: Hot Module Replacement
1. There are many logs in the browser’s console that tell you that HMR is being invoked. Further, even when the console log window setting “preserve logs across browser requests” is off, you will find that the logs still persist, which means there was no new browser refresh.
If you look at the network requests, you will find that for a browser refresh, requests are made to all of the assets. Take a look at the sizes of these assets. Typically, vendor.bundle.js is not fetched again when client-side code changes (it would return a 304 response), but app.bundle.js will be reloaded.
But when HMR succeeds, you will see that the entire assets are not fetched; instead, incremental files, much smaller than app.bundle.js, are being transferred.
Chapter 7 ■ Modularization and WebpaCk 2. The main objective of webpack-dev-server is to prevent
inadvertent errors, such as those caused by refreshing the browser even before a bundle operation has completed. This can be damaging because you may think you have changed the code, but the new code is not what is running on the browser. HMR is just icing on the cake. I would use webpack- dev-server even if it did not support HMR.
Exercise: Server-Side ES2015
1. Native support for any JavaScript feature is expected to be faster than the transpiled code, which uses ES5 constructs.
On the client side, you cannot predict which browsers will be used by the end user, so you must use the least common denominator. Whereas, on the server side, the node version that you are going to use in production is predictable and under your control, and you can indeed take advantage of this.
2. The static compilation alternative requires you to start up two consoles just for the server and ensure that they are functioning OK, whereas the dynamic alternative needs only one console. Although we combined them into one npm script, the output can be intermingled and it may not be easy to spot any errors.
When there are syntax errors in your server code, in the static compilation alternative, the compile step fails, but the server continues to run the old code. This can lead to confusion during development, if you are not monitoring the server compilation console. In the require hook method, the server crashes, and you will be forced to see what happened, because the application will stop functioning.
The static compilation method is faster than the require hook, especially when there are incremental changes to the server code.
Using the static compilation, you are confident that the production code is identical to the development code (require hook is not intended for production, so you have to run the statically compiled code). This removes at least that one variable while chasing bugs in production.
My recommendation is to use static compilation regularly and monitor the console. To me, the fact that the development and production environments are identical is worth this trade-off.
Chapter 7 ■ Modularization and WebpaCk
150
Exercise: ESLint
1. If you disabled that specific rule, the length of the line would have exceeded 100 characters, triggering an error on another rule that restricts the maximum line length. We took a shortcut and disabled all linting for the line, knowing that we’ll revisit this class soon.
An alternative is to disable both rules like this:
// eslint-disable-line max-len,react/prefer-stateless-function