Pnpjs: Javascript based implementation guide like old

Created on 19 Mar 2019  路  2Comments  路  Source: pnp/pnpjs

Category

  • [ ] Documentation gap/issue

Just like the old one you have not provided any documentation on javascript implementaion on sharepoint, Consider below scenarios.

  1. User want to put the code in script editor webpart, simple guide to add pnpjs file and call.

Why you guys have taken it from sharepoint/pnpjs, to increase the tension for users or to make the good working things worse. Check the below links people have given up on you.

https://sharepoint.stackexchange.com/questions/246264/pnpjs-with-on-prem-sharepoint

documentation answered question

Most helpful comment

Can't see any connection of your question and provided link where Node.js usage is discussed.

In getting started section there is a documentation on how to install and use the library within commonly used scenarios.

The antipattern usage of placing raw JS on the page is not described to not encourage anyone to follow this route, really this is a nasty route. But there is a deployment section with CDN links and there is a bundle pnpjs.es5.umd.bundle.min.js which can be linked as an external dependency within Webpack configuration or placed to a classic page, when pnp root object appears. One should not forget about polyfills which are required for IE (this page, btw, contains the setup you're looking for, a sort of interpretation is bellow).

<script src="https://cdnjs.cloudflare.com/ajax/libs/pnp-pnpjs/1.3.0/pnpjs.es5.umd.bundle.min.js"></script>
<script>
function stuffisloaded() {
  pnp.sp.web.get().then(console.log).catch(console.log);
};
</script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?callback=stuffisloaded&features=es6,fetch,Map&flags=always,gated"></script>

Anyway it's a dangerous way to go with all the downsides of legacy JS approaches.
Even for dealing with legacy/classic SharePoint, I'd recommend investing into TypeScript and modern build toolchain. Not a shameless plug but a project link which was created specially for the case of classic SharePoint project and modern front-end development make easy, PnPjs is integrated and ready to use OOTB.

All 2 comments

Can't see any connection of your question and provided link where Node.js usage is discussed.

In getting started section there is a documentation on how to install and use the library within commonly used scenarios.

The antipattern usage of placing raw JS on the page is not described to not encourage anyone to follow this route, really this is a nasty route. But there is a deployment section with CDN links and there is a bundle pnpjs.es5.umd.bundle.min.js which can be linked as an external dependency within Webpack configuration or placed to a classic page, when pnp root object appears. One should not forget about polyfills which are required for IE (this page, btw, contains the setup you're looking for, a sort of interpretation is bellow).

<script src="https://cdnjs.cloudflare.com/ajax/libs/pnp-pnpjs/1.3.0/pnpjs.es5.umd.bundle.min.js"></script>
<script>
function stuffisloaded() {
  pnp.sp.web.get().then(console.log).catch(console.log);
};
</script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?callback=stuffisloaded&features=es6,fetch,Map&flags=always,gated"></script>

Anyway it's a dangerous way to go with all the downsides of legacy JS approaches.
Even for dealing with legacy/classic SharePoint, I'd recommend investing into TypeScript and modern build toolchain. Not a shameless plug but a project link which was created specially for the case of classic SharePoint project and modern front-end development make easy, PnPjs is integrated and ready to use OOTB.

Closing this as answered. Even for doing script editor work you would ideally create a bundle of all the code you need (or chunks to reduce network traffic) and link that bundle to your webpart. This can be done with webpack or rollup.

Was this page helpful?
0 / 5 - 0 ratings