자신이 만든 패키지를 다른 사람과 공유할 수 있다면 만든거에 대한 보람을 느낄 수 있을 것 같다.

그리고 좋은 패키지들이 많이 생기면 스벨트에 더 많은 유저들이 관심을 가질 수 있을 것이다. 

그래서 패키지를 만드는 방법을 찾아봤다. 정보가 많지 않았지만 좋은 블로그 포스팅이 있어서 테스트 해본 뒤 안되는건 수정해서 작성하였다.

아래의 블로그를 참고 하여 작성함

dev.to/agustinl/creating-a-package-for-svelte-262n

1. 패키지 파일 생성

npm init -y

이 명령어를 사용하면 package.json파일을 생성할 수 있다.

2. 패키지 파일 정보 채우기

   {
      "name": "",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

생성된 package.json파일의 name, description, keywords, author, license 부분을 체운다.

3. 스벨트 관련 디팬던시 추가

npm install -D rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte

패키지파일에 아래와 같이 추가가 된다.

    "devDependencies": {
        "rollup": "^1.28.0",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-svelte": "^5.1.1",
        "svelte": "^3.16.7"
    }

4. index.js파일 만들기

src폴더를 만들고 그 안에 index.js 파일을 만든다.

index.js 파일에서 사용할 컴포넌트를 export 할 것이다.

5. index.js에 사용할 컴포넌트 export하기

export { default as Calendar } from './Calendar.svelte';

즉, index.js 파일이 위치한 폴더에 Calender.svelte파일을 찾아서 익스폴트 해주는 것.

6. package.json파일을 이와 같이 수정해준다.

    "main": "dist/index.js",
    "module": "dist/index.mjs",
    "svelte": "src/index.js",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w"
    },

7. rollup.config.js파일 만들기

 import svelte from 'rollup-plugin-svelte';
    import resolve from 'rollup-plugin-node-resolve';

    const pkg = require('./package.json');

    export default {
        input: 'src/index.js',
        output: [
            { file: pkg.module, 'format': 'en' },
            { file: pkg.main, 'format': 'umd', name: 'Name' }
        ],
        plugins: [
            svelte(),
            resolve()
        ],
    };

8. 로컬에서 테스트하기

사용할 스벨트 프로젝트 폴더에서

npm link 만든패키지 경로 복붙

9. npm에 퍼블리쉬

위의 링크에 방법 나옴.

1. npm 로그인

npm adduser

2. 퍼블리쉬

npm publish

주의 패키지의 이름이 중복되면 퍼블리쉬가 안됨

이제 로컬에서 설치한 패키지를 지우고 (npm uninstall 패키지명)

npm에서 받아서 되나 테스트 해보자. (npm install 패키지명)