Kerangka kerja komponen, apa pun namanya, tidak akan pernah meninggalkan area penggunaan khusus khusus, kecuali komunitas membuat komponen publik untuk mereka yang dapat dengan mudah disematkan ke dalam proyek Anda.
Selama satu setengah tahun terakhir, banyak komponen berbeda telah dibuat untuk kerangka Svelte, yang dapat ditemukan di NPM , GitHub atau daftar resmi . Sayangnya, tidak semuanya "dimasak" dengan benar dan terkadang menggunakannya akan meningkatkan bundel aplikasi lebih dari yang seharusnya. Dan kebetulan paket seperti itu tidak mungkin digunakan, karena pembuatnya tidak pandai menyiapkan paket dan melewatkan beberapa poin penting.
Pada artikel ini saya akan menunjukkan kepada Anda bagaimana membuat dan mempublikasikan paket npm dengan komponen Svelte sehingga semua orang dapat menggunakannya tanpa harus pusing memikirkan masalah yang tidak terduga.
Buat komponen
. , npm-:
npm init
, . , Svelte-, svelte-
, , , svelte-clock-demo
. , . , . , Enter.
, package.json
, components
, 'App.svelte'
,'Sign.svelte'
'flip.js'
.
, :
npm install dayjs
Svelte-, , . package.json
"main":"index.js",
:
...
"svelte":"components/App.svelte",
...
, , . – ...
, Svelte- c , "svelte"
package.json
. , , - . Svelte .
ES6 Webpack Rollup. JavaScript Svelte-, CSS-, . , svelte
, , svelte/transition
svelte/store
, svelte/internal
. , , Svelte, .
IIFE <script src="...">
. html-, - CDN, jsdelivr.com unpkg.vom. , , , svelte
, – , dayjs
.
. – Webpack, Rollup, Parcel . , esbuild, Go, , tree- . esbuild-svelte
svelte
. dev-:
npm install --save-dev esbuild esbuild-svelte svelte
svelte
dev-, Javascript-. , svelte
. , , , , ES6 , . , package.json
peer-.
...,
"peerDependencies": {
"svelte": "3.x"
},
...
3.x
, - Svelte, 2 4, ES6 .
, svelte
node_modules
, . NPM 7 .
CDN- . "svelte":...,
package.json
:
...
"module":"dist/clock.mjs",
"cdn":"dist/clock.min.js",
"unpkg":"dist/clock.min.js",
...
, CDN . , , Jsdelivr "cdn"
, , . , "unpkg"
.
esbuild
esbuild.js
:
const {build} = require(`esbuild`);
const sveltePlugin = require(`esbuild-svelte`);
// package.json pkg
const pkg = require(`./package.json`);
// Svelte
const svelte = sveltePlugin({
compileOptions:{
//
css: true
}
});
// IIFE-
build({
// package.json
entryPoints: [pkg.svelte],
outfile: pkg.cdn,
format: 'iife',
bundle: true,
minify: true,
sourcemap: true,
plugins: [svelte],
//
globalName: 'svelteClock',
})
// ES-
build({
entryPoints: [pkg.svelte],
outfile: pkg.module,
format: 'esm',
bundle: true,
minify: true,
sourcemap: true,
plugins: [svelte],
//
// dependencies peerDependencies package.json
external: [
...Object.keys(pkg.dependencies),
...Object.keys(pkg.peerDependencies),
]
})
esbuild .
package.json
"scripts"
esbuild:
...
"scripts": {
...
"build":"node esbuild",
...
}
:
npm run build
dist
sourcemap, , .
Readme.md
README.md
, , . , , , , , , . , . svelte-, . - , . , .
NPM. , , node_modules
. esbuild.js
, . .npmignore
, . — esbuild.js
. , .
npm run build
, dist
. "scripts"
package.json
:
...
"scripts": {
...
"prepublish":"npm run build",
...
}
, pacakge.json
:
{
"name": "svelte-clock-demo",
"version": "1.0.0",
"description": "Animated clock component for Svelte",
"svelte": "components/App.svelte",
"module":"dist/clock.mjs",
"cdn":"dist/clock.min.js",
"unpkg":"dist/clock.min.js",
"scripts": {
"build":"node esbuild",
"prepublish":"npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Vasya Pupkin",
"license": "ISC",
"dependencies": {
"dayjs": "^1.10.4"
},
"devDependencies": {
"esbuild": "^0.8.43",
"esbuild-svelte": "^0.4.1",
"svelte": "^3.32.2"
},
"peerDependencies": {
"svelte": "3.x"
}
}
, NPM :
npm login npm publish
NPM . .
. - :
npm install --save-dev svelte-clock-demo
Svelte-, :
<script>
import Clock from 'svelte-clock-demo';
</script>
<Clock background="white" color="black" />
, Svelte, ES6 , :
import Clock from 'svelte-clock-demo';
new Clock({
// DOM,
target: document.getElementById('divForClock'),
//
props:{
background: 'white',
color: 'black'
}
})
CDN. NPM, CDN , jsdelivr.com.
<html>
<head>
<title> </title>
<!-- CDN -->
<script src='https://cdn.jsdelivr.net/npm/svelte-clock-demo'></script>
</head>
<body>
<div id="divForClock"></div>
</body>
<script>
// esbuild
new svelteClock.default({
// DOM,
target: document.getElementById('divForClock'),
//
props:{
background: 'white',
color: 'black'
}
})
</script>
</html>
, - . , UI , Input
,Button
, Checkbox
..
App.svelte
, Sign.svelte
. , , - .
, components
index.js
- , .
export {default as Clock} from './App.svelte';
export {default as Sign} from './Sign.svelte';
"svelte"
package.json
, index.js
.
...
"svelte":"components/index.js",
...
, :
import {Sign} from 'svelte-clock-demo';
Dalam artikel tersebut, kami tidak menyentuh topik pengujian, serta organisasi proses pengembangan komponen itu sendiri. Tetapi Anda tidak boleh mengabaikannya dalam proyek Anda, karena tanpanya hampir tidak mungkin membuat paket berkualitas tinggi dengan jumlah bug minimum.
Jika Anda memiliki pertanyaan tentang publikasi komponen, penggunaannya, atau secara umum tentang kerangka Svelte, Anda selalu bisa mendapatkan jawaban di obrolan bahasa Rusia komunitas Svelte di Telegram .