Saat ini saya sedang menguji stensil js. Untuk saat ini saya ingin menulis komponen stensil dan memasukkannya ke dalam proyek VUE/React. Situs web resmi stensil sudah menunjukkan cara mengintegrasikannya dalam kerangka kerja (https://stenciljs.com/docs/overview ). Tetapi mereka menganggap bahwa pustaka komponen stensil Anda sendiri telah diterbitkan ke npm.

Apakah ada cara untuk mengintegrasikan komponen stensil secara lokal ke dalam kerangka kerja untuk mengujinya tanpa memublikasikannya terlebih dahulu?

2
JonathanF 30 Maret 2020, 00:07

3 jawaban

Jawaban Terbaik

Ya, Anda dapat menggunakan npm-link untuk itu.

cd my-component-lib
npm link

cd ../my-app
npm link my-component-lib # or whatever you have named the project in package.json

Jika Anda memiliki masalah dengan itu (misalnya dengan jalur yang tidak diselesaikan dengan benar), Anda juga dapat mencoba mengemas paket Anda dan menginstal versi yang dikemas sebagai gantinya, menggunakan npm-pack:

cd my-component-lib
npm pack

cd ../my-app
npm install ../my-component-lib/my-component-lib-1.0.0.tgz

Menautkan lebih disukai karena perubahan pada pustaka komponen Anda akan segera terlihat (setelah membangun kembali), sedangkan dengan pengemasan Anda harus mengemas ulang dan menginstal ulang setelah setiap perubahan pada lib Anda.

6
Simon Hänisch 30 Maret 2020, 14:53

Untuk integrasi lokal, Anda dapat mereferensikan file esm.js di dalam folder www/build yang dapat digunakan di tag kepala proyek Vue/React.

Misalnya jika Anda memiliki 2 aplikasi di bawah ini

stencil-components - komponen stensil

stencil-react - contoh aplikasi reaksi yang akan menggunakan komponen.

Setelah Anda menjalankan stencil-components oleh npm run start itu akan di-host di 3333 (secara default). Menyertakan baris di bawah ini di kepalaindex.html dari stencil-react akan mengintegrasikan komponen dengan pemuatan ulang langsung saat perubahan.

<script type="module" src="http://localhost:3333/build/stencil-components.esm.js"></script>
0
kkakroo 1 Maret 2021, 13:29

Daripada memublikasikan atau mengemas paket, Anda dapat menggunakan pemetaan jalur TypeScript fitur.

Ini memungkinkan Anda untuk menulis pernyataan impor seperti yang Anda lakukan dengan paket yang diterbitkan, tetapi di balik layar TypeScript memetakan impor ke lokasi kode sumber yang diberikan.

Berikut adalah contoh tsconfig.json dengan pemetaan jalur yang ditambahkan ke opsi kompiler:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ui-components": ["libs/ui-components"],
      "ui-components/loader": ["libs/ui-components/dist/loader/index.cjs.js"],
      "ui-components-react": ["generated/ui-components-react/src/components.ts"]
    },
    ...

Seperti yang Anda lihat, ia memiliki 3 pemetaan: jalur ke komponen inti Stencil ui-components, jalur ke komponen React yang dihasilkan yang diekspos sebagai ui-components-react, serta loader yang dihasilkan ui-components/loader yang menyediakan jembatan antara elemen Kustom dan pembungkus React.

Saya membuat contoh kerja lengkap untuk Komponen Web Stencil dengan binding dan pembungkus yang dihasilkan untuk React yang datang tanpa perlu menerbitkan paket apa pun: Nx Stencil React.

Harap perhatikan bahwa jawaban ini didasarkan pada @stencil/core 1.14.0 atau di bawahnya. Versi mendatang mungkin memiliki pendekatan yang berbeda dalam menghasilkan integrasi kerangka kerja.

4
Mobiletainment 2 Juni 2020, 19:28