React가 있는 Snowpack: 웹 응용 프로그램을 구축하는 가장 좋은 방법
10021 단어 reactwebdevjavascript
입문
우리는 새로운 프로젝트를 만들 것이다.Create-React-App, Gatsby, Next 등으로 프로젝트를 시작할 필요가 없습니다. 새 폴더를 만들고 cd를 이 폴더에 넣고
npm init을 실행하면 됩니다.> mkdir snowpack-demo
> cd snowpack-demo
> npm init
snowpack을 포함하고, 그 다음은 @babel/core, @babel/cli, @babel/preset-react을 포함할 것이다.> yarn add --dev snowpack
> yarn add --dev @babel/core @babel/cli @babel/preset-react
snowpack에서 npx을 실행할 수 있지만, 잠시 후 이 예에서 우리는 스노우팩의babel 플러그인을 사용할 것이다.왜 바벨이야?
바벨이라고 하면 왜 우리가 바벨과 스노우팩을 결합해서 사용해야 하는지 스스로에게 물어볼 수도 있다.이것은 완전히 정확한 문제이다. 왜냐하면 눈이 쌓이면 보통 바베타가 필요하지 않기 때문이다.
우리는 응용 프로그램에서 JSX를 사용할 것이다.불행하게도 브라우저는 JSX를 어떻게 처리하는지 모르기 때문에 우리는 바벨을 사용하여 코드를 브라우저가 이해할 수 있는 내용으로 번역하는 데 도움을 줄 것이다.또한 이미 사용 중인 Babel을 사용하고 있기 때문에 Snowpacks의 선택적 Babel 플러그인을 사용할 것입니다. 이 플러그인은 URL을 통해 가져오는 것이 아니라 이름을 사용해서 가져올 수 있습니다.이것은 전통적으로 눈더미에 대해 이렇게 React와 ReactDOM을 가져온다는 것을 의미한다.
import React from "/web_modules/react.js"
import ReactDOM from "/web_modules/react-dom.js"
import React from "react"
import ReactDOM from "react-dom"
web_modules 디렉터리의 파일을 사용하고 있습니다.Babel 플러그인이 이 경로로 이름을 변환하고 있습니다.React 포함
이것들이 있으면 React와 ReactDOM을 프로젝트에 추가합니다.현재 React에서는 ES 모듈을 지원하지 않습니다.다행히도 지역 사회의 일부 사람들은 버전의 React를 가지고 있습니다. 우리는 그것을 사용하여 ES 모듈을 지원할 수 있습니다 (예를 들어 the Snowpack docs).
yarn add react@npm:@reactesm/react react-dom@npm:@reactesm/react-dom
yarn snowpack을 실행하면 Snowpack이 포함된 모듈에 대해 작업을 수행하는 것을 볼 수 있습니다.> yarn snowpack
✔ snowpack installed: react, react-dom [0.79s]
✨ Done in 2.03s.
web_modules 디렉터리를 볼 수 있습니다. Snowpack이 새로 포함된 모듈에 파일을 만들었고, import map이 있습니다. 이 모듈을 지원하는 브라우저에 사용할 수 있습니다.> ls web_modules
import-map.json
react.js
react-dom.js
yarn add --dev live-server
app인 요소가 있습니다. 이 페이지에 React 프로그램을 추가합니다.또한 lib/app.js에 있는 JavaScript 응용 프로그램도 포함됩니다.이 파일은 현재 존재하지 않지만, 우리는 곧 처리할 것이다.<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello world example!</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/lib/app.js"></script>
</body>
</html>
.babelrc 파일을 추가하여 Babel 구성을 추가합니다.{
"plugins": [["snowpack/assets/babel-plugin.js", {}]],
"presets": ["@babel/preset-react"]
}
src/app.js에 아주 기본적인 React 응용 프로그램을 만들 것입니다import React from "react"
import ReactDOM from "react-dom"
const App = () => <h1>Hello everyone!</h1>
ReactDOM.render(<App />, document.getElementById("app"))
yarn babel src --out-dir lib --watch
src 디렉터리에 babel을 실행하고 전송된 파일을 lib 디렉터리에 기록합니다. (index.html에서 인용한 디렉터리)yarn live-server
npm script.으로 함께 실행하지만, 나는 단독으로 이 항목들을 주목하는 것을 좋아한다.브라우저로 이동하여 페이지를 열면 (기본적으로 localhost: 8080) 다음과 같은 메시지가 표시됩니다.
마지막으로, 새로운 의존 항목을 포함할 때 Snowpack을 자동으로 실행할 수 있도록 프로그램을 조정할 것입니다.
package.json 파일로 다시 이동하면 prepare 객체에 scripts 스크립트를 추가합니다.{
"name": "snowpack-demo",
...
"scripts": {
"prepare": "npx snowpack",
...
},
prepare 스크립트는 몇 가지 특정한 실례에서 실행될 것이다. 특히 우리가 새로운 의존항을 설치한 후에.현재, 만약 우리가 styled-components을 포함한다면, 우리는 적설이 우리를 위해 운행하는 것을 보아야 하며, 어떠한 수동적인 개입도 없어야 한다.yarn add styled-components
yarn add v1.21.1
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
...
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
$ npx snowpack
✔ snowpack installed: react, react-dom, styled-components. [0.75s]
✨ Done in 3.73s.
Check out the demo application from this article here .
저는 Snowpack이 가져올 수 있는 개발자 체험과 성능 우위에 대해 매우 흥분합니다.응용 프로그램을 묶을 때 사용하는 정책이나 본문에 대한 당신의 생각을 듣고 싶습니다.청하다
Reference
이 문제에 관하여(React가 있는 Snowpack: 웹 응용 프로그램을 구축하는 가장 좋은 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ryanlanciaux/snowpack-with-react-ch3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
