Bir önceki makalemde SharePoint Framework (SPFx) v1.9.1 ile SharePoint Library Component ‘in release olduğundan bahsetmiştim. Peki SharePoint Library Component nedir? Şimdi buna bir göz atalım.
Sorun
SharePoint Library anlatmadan önce sorun tam olarak neydi? Hemen ona değineyim. Şimdi aşağıdaki gibi page içerisinde 2 tane WebPart ‘ımızın olduğunu ve her iki WebPart içerisinde “jquery” kullandığımızı düşünelim.
Bu kısımda gulp-bundle ederken her iki WebPart ‘ın kullanmış olduğu “jquery” ‘yi ekler. (WebPart bazında izole olması için) Custom kendi library ‘lerinizi yönetmek bu durumda daha zorlaşmakta ve istemediğimiz yani daha çok uğraştırıcı bir yönteme doğru geçişimizin başlamasına sebep oluyor.
Bu durum hem sayfanın yavaşlamasına hem de tekrar eden kod bloklarına sebep olmaktadır.
SPFx Library Component Oluşturma
SharePoint Library kullanmadan CDN üzerindende tüm işlemlerimizi yapabiliriz fakat gereksiz efor oluşturacağı için artık yeni yöntem üzerinden ilerlemekte fayda olduğunu düşünüyorum.
- İlk olarak projesinizi oluşturmak istediğiniz lokasyona gidiniz ve library component ‘inizi oluşturacağınız klasörü oluşturunuz.
md corporate-library- Aşağıdaki komut ile oluşturmuş olduğunuz klasör ‘e gidiniz.
cd corporate-library- Yeoman SharePoint Generator çalıştırmak için aşağıdaki komutu çalıştırınız.
yo @microsoft/sharepoint- “What is your solution name?” default olarak “example-library” yazmaktadır, “enter” tuşuna basıp kullanabilir ya da farklı bir solution name belirtebilirsiniz.
- “Which baseline packages do you want to target for your component(s)? (Use arrow keys)” son versiyon üzerinden devam ediniz.
- “Where do you want to place the files? (Use arrow keys)” oluşturulacak dosyaların hangi kısma atılmasını belirtiniz. “Use the current folder” deyip, var olan klasör üzerine oluşturmayı tercih ediniz.
- “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? (y/N)” tüm sitelerde otomatik olarak dağıtılmış bir şekilde kullanmak gerektiği için, “y” deyip, “enter” tuşuna basınız.
- “Which type of client-side component to create? (Use arrow keys)” client -side component olarak seçiminizi “Library” olarak yapınız.
- Sonraki parametreler library component için gerekli bilgilerdir:
- “Add new Library to solution?” Library ismini yazınız.
- “What is your Library description?” Library için açıklama giriniz.
Tüm parametrelerimizi girdikten sonra projeniz oluşacaktır.
Library için gerekli adımlarımızı tamamladık, şimdi local ve deploy sonrası neler yapmamız gerekiyor adım adım ilerleyelim.
Lokaliniz İçerisinde SPFx Library Nasıl Kullanılır?
- İlk olarak library oluşturduğunuz solution rool folder içerisine gidip aşağıdaki komutu çalıştırınız.
npm linkBu sayede lokalimizde diğer projelerimizde kullanmak üzere npm link ile hazırlamış olduk.
- Ardından kullanmak istediğiniz diğer projenin rool folder ‘ına gidip aşağıdaki scripti çalıştırınız.
npm link example-library- WebPart içerisine artık library import edebiliriz.
import * as ExampleLibrary from 'example-library';- Örnek olması adına kodun tamamını paylaşıyorum.
import * as React from 'react';
import styles from './HelloWorld.module.scss';
import { IHelloWorldProps } from './IHelloWorldProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as ExampleLibrary from 'example-library';
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
public render(): React.ReactElement<IHelloWorldProps> {
var myInstance = new ExampleLibrary.ExampleLibraryLibrary();
return(
<div className = { styles.helloWorld } >
<div className={styles.container}>
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>Welcome to SharePoint!</span>
<p className={styles.subTitle}>{myInstance.name()}</p>
<p className={styles.description}>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={styles.button}>
<span className={styles.label}>Learn more</span>
</a>
</div>
</div>
</div>
</div>
);
}
}
“gulp serve” dediğinizde library içerisine yer alan “name” function değerini döndürmektedir.
SPFx Library Deploy ve Kullanımı
- İlk olarak library solution içerisinde aşağıdaki kodu çalıştırarak paketi hazırlayalım.
gulp bundle --ship
gulp package-solution --ship- App catalog içerisine paketimizi upload ederek “Make this solution available to all sites in the organization” checkbox işaretleyelim. Bu sayede tüm sitelere yükleme işlemlerimizi yaptığımız için diğer projeler içerisinde kullanabilmekteyiz.
- Library ile ilgili işlemlerimizi tamamladıktan sonra WebPart solution içerisinde yer alan “package.json” açınız ve “dependencies” kısmına aşağıdaki gibi library solution ekleyiniz.
"dependencies": {
"example-library": "0.0.1",
"@microsoft/sp-core-library": "1.9.0",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33"
},- Son olarak WebPart için aşağıdaki kodu kullanarak paketleyip, app catalog içerisine yükleyiniz.
gulp bundle --ship
gulp package-solution --shipSonuç
Library component hayatımızı çok kolaylaştırmaktadır fakat bazı dikkat edilmesi gereken husus bulunmaktadır:
- Library içerisinde güncelleme yaptığınızda diğer projelerinizde library kullanıldığı için daha dikkat etmeniz gerekmektedir. Aksi taktirde deploy işleminden sonra bazı modülleriniz üzerinde çalışmama gibi sorunlar yaşanabilir. Bu yüzden dikkat etmeniz gerekmektedir.
- Bazı modülleriniz için versiyon bazında farklılar olabilir. Yani x modülünüz y.v1 versiyonu ile çalışırken, z modülünüz y.v2 projesi ile çalışması gerekebilir. Bu durum ise tek versiyon çıkmanızdan kaynaklanmaktadır. Bu durumda “shared-library@1.0.js” gibi bir çözüme başvurabilirsiniz.
Kısacası, Library component bir çok konuda işlemimizi kolaylaştırmaktadır. Sayfa içerisinde çok sayıda WebPart ‘ınız mevcut ise, library component olarak güncellemeniz performans ve response time olarak fark ediyor olacaktır.
Okuduğunuz için teşekkür ederim. 🙂
