Komponenten-Frameworks verlassen unabhängig vom Namen niemals den Bereich der reinen Nischenverwendung, es sei denn, die Community erstellt öffentliche Komponenten für sie, die einfach in Ihr Projekt eingebettet werden können.
In den letzten anderthalb Jahren wurden bereits viele verschiedene Komponenten für das Svelte-Framework erstellt, die auf NPM , GitHub oder der offiziellen Liste zu finden sind . Leider sind nicht alle von ihnen richtig "gekocht" und manchmal wird das Anwendungspaket durch ihre Verwendung mehr aufgeblasen, als es sollte. Und es kommt vor, dass solche Pakete einfach nicht zu verwenden sind, weil der Autor nicht gut darin ist, Pakete vorzubereiten, und einige wichtige Punkte übersehen hat.
In diesem Artikel werde ich Ihnen zeigen, wie Sie ein npm-Paket mit einer Svelte-Komponente erstellen und veröffentlichen, damit jeder es verwenden kann, ohne Kopfschmerzen durch unerwartete Probleme zu bekommen.
Erstellen Sie eine Komponente
. , 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';
In dem Artikel haben wir weder das Thema Testen noch die Organisation des Entwicklungsprozesses der Komponente selbst angesprochen. Sie sollten sie jedoch in Ihren Projekten nicht vernachlässigen, da es ohne sie fast unmöglich ist, ein qualitativ hochwertiges Paket mit einer minimalen Anzahl von Fehlern zu erstellen.
Wenn Sie Fragen zur Veröffentlichung von Komponenten, ihrer Verwendung oder allgemein zum Svelte-Framework haben, können Sie diese jederzeit im russischsprachigen Chat der Svelte-Community per Telegramm beantworten .