Parcel을 사용하여 기본 웹 사이트 만들기

17072 단어 opensourcehtmlcssjavascript
HTML, CSS, 자바스크립트만 있는 작은 사이트를 만들고 싶습니다.많은 라이브러리를 가져오거나 백그라운드에서 고급 지연 렌더링을 실행하는 프레임워크를 사용하지 않으려고 합니다.
어떤 스타일의 사이트를 원하면 API에 요청을 할 수도 있고 간단하게 구축하고 관리하며 배치할 수 있습니다.
그래서 우리가 그것을 세웁시다.
웹 사이트를 만들려면 다음과 같은 비디오 버전이 있습니다.

기본 사이트
우선 기술적으로 우리는 세 개의 문서만 있으면 웹 사이트를 만들 수 있다.
새 프로젝트를 만들고 싶은 곳으로 명령줄을 엽니다.
그런 다음 디렉토리를 만듭니다.
mkdir awesome-site
cd awesome-site
이제 세 개의 파일을 만들 수 있습니다.
touch index.html
touch main.css
touch main.js
이렇게 파일을 작성합니다.

색인html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <h1>Hello from HTML!</h1>

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

매인.css
h1 {
  color: magenta;
}

매인.js
console.log('Hello from JavaScript!');
지금 만약에 우리가 index.html를 열면 우리는 Hello from HTML! 양홍색을 볼 수 있다. 바로 이렇다. 우리는 웹 사이트가 하나 있다.
이 점에서 우리는 이미 최저한도에 이르렀지만, 우리는 계속해서 우리 사이트를 위해 기능을 추가하기를 희망한다.이를 실현하기 위해 우리는 다른 개발자의 라이브러리를 사용하기를 희망한다.
그렇다면, 우리는 어떻게 우리 사이트에서 사용할 수 있는 라이브러리를 도입합니까?

라이브러리 가져오기
라이브러리에 가져올 수 있는 여러 가지 방법이 있습니다.JavaScript 파일을 직접 다운로드하여 HTML에 CDN에서 JavaScript 파일을 포함하고 패키지 관리자를 설정할 수 있습니다.
NPM(Node package manager)이라는 패키지 관리자를 설정하는 것은 필요한 파일을 자동으로 다운로드하고 미래의 의존 관계를 관리하는 데 도움을 주기 때문이다.
재구매 계약에서 NPM 설정
npm init -y
이 명령을 실행하면 기본값이 있는 main.js 파일을 만들 것입니다.
지금 우리는 직사각형이라는 가방을 설치할 것이다.js는 날짜 형식을 설정하는 데 도움을 주는 라이브러리입니다.
npm install moment
만약 우리가 지금 package.json 파일을 보고 있다면, 이 순간이 우리의 의존항에 추가된 것을 볼 수 있을 것이다
{
  "name": "awesome-site",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.29.0"
  }
}
먼저 행렬을 사용하려면 package.json에 스크립트 태그 포함 moment.min.js 파일을 사용해야 합니다
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <h1>Hello from HTML!</h1>

    <script src="node_modules/moment/min/moment.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>
여기에 index.htmlmoment.min.js를 추가했습니다.이렇게 하면, 우리는 main.js에서 라이브러리를 사용하기 전에 캐리어 모멘트를 사용할 것이다.
변화부터 모멘트 사용main.js
const now = moment().format('MMMM Do YYYY, h:mm:ss a');

console.log(now); // September 30th 2020, 8:20:12 pm <- The time I am actually writing this
main.js를 열면 현재 시간을 불러오고 위에서 정의한 형식으로 기록합니다.
그런데 잠깐만, 우리가 뭘 할 수 있을까?

번들 사용
JavaScript에서는 코드를 한 파일에서 다른 파일로 가져오는 방법을 제공하지 않습니다.이제 라이브러리를 가져오고 사용하려면 HTML에 index.html 자바스크립트 파일과 라이브러리의 입구점 파일의 정확한 경로를 포함해야 합니다.HTML에 라이브러리를 포함할 때 JavaScript 파일은 HTML에 로드되고 로드된 파일에 사용할 글로벌 변수로 정의됩니다.
이것은 효율이 낮을 뿐만 아니라, 만약 우리가 HTML에 스크립트 표시를 추가하지 않거나, 우리의 표시 순서가 정확하지 않으면, 우리도 오류가 발생할 수 있다.
그럼 또 어떤 선택이 있을까요?
현재 NPM을 사용하고 있습니다. 이것은 node의 패키지 관리자입니다.js.노드js는 CommonJS 모듈을 구현하여 자바스크립트가 파일에서 코드를 가져오고 내보낼 수 있도록 합니다.
이것이 바로 우리 앞의 예에서 노드를 사용할 때의 모습이다.HTML에 HTML 스크립트 태그가 있는 사각 라이브러리가 아닌 js 모듈은 node_modules 파일에 라이브러리를 로드할 수 있습니다.
const moment = require('moment');

const now = moment().format('MMMM Do YYYY, h:mm:ss a');

console.log(now);
이것은 보기에 매우 좋으나, 만약 우리가 지금 그것을 사용하려고 시도한다면, 우리는 다음과 같은 오류를 얻게 될 것이다.main.js브라우저가 파일 시스템에 접근할 수 없습니다. 이것은 파일을 불러오는 것이 매우 까다롭다는 것을 의미합니다.
이 오류를 복구하고 파일 시스템에 접근할 수 있도록 모듈 귀속기가 필요합니다.JavaScript 모듈 바인딩기는 브라우저와 호환되는 파일 출력을 만들 수 있는 도구입니다.모듈 귀속기는 모든 Uncaught ReferenceError: require is not defined 문장을 찾아서 필요한 파일의 상하문으로 대체합니다.
이것은 훌륭하지만, 매우 복잡할 수도 있다.그래서 우리는 모든 복잡한 요소를 등식에서 배제하는 도구를 사용하자.
소포를 입력하다.

싸다
Parcel은 웹 응용 프로그램 바인딩기로서 이전에 우리가 설정해야 했던 많은 일을 처리할 것입니다.
Parcel은 우리의 모든 JS, CSS, HTML, 파일 자산 등을 작은 파일로 묶어서 코드를 실행할 수 있습니다.포장하는 과정에서 소포는 우리가 require 심지어require 문법을 사용할 수 있도록 우리의 서류를 변환할 것이다.
Parcel has other features you should check out too
프로젝트에 Parcel 설치
npm install parcel-bundler --save-dev
이것은 개발 의존항으로 import 모듈을 추가합니다. 이것은 개발 기간에만 필요한 모듈입니다.
이제 parcel-builder에 두 개의 스크립트를 추가합니다.
{
  "name": "awesome-site",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url ./"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.29.0"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }
}
우리가 추가한 package.json 스크립트는 dev 명령과 항목 파일을 사용합니다.이것은 개발 과정에서 사용되며, 열을 다시 불러올 때 사용할 서버를 시작합니다.parcel 스크립트는 build를 사용하여 웹 사이트를 parcel build 폴더에 구축합니다. 웹 사이트를 배치할 때 이 폴더에서 웹 사이트에 서비스를 제공할 것입니다.

이 모든 것을 결합시키다
현재 우리는 소포를 설치했기 때문에 /dist 파일에서 require 문장을 사용할 수 있다.
이제 Dellmain.js 파일은 다음과 같습니다.
const moment = require('moment');

// The newer import statement will also work
// import moment from 'moment'

const now = moment().format('MMMM Do YYYY, h:mm:ss a');

console.log(now);
스크립트 태그를 HTML에서 제외할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <h1>Hello from HTML!</h1>
    <script src="main.js"></script>
  </body>
</html>
우리는 현재 우리의 개발 스크립트main.js를 실행하고 http://localhost:1234를 열 수 있습니다. 우리는 우리의 사이트를 볼 수 있습니다. 만약에 우리가 컨트롤러를 열면 기록된 현재 시간을 볼 수 있습니다!
(HTML, CSS, JS를 동시에 업데이트하면 웹 사이트가 자동으로 다시 불러오는 것을 볼 수 있습니다)

마무리
GitHub, GitLab, Bitbucket 등에 코드를 호스팅하여 세계 각지에 배포할 수 있는 GitHub, GitLab, Bitbucket 등이 준비되어 있습니다.
이 출발점을 네 다음 프로젝트의 시험장으로 삼아라.이 프로젝트의 다른 흥미로운 확장은 POSTSS 추가, Sass 사용, 각종 배치 방식을 추가하는 것이다.

리소스
Parcel
NPM
Moment.js
More robust example code
kubernetes 의 liveness 와 readiness
Windows 에 nginx 서버 구축

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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