1. NPM Install

npm install sp-pnp-js --save

2. Import to TypeScript file

import pnp from "sp-pnp-js";

3. Begin using the API

pnp.sp.web.get().then(...)

You can also import parts of the library into your project to use them directly:

import { objectIsNull } from "sp-pnp-js/lib/utils/args";
let b = objectIsNull(null); //true

Please see the sample visual studio project for an example using requirejs.

1. Download pnp.js

2. Upload pnp.js to your site. In this example we will upload it to a library called "Style Library"

3. Add a new file called pnptest.html to the same library with the following content.

<script type="text/javascript" src="{PathToYourSite}/Style%20Library/pnp.js"></script>
<script type="text/javascript" src="{PathToYourSite}/Style%20Library/pnptest.js"></script>

<div id="main"></div>

4. Add a new file called pnptest.js to the same library with the following content:

$pnp.sp.web.select("Title").get()
.then(function(data){
   document.getElementById("main").innerText=data.Title;
})   
.catch(function(data){  
   document.getElementById("main").innerText=data;
});

5. Add a Content Editor WebPart to a page within the site

6. ** Set the url of the content editor webpart to "{PathToYourSite}/Style%20Library/pnptest.html"

7. Open the page in chrome, and the webpart will display the Title of your site.

#Polyfill

The page will throw an error if you view it in Internet Explorer at this point because Internet Explorer does not support the fetch protocol or es6 promises, both of which are used by pnp.js.

To remedy this we must include polyfills for these.

8. Download the es6-promises polyfill from https://github.com/stefanpenner/es6-promise and upload it to your style library.

9. Download the fetch polyfill from https://github.com/github/fetch and upload it to your style library.

10. Add the following two lines to the beginning of pnptest.html:

<script type="text/javascript" src="{PathToYourSite}/Style%20Library/es6-promise.min.js"></script>
<script type="text/javascript" src="{PathToYourSite}/Style%20Library/fetch.js"></script>

Now if you open the page in Internet Explorer, the webpart will display the site Title.