SharePoint WebPart erstellen #1
Schritt1: man startet mit PowerShell
Windows PowerShell in Windows->WindowsPowerShell
Windows PowerShell
Dann erstellt man einen Projekt-Ordner wo man den Projekt-Code des WebParts speichern mรถchte
Windows PowerShell
PS C:\Users\RPopp> cd C:\_Daten\Desktop\VS_Projects\Sharepoint
|
Dann startet man mit Yeoman generator die Installation
yo @microsoft/sharepoint |
Dann kommen die Installations-Schritte fรผr das WebPart
Let's create a new SharePoint solution. ? What is your solution name? DemoWebPart01
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Create a subfolder with solution name Found npm version 6.9.0
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? Yes
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
? Which type of client-side component to create? WebPart Add new Web part to solution demo-web-part-01.
? What is your Web part name? DemoWebPart01
? What is your Web part description? Demo eines SharePoint WebParts
? Which framework would you like to use? React |
Bei Which type of client-side componten to create
Wรคhlt man WebPart
Auch Extension und Library sind interessant, kommen aber spรคter vor
Unter Web part name gibt man den Namen an, welcher dann in SharePoint erscheint, und wie die Code-Klasse heiรt
Beim Framework kann man auswรคhlen zwischen
No JavaScript framework
React
Knockout
Hier React verwenden
PS C:\Users\RPopp> cd C:\_Daten\Desktop\VS_Projects\Sharepoint PS C:\_Daten\Desktop\VS_Projects\Sharepoint> yo @microsoft/sharepoint
Update available: 3.1.1 (current: 3.1.0) โ Run npm install -g yo to update. โ
Welcome to the | SharePoint Client-side | Solution Generator |
Let's create a new SharePoint solution. ? What is your solution name? DemoWebPart01 ? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest) ? Where do you want to place the files? Create a subfolder with solution name Found npm version 6.9.0 ? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? Yes ? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c omponents in the tenant? No ? Which type of client-side component to create? WebPart Add new Web part to solution demo-web-part-01. ? What is your Web part name? DemoWebPart01 ? What is your Web part description? Demo eines SharePoint WebParts ? Which framework would you like to use? React |
Final
Danach erstellt Yeoman ein Verzeichnis mit der Solution und den react Dateien.
Wichtig: man sieht hier auch die gulp-File und git-files
Installationsscript und Meldungen bei der Erstellen eines WebParts mit Yeoman Generator
Windows PowerShell Copyright (C) Microsoft Corporation. Alle Rechte vorbehalten. Lernen Sie das neue plattformรผbergreifende PowerShell kennen โ https://aka.ms/pscore6 PS C:\Users\RPopp> cd C:\_Daten\Desktop\VS_Projects\Sharepoint PS C:\_Daten\Desktop\VS_Projects\Sharepoint> yo @microsoft/sharepoint
_-----_ | | โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ |--(o)--| โ Update available: 3.1.1 (current: 3.1.0) โ `---------ยด โ Run npm install -g yo to update. โ ( _ยดU`_ ) โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ /___A___\ / | ~ | __'.___.'__ ยด ` |ยฐ ยด Y `
_-----_ | | .--------------------------. |--(o)--| | Welcome to the | `---------ยด | SharePoint Client-side | ( _ยดU`_ ) | Solution Generator | /___A___\ '--------------------------' | ~ | __'.___.'__ ยด ` |ยฐ ยด Y `
Let's create a new SharePoint solution. ? What is your solution name? DemoWebPart01 ? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest) ? Where do you want to place the files? Create a subfolder with solution name Found npm version 6.9.0 ? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? Yes ? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c omponents in the tenant? No ? Which type of client-side component to create? WebPart Add new Web part to solution demo-web-part-01. ? What is your Web part name? DemoWebPart01 ? What is your Web part description? Demo eines SharePoint WebParts ? Which framework would you like to use? React
create config\package-solution.json create package.json create config\config.json create config\serve.json create tsconfig.json create .vscode\extensions.json create .vscode\launch.json create .vscode\settings.json create config\copy-assets.json create config\deploy-azure-storage.json create config\write-manifests.json create src\index.ts create gulpfile.js create README.md create tslint.json create .editorconfig create .gitignore create src\webparts\demoWebPart01\components\IDemoWebPart01Props.ts create src\webparts\demoWebPart01\components\DemoWebPart01.module.scss create src\webparts\demoWebPart01\components\DemoWebPart01.tsx create src\webparts\demoWebPart01\DemoWebPart01WebPart.ts create src\webparts\demoWebPart01\loc\en-us.js create src\webparts\demoWebPart01\loc\mystrings.d.ts create src\webparts\demoWebPart01\DemoWebPart01WebPart.manifest.json create teams\9a78043c-6305-4415-9960-50c71605a348_outline.png create teams\9a78043c-6305-4415-9960-50c71605a348_color.png
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2. npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x. npm WARN deprecated es6-collections@0.5.6: not actively maintained anymore npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart() npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s). npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
> deasync@0.1.19 install C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\deasync > node ./build.js
`win32-x64-node-10` exists; testing Binary is fine; exiting
> node-sass@4.9.3 install C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\node-sass > node scripts/install.js
Cached binary found at C:\Users\RPopp\AppData\Roaming\npm-cache\node-sass\4.9.3\win32-x64-64_binding.node
> core-js@2.6.11 postinstall C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> uglifyjs-webpack-plugin@0.4.6 postinstall C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\uglifyjs-webpack-plugin > node lib/post_install.js
> node-sass@4.9.3 postinstall C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\node-sass > node scripts/build.js
Binary found at C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\node-sass\vendor\win32-x64-64\binding.node Testing binary Binary is fine npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself. npm WARN uglifyjs-webpack-plugin@0.4.6 requires a peer of webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1873 packages from 1111 contributors and audited 588641 packages in 52.773s found 2069 vulnerabilities (1852 low, 17 moderate, 200 high) run `npm audit fix` to fix them, or `npm audit` for details
_=+#####! ###########| .-----------------------------------------. ###/ (##|(@) | Congratulations! | ### ######| \ | Solution demo-web-part-01 is created. | ###/ /###| (@) | Run gulp serve to play with it! | ####### ##| / '-----------------------------------------' ### /##|(@) ###########| **=+####!
PS C:\_Daten\Desktop\VS_Projects\Sharepoint> gulp trust-dev-cert [13:37:12] Local gulp not found in C:\_Daten\Desktop\VS_Projects\Sharepoint [13:37:12] Try running: npm install gulp PS C:\_Daten\Desktop\VS_Projects\Sharepoint> gulp serve [13:37:42] Local gulp not found in C:\_Daten\Desktop\VS_Projects\Sharepoint [13:37:43] Try running: npm install gulp PS C:\_Daten\Desktop\VS_Projects\Sharepoint>
|