Editorial Pass: Incompatibilities Chapter

[lyzadanger]

Here is my first editorial pass for the incompatibilities content...I took into account the speaker-note alignment with this section so I hope you won't run into related woes...

/cc @gnarf

[lyzadanger]

Great feedback, @gnarf! I’m working on my book today but am more than happy to work through this tomorrow.

—Lyza

On Sep 28, 2016, at 10:12 AM, Mx Corey Frang notifications@github.com wrote:

@gnarf commented on this pull request.

😍 thanks so much! A lot more readable on the slides!

I had a couple of suggestions, feel free to take or leave em :)

In content/01-working-around-incompatibilities/content/01-resolving-require.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

• Absolute: js require('/home/me/file'); require('C:\\home\\me\\file'); + +??? +- Absolute I feel like if we are doing a reveal here, it might be nice to be like "Absolute, when you call require with an absolute path" as a speaker note.

In content/01-working-around-incompatibilities/content/01-resolving-require.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

• Relative: js require('./file'); require('../file'); + +??? +- Relative a path starting with .

In content/01-working-around-incompatibilities/content/01-resolving-require.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

• Module: js require('module'); require('module/file');

???

-Let's start off this section by talking about how webpack handles require.

-The first step is to figure out what type of request we are dealing with. If you are familiar with how node looks for modules, this should look very familiar.

-There are many ways you can configure how webpack searches for files to match these requests. +- Module when the required content does not start with /, . or a drive letter webpack treats it as a module

In content/01-working-around-incompatibilities/content/01-resolving-require.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

-??? +- Syntax: the $ signifies exact match instead of partial +- require('jquery/src/file'); // --> ERROR (because of $) +- require('jquery'); // --> 'vendor/jquery/src/file' // --> '/full/path/to/vendor/jquery-3.1.0

In content/01-working-around-incompatibilities/content/01-resolving-require.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

 module.exports = {
   resolve: {
     alias: {
-      jquery$: path.resolve('./vendor/jquery'),
-      // the $ signifies "exact match" instead of "partial" which allows:
-      // require('jquery/src/file');
-      // using "jquery$" as an alias - this IS AN ERROR
-      // but with "jquery" you'd get
-      // vendor/jquery/src/file
+      jquery$: path.resolve('./vendor/jquery') // `$` indicates "exact" match
maybe use ./vendor/jquery-3.1.0 the file we had in our exercise?

In content/01-working-around-incompatibilities/content/01-resolving-require.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

-### Still have a "module" path??? Hunt for it! -- Hunting order:

• 1. root
• 2. modulesDirectories
• 3. fallback +# Resolve configuration: There's More! + +No dice? Keep hunting, using more resolve config properties: "No alias found for the module?"

In content/01-working-around-incompatibilities/content/05-imports-loader.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

@@ -27,13 +33,19 @@ require('imports-loader?define=>undefined!./broken-amd.js'); require('imports-loader?require=>undefined!./broken-common.js');

+- Syntax:

• • foo=bar: Within target file, set foo to the result of require('bar') let's avoid foo and bar?

In content/01-working-around-incompatibilities/content/05-imports-loader.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

@@ -27,13 +33,19 @@ require('imports-loader?define=>undefined!./broken-amd.js'); require('imports-loader?require=>undefined!./broken-common.js');

+- Syntax:

• • foo=bar: Within target file, set foo to the result of require('bar')
• • foo=>undefined: Within target file, set foo to any JavaScript value (undefined here) let's try using the thing we example with, require=>undefined ?

In content/01-working-around-incompatibilities/content/05-imports-loader.md https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971:

@@ -61,11 +88,3 @@ Similar to, but way better than: } }

-
-???
I have a typo in the code block above this, the loader should be imports-loader not provide-plugin

Also, I think we should add some speaker notes to this example explaining why..

Imports loader will inject these 3 vars in every js file we load, provide plugin injects it in the output bundle itself, a lot less code!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bocoup/webpack-workshop/pull/50#pullrequestreview-1938971, or mute the thread https://github.com/notifications/unsubscribe-auth/AAa2ix-AaiqEJQsAtiis7A3_Z22lP_wiks5qunXAgaJpZM4KIJm8.