Componente Svelte reutilizável: para que ninguém se machuque

As estruturas de componentes, independentemente do nome, nunca sairão da área de uso puramente de nicho, a menos que a comunidade crie componentes públicos para eles que possam ser facilmente incorporados ao seu projeto.

Ao longo do último ano e meio, muitos componentes diferentes já foram criados para o framework Svelte, que podem ser encontrados no NPM , GitHub ou na lista oficial . Infelizmente, nem todos eles são "preparados" corretamente e, às vezes, usá-los aumentará o pacote de aplicativos mais do que deveria. E acontece que tais pacotes são simplesmente impossíveis de usar, porque seu autor não é bom em preparar pacotes e perdeu alguns pontos importantes.

Neste artigo, vou mostrar como fazer e publicar um pacote npm com um componente Svelte para que todos possam usá-lo sem ter dores de cabeça com problemas inesperados.

Crie um componente

, , . . , . 'dayjs'



.

. , 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';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

No artigo, não tocamos no tema dos testes, bem como na organização do processo de desenvolvimento do próprio componente. Mas você não deve negligenciá-los em seus projetos, pois sem eles é quase impossível fazer um pacote de alta qualidade com um número mínimo de bugs.

Se você tiver alguma dúvida sobre a publicação de componentes, seu uso, ou em geral sobre a estrutura Svelte, você sempre pode obter respostas no bate - papo em russo da comunidade Svelte no Telegram .