Simplify your TypeScript SharePoint Developer life with WebPack Server

Dear fellows,

After my last post about developing on SharePoint with TypeScript, I’ve worked a lot, and shared a lot ; especially with Sébastien Levert, during the aOS Roatrip in South Africa.

I’ve also delivered my first SharePoint dev project without Visual Studio. I should write a blog post about PnP Provisioning Engine… This tool is awesome.

So, in my previous post, I used different tools to transpile, bundle and serve. This is over. Sébastien explained me that I should use WebPack Server, and I did it. This tool is awesome : it watches for your changes in TS files, it transpiles it when TS files are edited, bundles it and is also a web server !

It works perfectly with the TypeScript framework PnP-JS-Core !

Please note that you should NOT use WebPack Server in a production environnement, it’s only for development purpose.

How should you use it ?

  1. Create a new folder for your project
  2. Run
    npm init
  3. Install the following packages :
    npm install --save-dev webpack
    npm install --save-dev webpack-dev-server
    npm install --save-dev typescript
    npm install --save-dev ts-loader
    
  4. In the scripts of the « package.json », add this line :
    "start": "./node_modules/.bin/webpack-dev-server"

    Capture d’écran 2016-11-12 à 23.14.42.png
    Note that I will write a short blog post about this « start » command, and why you  should never install a package globally.

  5. Create a webpack.config.js file, and add this code :
    module.exports = {
     entry: 'PATH TO YOUR ENTRY',
     output: {
     filename: './app/dist/bundle.js'
     },
     resolve: {
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
     },
     module: {
     loaders: [
     { test: /\.ts$/, loader: 'ts-loader' }
     ]
     }
    }
    

    Capture d’écran 2016-11-12 à 23.17.21.png

  6. Don’t forget to add a TypeScript file to transpile and a html page which call your bundle.js
  7. In your Terminal (on a Mac), in your project directory, just run
     npm start 

    WebPack will do the job of transpiling your TS file, and WebPack Server will provide you your web app on the following address : http://localhost:8080/webpack-dev-server/

    Capture d’écran 2016-11-12 à 23.23.20.png

  8. If you edit your TypeScript file and save it, Webpack will re-transpile it, and re-bundle it !Et voilà ! If you have any question, please do not hesitate !
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s