docs: Pin babel versions in getting-started and improve formatting (m…

…aterial-components#3665)
Lundalogik · Sep 27, 2018 · dcebd98 · dcebd98
1 parent 077b612
commit dcebd98
Showing 1 changed file with 46 additions and 37 deletions.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -68,11 +68,12 @@ npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader nod
 In order to demonstrate how webpack bundles our Sass, you’ll need an `index.html`. This HTML file needs to include CSS. The CSS is generated by sass-loader, which compiles Sass files into CSS. The CSS is extracted into a `.css` file by extract-loader. Create this simple “hello world” `index.html`:
 
 ```html
+<!DOCTYPE html>
 <html>
- <head>
-   <link rel="stylesheet" href="bundle.css">
- </head>
- <body>Hello World</body>
+  <head>
+    <link rel="stylesheet" href="bundle.css">
+  </head>
+  <body>Hello World</body>
 </html>
 ```
 
@@ -95,20 +96,22 @@ module.exports = [{
     filename: 'style-bundle.js',
   },
   module: {
-    rules: [{
-      test: /\.scss$/,
-      use: [
-        {
-          loader: 'file-loader',
-          options: {
-            name: 'bundle.css',
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'bundle.css',
+            },
           },
-        },
-        { loader: 'extract-loader' },
-        { loader: 'css-loader' },
-        { loader: 'sass-loader' },
-      ]
-    }]
+          { loader: 'extract-loader' },
+          { loader: 'css-loader' },
+          { loader: 'sass-loader' },
+        ]
+      }
+    ]
   },
 }];
 ```
@@ -181,7 +184,8 @@ Then add `postcss-loader`, using `autoprefixer` as a plugin:
 ```js
 { loader: 'extract-loader' },
 { loader: 'css-loader' },
-{ loader: 'postcss-loader',
+{
+  loader: 'postcss-loader',
   options: {
      plugins: () => [autoprefixer()]
   }
@@ -215,14 +219,15 @@ We need to configure webpack to bundle ES2015 JavaScript into standard JavaScrip
 - [babel-core](https://www.npmjs.com/package/babel-core)
 - [babel-loader](https://www.npmjs.com/package/babel-loader): Compiles JavaScript files using babel
 - [babel-preset-es2015](https://www.npmjs.com/package/babel-preset-es2015): Preset for compiling es2015
+- [babel-plugin-transform-object-assign](http://npmjs.org/package/babel-plugin-transform-object-assign), for IE 11 support
 
 You can install all of them by running this command:
 
 ```
-npm install --save-dev babel-core babel-loader babel-preset-es2015
+npm install --save-dev babel-core@7 babel-loader@6 babel-preset-es2015 babel-plugin-transform-object-assign
 ```
 
-In order to demonstrate how webpack bundles our JavaScript, you’ll need to update `index.html` to include JavaScript. The JavaScript file is generated by babel-loader, which compiles ES2015 files into JavaScript. Add this script tag to `index.html`:
+In order to demonstrate how webpack bundles our JavaScript, you’ll need to update `index.html` to include JavaScript. The JavaScript file is generated by babel-loader, which compiles ES2015 files into JavaScript. Add this script tag to `index.html` before the closing `</body>` tag:
 
 ```html
 <script src="bundle.js" async></script>
@@ -236,28 +241,29 @@ console.log('hello world');
 
 Then configure webpack to convert `app.js` into `bundle.js` by modifying the following properties in the `webpack.config.js` file:
 
-```js
-// Change entry to an array for both app.js and app.scss
-  entry: ['./app.scss', './app.js']
-
-// Change output.filename to be bundle.js
-  output: {
-    filename: 'bundle.js',
-  }
-
-// Add the babel-loader object to the rules array after the scss loader object
-...
+1. Change entry to an array containing both `app.scss` and `app.js`:
+   ```js
+   entry: ['./app.scss', './app.js']
+   ```
+2. Change `output.filename` to be `bundle.js`:
+   ```js
+   output: {
+     filename: 'bundle.js',
+   }
+   ```
+3. Add the `babel-loader` object to the rules array after the `scss-loader` object:
+   ```js
    {
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015'],
+       plugins: ['transform-object-assign']
      },
-   }]
-
-```
+   }
+   ```
 
-The final `webpack.config.js` file should look like:
+The final `webpack.config.js` file should look like this:
 
 ```js
 const autoprefixer = require('autoprefixer');
@@ -290,15 +296,18 @@ module.exports = {
             options: {
               includePaths: ['./node_modules'],
             },
-          }],
+          }
+        ],
       },
       {
         test: /\.js$/,
         loader: 'babel-loader',
         query: {
           presets: ['es2015'],
+          plugins: ['transform-object-assign']
         },
-      }],
+      }
+    ],
   },
 };
 ```