Les frameworks de composants, quel que soit leur nom, ne quitteront jamais le domaine de l'utilisation purement de niche, à moins que la communauté ne crée pour eux des composants publics qui peuvent être facilement intégrés dans votre projet.
Depuis un an et demi, de nombreux composants différents ont déjà été créés pour le framework Svelte, que vous pouvez trouver sur NPM , GitHub ou la liste officielle . Malheureusement, ils ne sont pas tous correctement «cuits» et parfois leur utilisation gonflera le paquet d'applications plus qu'il ne le devrait. Et il arrive que de tels paquets soient tout simplement impossibles à utiliser, car son auteur n'est pas doué pour préparer des paquets et a manqué certains points importants.
Dans cet article, je vais vous montrer comment créer et publier un package npm avec un composant Svelte afin que tout le monde puisse l'utiliser sans avoir de maux de tête à cause de problèmes inattendus.
Créer un composant
. , 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';
Dans l'article, nous n'avons pas abordé le sujet des tests, ainsi que l'organisation du processus de développement du composant lui-même. Mais il ne faut pas les négliger dans vos projets, car sans eux, il est presque impossible de créer un package de haute qualité avec un minimum de bogues.
Si vous avez des questions sur la publication des composants, leur utilisation ou en général sur le framework Svelte, vous pouvez toujours obtenir des réponses dans le chat en russe de la communauté Svelte sur Telegram .