using NotePad

ES 2015 Syntax

Lets introduce some ES 2015 syntax into the 'index.js' file.
Change the function declaration to the following which includes a 'fat arrow'.

window.onload = Start() => { 

Now IE 11 is only compatible with ES 2009 and will not support fat arrows out of the box.
To get around this problem we can install an additional webpack module that will convert these fat arrows into ES 2009 syntax.
Infact this webpack module will convert all ES 2015 features into ES 2009.

npm install --save-dev @babel/plugin-transform-arrow-functions 

This module will be added as a devDependency to the package.json file.
Check the 'package.json' file by dragging it into the Microsoft Edge browser.
You also need to tell Webpack to use this "plugin" when it transpiles the javascript code.
Add the 'options' element underneath 'babel-loader' to include this plugin, in the 'webpack.config.js' file.

    rules: [ 
        test: /.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
             plugins: ['@babel/plugin-transform-arrow-functions']
             presets: ['@babel/preset-env']

Execute the 2 commands again and refresh the browser.

Install Office-JS for debugging ??

Install the OfficeJS Webpack module
The '--save' switch will add this module as a Dependency in the package.json file.

npm install --save @microsoft/office-js 

© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrevNext