►
Description
Latest updates around the PnP/SPFx Yeoman Generator with additional capabilities on Jest, Webpack analyzer, style linter and more. The demo taken from the SharePoint Framework Special Interest Group recording from 17th of January 2019.
Presenter - Stefan Bauer (n8d) - @StfBauer
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
Generator
1.6
so
generous,
with
EMP
generator
generator,
FPS,
1.6
and
I
started
right
before
the
call
the
PR
for
1.6.
So
after
the
meeting
I
will
publish
it
and
all
the
test
has
been
tassles.
Nothing
is
in
the
way,
but
now
so
what?
Actually?
When
you,
when
you
start
a
new
project
now,
let
me
go
over
here
to
start
a
new
project.
I'm
gonna
get
to
screen
a
little
bigger,
so
yo
at
PMP.
Slash
has
two
effects,
then,
in
this
case
it
still
states
it's
that
that
was
free.
A
But
it's
not
that
because
that's
my
version
that
I
have
installed
and
I
haven't
published
it.
Yet
so
you
have
the
handlebars
web
generator.
You
have.
The
Gucci
has
generated
angular
elements
still
in
here.
Yes,
now
the
enhanced
SP
FX
generators,
the
react.js,
knockout
and
no
framework,
but
you
don't
have
the
default
ones
anymore,
because
I
will
explain
it
in
a
bit
why
these
enhanced
VFX
generators
in
here
and
now.
A
Let
me
try
I'll
start
a
new
react
chest
projects,
so
we
have
now
the
same
thing
that
was
in
the
previous
version
as
well,
so
you
can
directly.
If
you
jQuery,
you
can
directly
include
team
PJs,
the
property
controls
you
can
actually
use
in
all
the
projects
that
you
can
create,
assess
the
effects,
but
the
reusable
controls
are
just
specific
for
the
reaction
projects,
the
property
controls,
because
the
sidebar
that
you
actually
get
in
the
SP
FX
project
and
on
your
web
part
is
actually
already
react,
just
control,
so
you
can
uncheck
them
in
there.
A
So
jQuery,
which
version
do
you
want
to
have
3.0?
And
then
you
get
some
new
options
for
wetting
your
code.
So
one
thing
is
the
epic
pendulum
vilasa
that
helps
you
to
identify
where
you
have
small
libraries,
big
libraries
in
there
that
actually
blow
up
your
your
package,
and
you
also
have
from
here
a
new
option
which
is
a
styling
that
it
helps
you
to
linear
or
evaluate
if
everything
is
correct,
syntax,
because
correcting
your
CSS
styles
and
for
react.js
projects.
A
What
we
also
have
in
year,
we
already
create
in
there
a
test
framework
which
is
chess,
which
is
heavily
used
by
a
Leo's
truth
or
Andrew.
Connell,
actually
wrote
a
blog
post
about
this,
and
we
directly
include
this
in
any
new
broad.
Every
new
project
that
you
create
so
now
with
this
is
the
default
reactors
Beck's
generator
that
you
have
in
here.
So
it
asks
you
for
solution,
name
in
my
case,
I
just
use
the
demo
160
I
want
to
build
a
solution
for
the
shipment
online
and
the
latest
version.
A
A
A
Actually
what
you
need
to
have
when
you
use
chests
you
always
need
to
target
to
a
specific
reactor
version,
and
this
is
now
targeted
to
react
to
16,
because
I
set
in
my
project,
I
want
to
create
a
new
ship,
an
online
project
that
has
the
react,
16
library
included,
and
so
you
get
everything
ready
to
test
it
for
the
chest
testing.
Actually,
you
have
to
deploy
some
additional
files
that
we
also
do
for
you.
A
A
A
A
So
in
line
614
we
actually
have
a
zero
and
with
px
we
can
remove
the
savely
because
we
actually
when,
when
you
have
a
serial
unit,
you
don't
need
to
have
a
unit
next
to
it,
and
it
saves
some
coding
us
on
some
bits
and
in
your
code,
in
your
statical
and
now
we
do
it
again.
So
we
have
an
until
you
see
what
we
have
in
here.
So
we
have
here.
A
A
A
Once
we
saved
our
file
again,
we
actually
have
novice
talent,
a
message
here,
so
it
lands
in
our
code
and
everything
is,
is
fine
now
from
from
this
perspective,
so
we
actually
fixed
all
the
issues
that
we
have
in
here.
Other
things,
for
example,
that
you
have
might
have
or
to
keep
your
scissors
consistent
when
you
have
something
like
this
color
hash,
FFF
save.
It
then
says:
hey
Eden
in
the
in
the
config
based
configuration
is
defined
that
all
the
values
for
colors
should
have
only
lowercase
characters.
A
Okay
and
there
there
are
a
lot
of
definitions
on
this
you'll
find
more
on
this
on
the
stallion
talaiya
website.
So
actually
they
have
160
built
rules
that
you
can
check
and
support
for
different
frameworks
and
defines
so
support
for
different
favors.
How
you
write
your
CSS
that
you
can
include
afterwards,
but
the
stallion.
Therefore,
the
SPF
X
is
already
included
in
here
so
for
the
web
pack
bundle
analysis
of
what
I
need
to
move
over
to
the
temp
folder
and
what
we
have
in
here
there's
a
new
folder.
A
That
only
appears
when
I
have
the
back
panel
analyzer.
So
we
directly
write
the
result
was
ever
built
to
the
temp
folder
in
the
stats
folder.
So
we
have
in
here
that
demo,
16
dot
stats,
dot
HTML
and
when
I
open
up
my
workbench
and
say
in
here,
let's,
instead
of
temps,
that's
when
it
was
famous
160,
dot,
HTML
I
guess
wrong:
no
stats,
dot,
HTML!
That's
what
I'm
missing.
A
You
see
all
the
results
from
so
the
index
I
index.
The
chairs
actually
has
certain
port
23,
kilobytes
4.6
kilowatts
is
what
this
javascript
file
takes:
the
CSS
loader
2.1,
and
if
you
have
things
like
moment,
chairs
or
jquery
included
in
here,
you
will
also
see
this
in
the
result,
and
you
can
then
identify
these
these
these
pieces
in
your
code
and
and
try
to
optimize
them
before
you
actually
ship
your
package
yeah
this.
A
A
When
you
create
a
reaction
project,
then
you
already
get
a
gout
file
from
your
from
from
the
default
generator
and
we
actually
need
to
inject
our
code
for
a
backpacker
bundle
analyzer
for
styling
theme
directly
in
the
inside
the
gal
file
and
what
we
actually
did
in
the
in
the
yeoman
generator.
We
have
here
in
the
app
with
just
the
main
generator.
Then
we
have
the
templates
as
well.
The
template
files
that
we
deploy
our
and
we
have
here
styling
thing,
which
is
actually
is
just
the
gulp
task-
that
we
inject
in
our
gap
file.
A
Just
for
the
styling
thing.
We
have
to
be
epic
bundle
analyzer,
which
is
only
the
code
that
we
inject
in
the
gal
file.
In
case,
you
selected
the
web.xml
analyzer,
and
this
is
the
actual
default
gal
file
and
what
we
inject
in
here.
So
we
have
here
our
checks
when
you
actually
select
that
the
pnp
vetting
and
select
advaithic
panel
analyzer,
then
it
pushes
it
to
the
guard
task
and
down
here.
A
So
basically,
what
you
chosen
from
the
from
the
project,
generator
creation-
would
be
automatically
injected
here
at
the
custom
tasks
are
those
deaths
that
then
will
be
added
later.
For
example,
when
you,
when
you
select
handlebars,
template
blue
chairs
template
these
will
be
automatically
injected
also
in
the
scalp
file
and
enter
them
in
your
projects
from
gout
from
in
here.
So
in
case,
you
have
yeah.
A
In
so
in
case,
if
you
have
some
gout
tests
that
think
of
beneficial
for
all
the
people,
please,
you
can
share
those
with
us
for
examples
and
DevOps
tasks
or
whatever
you
think
or
using
your
development,
and
you
think
it's
a
valid
option
for
the
generator.
So
we
are
really
willing
to
see
what
what
with?
What
are
you
actually
working
for?
And
if
you
want
to
have
this,
then
please
open
up
a
get
up
issue
and
then
we
can
check.
How
are
we
actually
integrators
in
in
the
generator
pretty
easily
and
because.
A
B
A
really
cool
stuff
in
the
future
as
well
now
the
stuff
were
to
show
it
related
on
the
the
yeoman
generator
inside
of
the
yeoman
generator
just
to
be
clear
on
the
on
the
new
people,
because
to
squat
only
quite
again
an
amount
of
new
people
in
the
here,
without
any
previous
knowledge,
on
SPF
X.
This
isn't
what
you
need
to
actually
know
the
stuff.
What
Stephan
showed
inside
of
the
SPF
X
BMP
generator
is
for
those
people
who
actually
want
to
contribute
on
the
generator,
and
that
will
be
a
relatively
small
amount
of
people.
B
A
B
The
number
one
thing
when
I
think
people
should
be
getting
out
of
this,
that
the
BMP
SPF
X
generator.
First
of
all,
it
extends
dollar
of
the
Box
generator.
It
extends
the
the
engineering
provider
generator
100%,
supported
by
sharepoint
engineering,
which
is
on
Microsoft's
one,
and
this
one
extends
not
by
having
then
an
open
source
layer
on
top
of
it
and
using
the
Stephan's
generator
and
not
Stephan's,
generate
the
community
generator.
B
Let's
call
it
community
generator
Stephan
has
been
leading
the
effort,
and
you
can
actually
then
get
more
ready
to
use
development
experience
in
the
solutions
now
Stephan.
If
you
don't
mind
for
those
who
are
not
yet
quite
familiar
with
this
one,
can
you
actually
execute
the
generator
just
in
a
console
application
and
let's
say
that
slightly
one
more
time,
slowly,
what
are
the
different
options
which
are
available?
Yes,
we're,
okay,.
A
B
B
A
B
So,
just
to
be
clear
once
again,
so
this
one,
the
at
P
and
P,
must
be
FX.
It's
not
an
open-source
version
of
the
art
of
the
boss.
Tournament
generator.
This
one
has
a
dependence
on
that.
The
whole
point
of
this
one
is
that
now
we
as
a
community
can
individually
extent
the
generator
what
we
are
using.
B
So
basically,
what
you
can
do
is
always
use
this
as
your
de
facto
generator
when
it
can
act,
produce
your
solutions,
because
this
one
actually
is
using
a
direct
box
generator
under
the
hood,
but
it's
offering
decorated
additional
capabilities
on
top
of
it.
So
and,
like
said,
I
think
the
number
one
of
us
are
the
big
thing
here,
which
people
are
always
asking.
Well,
it's
based
on
1.71,
which
is
an
important
thing
and
angular
element
support
is
here,
so
you
can
actually
it
creates
nicely
angular
element
solution.
B
So
I
can
help
tone
contributing
on
that
one
and
there's
enhanced
SPF,
X,
knockout
and
and
JavaScript
projects,
and
that
means,
if
you
do
to
enhance
react.js,
which
probably
quite
widely
used
as
well.
It
is
using
the
out
of
the
box
once
again
out
of
the
box
general
right
under
the
hood,
but
if
you
select
that
one
Stefan
these
options
are
the
decorated
ones
so,
basically
now
you're
able
to
then
add
additional
projects
and
dependencies
automatically
to
the
solution
as
a
default
starting
point.
B
So
why
wouldn't
you
use
BMP
appropriate
controls
because
they
actually
really
reduce
the
development
costs
for
your
team.
It
makes
a
lot
of
sense
to
use
them
or
the
BMP
reusable
controls
if
you're
using
a
react
based
component,
so
you
can
get
all
of
that
dependence
inside
of
the
solution
immediately
when
you
start
creating
the
solution
so
highly
beneficial
cool,
sorry
Stefan.
That
was
tough
for
a
recapping
the
value
of
the
of
the
solution
for
those
who
are
not
necessarily
super
familiar
one
more
time.