Parcel이 포함된 기본 Svelte 앱

11129 단어 svelteparceljs
Svelte 앱을 시작하는 가장 쉬운 방법은 webpack을 사용하는 create-svelte-app ( https://github.com/ph1p/create-svelte-app )를 사용하는 것입니다.

그러나 자신만의 설정을 통해 더 많은 자유와 지식을 얻을 수 있습니다... 따라서 다음은 Parcel.js 번들러를 사용하여 자신만의 Svelte 앱을 처음부터 설정하는 단계별 접근 방식입니다.

킥오프



터미널에서 개발 프로젝트를 넣은 위치로 이동하고 mkdir myFirstSvelteApp 를 실행하여 선택한 이름으로 디렉토리를 만듭니다.

그런 다음 cd를 새로 생성된 디렉토리에 넣고 git 저장소를 git init로 초기화합니다.

이제 yarn init를 실행하여 package.json에서 프로젝트 세부 정보를 빠르게 설정합니다. 이렇게 하면 기본값을 수락하거나(공란으로 두고 Enter 누르기) 더 적합한 것을 입력할 수 있는 몇 가지 질문이 표시됩니다.

기본 작업이 완료되었으므로 이제 몇 가지 패키지를 설치해야 합니다.
  • parcel-bundler Parcel.js
  • svelte Svelte
  • parcel-plugin-svelte ( https://github.com/DeMoorJasper/parcel-plugin-svelte )

    • 단일 명령으로 모두 쉽게 설치할 수 있습니다.yarn add -D parcel-bundler parcel-plugin-svelte svelte

    As we're using the -D flag, these will be installed as devDependencies.



    이제 package.json 파일을 열면 yarn init 이후에 답변한 질문의 내용뿐만 아니라 위에 나열된 항목이 있는 섹션devDependencies도 볼 수 있습니다. 또한 yarn add는 package.json에 종속성을 추가했을 뿐만 아니라 필요한 모든 패키지가 있는 node_modules 폴더를 갖도록 종속성을 설치했습니다.

    As an extra exercise, if you need to get a better feel of how dependencies "work", delete the node_modules folder with rm -rf ./node_modules/ and then run yarn install which will recreate it and download/install all the packages from scratch.



    위에서 수행한 작업을 저장하기 위해 첫 번째commit를 만들기 전에 git 폴더와 일부 다른 기본 파일을 무시하도록 node_modules에 알려야 합니다. 전역gitignore을 통해 이미 무시했을 수 있지만 프로젝트 루트에 두는 것이 좋습니다.
    따라서 .gitignore 및 기타 중요한 파일을 무시하도록 지시하는 git 파일을 만드는 빠른 방법은 다음과 같습니다.

    echo "node_modules" >> ./.gitignore
echo "dist" >> ./.gitignore
echo ".cache" >> ./.gitignore
echo ".env" >> ./.gitignore


    Each line above appends the content between double-quotes into the file .gitignore. You can also manually edit the file in VS Code or similar. This file can have comments with # as a marker.



    이 프로젝트에 대한 세부 정보가 포함된 node_modules 파일을 만드는 것도 매우 권장되지만 이 게시물에서는 자세히 다루지 않겠습니다.
    제 생각에는 지금이 첫 커밋을 하기 좋은 시기입니다.

    안녕하세요



    우리가 그것을 떠났기 때문에 우리는 여전히 몇 가지를 놓치고 있습니다.
    시작하겠습니다... 다음과 같은 기본 앱 파일을 만들어야 합니다.README.md 소포에서 시작점으로 사용./src/index.html 부팅 스크립트./src/index.js 루트 구성 요소./src/components/App.svelte 글로벌 일반 스타일

    Note the subfolders src, src/components, src/css.


    index.html



    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width" />

    <title>Svelte with Parcel</title>
    <link rel="stylesheet" href="./css/styles.scss">
  </head>

  <body>
    <script src="./index.js"></script>
  </body>
</html>

    Parcel.js는 이 파일을 읽고 "가져온"파일을 컴파일합니다.
    이 파일은 순수한 HTML입니다.

    index.js



    import App from './components/App.svelte';

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

export default app;

    이 파일은 ./src/css/styles.scss에서 참조되기 때문에 Parcel.js에서 구문 분석합니다.

    App.svelte



    <script>
  export let name;
</script>

<style>
  h1 {
    text-align: center;
  }
</style>

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

    이것은 우리의 루트 구성 요소입니다. 우리는 지금 그것을 정말 기본으로 유지할 것입니다.

    스타일.scss



    html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  color: #212223;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

    저스트 레귤러index.html . 부분 가져오기, 변수 선언 등...

    거의 다 왔어!!
    scss 모드에서 소포 번들러를 쉽게 실행하거나 생산용으로 빌드하기 위해 dev 파일에 scripts 섹션을 추가할 것입니다.

      "browserslist": [
    "last 1 chrome versions"
  ],
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }


    Add the above, wherever you prefer inside package.json as long as it's inside the root {}.
    The browserslist entry is need to prevent a compilation bug. More info



    모두 끝났습니다!

    루트 폴더에서 package.json를 실행한 다음 yarn dev를 엽니다.
    넌 봐야 해:


    이제 Svelte tutorial으로 이동하여 새로 만든 앱에서 사용해 보세요.

    건배!

    추신: 이것은 내가 상상했던 것보다 작성하는 데 훨씬 더 오래 걸렸고 프로세스 자체보다 훨씬 더 오래 걸렸습니다. 휴...
    JavaScript 디자인 모드(데코더 모드)
    내 블로그를 어떻게 임업 CMS로 옮겼는지

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage