Skip to content

Toolchain

Overview

From classic to modern

Webpack

Prepare

Commands

Gulp

gulp dist

install npm package

npm install gulp-sequence --save-dev

add to gulpfile.js

if (process.argv.indexOf('dist') !== -1){
  process.argv.push('--ship');
}

const gulpSequence = require('gulp-sequence');

gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));

Deployment

NPM

package-lock.json

Optimization packages

Update packages

# check
npm outdated -g

# install
npm -g i npm-check

# interactive update of global packages
npm-check -u -g

# interactive update for a project you are working on
npm-check -u

# unistall package
npm uninstall -g <module>

Check package version

List global npm packages versions

npm list -g --depth 0

List detail global npm package versions from one package

npm view @microsoft/generator-sharepoint

PNPM

Package.json

Security

Installation

Update SPFx version

  • go into solution folder
  • search für "@micorosoft/sp-"
  • update all package (latest or version)
npm outdated
npm install package-name@latest --save
npm install package-name@version --save
gulp clean
gulp build

Test

gulp serve --nobrowser

Tips

Deployment

npm i
gulp clean
gulp build
gulp --ship
gulp package-solution --ship

Dependencies

npm install saves any specified packages into dependencies by default. Additionally, you can control where and how they get saved with some additional flags:

-P, --save-prod: Package will appear in your dependencies. This is the default unless -D or -O are present.

-D, --save-dev: Package will appear in your devDependencies.

-O, --save-optional: Package will appear in your optionalDependencies.

Version Manger (nvm, npx)

// check version
node --version

// list installed versions of node (via nvm)
nvm ls

// To list available remote versions on Windows 10 you can type
nvm list available

// install a specific version of node
nvm install 10.22.1
nvm install 8.17.0

nvm list

// switch version of node
nvm use 10.22.1

# for spfx deployment

npm i -g gulp
npm i -g yo
npm i -g @microsoft/generator-sharepoint
gulp trust-dev-cert

# for spfx advanced
npm i -g @pnp/office365-cli
npm i -g spfx-fast-serve
npm i -g @pnp/generator-spfx
npm i -g npm-check

ESLint