使用svelte打造一个组件（发布npm）

先放项目地址：https://github.com/Iroha1024/...

了解svelte

Svelte 与诸如 React 和 Vue 等 JavaScript 框架相似，可是有一个关键的区别：Svelte 在构建/编译阶段将你的应用程序转换为理想的 JavaScript应用，而不是在运行阶段解释应用程序的代码。

https://www.sveltejs.cn/tutor...

简而言之，编译出的js代码无需引入框架，可嵌入在其余代码中，用来写一些小组件十分方便

svelte基础

最初的组件

一个简单的组件就实现了，不过除了展现还无用处，你须要添加更多代码来改进你的组件

<script>
    let name = 'world'
</script>

<h1>hello {name}!</h1>

组件实例化

实例化才能算的上一个应用，不然你的组件只能呆在展现页面里

prop能够接收外部数据（也许你并不须要）

App.svelte

<script>
    epxort let name     //能够设置初始值
</script>

<h1>hello {name}!</h1>

index.js

import App from './App.svelte'

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
})

更丰富的组件

• svelte提供一种变量声明方式$: variable，用于依赖表达式后面的值，如当name变化时，reactiveVal会一同变化，而用其余方式（let）则变量不会具备响应式。固然还有条件判断、语句一样可使用$:声明 https://www.sveltejs.cn/tutor...
• prop绑定：引入其余组件，若是子组件修改prop值，父组件需以bind:prop形式声明，父组件才能获取响应式数据

App.svelte

<script>
    import Child from './Child.svelte'
    
    let name = 'world'
    $: reactiveVal = 'reactive ' + name
    
    function logName() {
        console.log('name:', name)
        console.log('reactiveVal:', reactiveVal)
    }
</script>

<h1>{reactiveVal}</h1>
<Child bind:name on:click={logName}/>

<!--
    子组件改值，父组件内数据不响应
    <Child name={name} on:click={logName}/>
    简写
    <Child {name} on:click={logName}/>
-->

Child.svelte

• 原生事件传递：子组件若要将事件（如click）经过组件传递，则需在外层声明
• 自定义事件传递：https://www.sveltejs.cn/tutor...

<script>
export let name

function changeName() {
    name = name === 'world' ? 'hello hello' : 'world'
}
</script>

<!-- 需声明 -->
<div on:click>  
    <h1>hello {name}!</h1>
    <button on:click={changeName}>
        change name
    </button>
</div>

其余特性

//条件渲染
{#if x > 10}
    <p>...</p>
{:else if 5 > x}
    ...
{:else}
    ...
{/if}

//列表渲染
{#each things as thing (thing.id)}
    <p>...</p>
{/each}

<script>
    import { onMount, tick } from 'svelte'

    let  div
    
    onMount(() => {
        //获取dom
    })
</script>

<div bind:this={div}></div>

//动态组件
<svelte:component this={componentName}/>

async function fn() {
    //执行
    await tick()
    //dom更新后再执行
}

typescript

svelte虽然由typescript编写，但很是遗憾的是目前并无完善的typescript支持......😅

这里使用typescript编写组件的api和数据的接口

发布npm

首先须要一个npm帐户，而后是惯例的npm adduser或者npm login，登陆帐号，准备npm publish，这时会有一些问题，难道全部文件都须要上传吗？npm怎么知道上传哪些文件？

package.json详情：https://www.npmjs.cn/files/pa...

• files

  表示须要上传的文件

  package.json README LICENCE CHANGELOG 这些文件会默认上传

• main

  表示commonJs模块的入口文件

• module

  表示es6模块的入口文件

• types

  表示d.ts文件

npm publish前须要设置version，确保版本号不一样（npm规定没法更新相同版本号），name不能和已有包名重复

publish结束后，一个npm包就成功发布了

🎉🎉🎉