한 실험

9427 단어 denojavascriptvite

Pueden leer la versión español .


내 말 다 들어.vite는 개발 서버(또는 구축 도구)이고 deno는 브라우저를 충당하고자 하는 자바스크립트가 실행될 때이다.자.저기 있습니다.

빠른 회고


완전하게 보기 위해서, 우리는 이 공구들을 빠르게 살펴보자.

위트


공식 웹사이트에서는 "차세대 프런트엔드 도구"라고 부릅니다.그것은 많은 일을 할 수 있기 때문이다.ES 모듈에 크게 의존하는 개발 서버로 신속한 재로드 및 부팅 시간을 제공합니다.그 중 하나가 그것을 빠르게 (예를 들어 엉뚱하게 빠르다) 하는 이유는 한 번에 하나의 파일만 처리하고, 프로젝트 전체를 묶는 것이 아니라 필요에 따라 처리하는 것이다.기본적으로 typescript, jsx, css 모듈을 처리할 수 있기 때문에 즉시 작업을 시작할 수 있습니다.또 다른 일은 제품을 위해 응용 프로그램을 개발하고 싶다면, 그것도 이렇게 할 수 있다는 것이다.

승낙하다

deno는 JavaScript와 TypeScript가 안전하게 작동할 때입니다.브라우저가 없는 상태에서javascript와 typescript를 실행할 수 있다는 뜻이다.실행 중인 코드가 시스템 접근이 제한된 환경에서 실행되기 때문에 안전하다고 합니다.어떤 기능을 사용하려면 명확한 접근 권한을 주어야 합니다.또 다른 흥미로운 것은, 묶음 프로그램, 포맷 프로그램,linter, 언어 서버 등 유용한 도구와 묶여 있다는 것이다.이것은 개발 환경이다.

나는 왜 이 두 가지 물건을 한데 섞어야 합니까?

deno 제3자 의존 관계를 처리하는 방식 때문이다.봐라, 소프트웨어 패키지를 사용하고 싶을 때, ES 모듈과 URL (가볍게 밀기 - 가볍게 밀기 - 깜빡임 - 깜빡임) 을 사용하여 브라우저의 방법을 사용해야 한다.이런 거.
import * as R from 'https://cdn.skypack.dev/[email protected]';
이거 좋아요...아니야.
단일 파일 스크립트에 완벽합니다.더 복잡한 프로젝트에 대해 모든 내용을 하나의 deps.ts 파일에 넣는 것이 가장 좋은 것은 아니지만 그래도 괜찮다는 관례가 있다.import-maps라는 실험 기능이 있어 더욱 좋다.

as of version 1.8.0 import-maps in deno are stable. Release notes.


어쨌든 나는 이것을 원한다.
import * as R from 'ramda';
나는 진정한 가방 관리자로 이 물건을 얻고 싶다ramda.현재는 사용npm(데노 지역에서는 죄악)을 의미한다.문제는 데노가 좋아하지 않는다는 것이다npm.

사람을 구하다


만약 우리가 사용하고 싶다면ramda.마찬가지로, 우리는 npm 를 사용하여 원본 코드를 얻기를 원하기 때문에, 우리는 이렇게 한다.
npm install [email protected]
이제 스크립트를 만듭니다.우리는 main.js라고 부른다.
import * as R from 'ramda';

const increment = R.map(x => x + 1);

console.log(increment([1, 2, 3]));
이거 좋지 않아요?이것이 바로 우리가 해결하고자 하는 문제다.이제 설치해야 합니다vite.
npm install -D [email protected]
우리 시운전해 봅시다.를 생성합니다index.html.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="module" src="/main.js"></script>
</body>
</html>
현재 사용vite.
npx vite
만약 모든 것이 순조롭다면, 너는 반드시 화면에 이것을 표시해야 한다.
vite v2.0.4 dev server running at:

> Local:    http://localhost:3000/
> Network:  http://192.168.0.000:3000/

ready in 347ms.
http://localhost:3000/에 방문하여 브라우저의 컨트롤러를 확인하십시오. 이것을 가지고 있어야 합니다.
[ 2, 3, 4 ]
쿨하다위대했어지금 우리는 그것을 어떻게 deno에 보냅니까?나는 확실히 deno 브라우저처럼 일하고 싶다고 말했다.브라우저가 뭘 하는지 아세요?그들은 URL에서 내용을 추출했다.
잠깐만요.어떤 일을 하기 전에 시스템에 사용되는 전역 캐시 deno 를 오염시키지 않으려면 환경 변수를 설정하는 것을 권장합니다.유닉스 셸에서 이렇게 할 수 있습니다.
export DENO_DIR="$PWD/.cache"

windows users, I apologize, I do not know the cmd.exe or powershell equivalent of this.


우리 어디 있어요?사용DENO_DIR.이것이 바로 우리가 해야 할 일이지, 실행 deno main.js 하는 파일 시스템에서 실행 main.js 하는 것이 아니다.
deno run "http://localhost:3000/main.js"
vite 이걸 보여줘야지.
Download http://localhost:3000/main.js
Download http://localhost:3000/node_modules/.vite/ramda.js?v=2e8a2ea4
[ 2, 3, 4 ]
정말 쓸모가 있다!우리는 이미 성공적으로 npm 소프트웨어 패키지를 deno와 함께 사용했다.이것은 큰일이다.당분간 너무 축하하지 마세요.그냥 재미로 한 번 더 해요.
[ 2, 3, 4 ]
그것은 마땅히 너에게 이 점을 알려줘야 한다.다운로드 없음http://..."...이 모든 것은 매우 멋지다.지금 deno에서 일부 내용을 변경한다.
  import * as R from 'ramda';

  const increment = R.map(x => x + 1);
-
- console.log(increment([1, 2, 3]));
+ console.log('hello');
다시 한 번 뛰다main.js.main.js 받았어요?나는 네가 없는 것에 내기를 걸겠다. 지금 너는 왜 그런지 알고 싶다.hello가 서버(localhost)에서 캡처deno하고 있기 때문에 원본 코드를 캐시 폴더(DENO DIR)에 저장하고 URL이 바뀌지 않는 한 다시 다운로드를 시도하지 않습니다.우리는 어떻게 이 문제를 해결합니까?나는 단지 이것을 생각해 낼 수 있을 뿐이다.
deno run "http://localhost:3000/main.js?t=$RANDOM"
여기에서, 나는 검색 문자열 main.js 을 사용하여 무작위 수를 URL에 추가합니다. 이것은 기술적으로 명령을 실행할 때마다 '새로운' URL을 만들 것입니다.
이는 캐시를 분리하는 방법t과 같습니다.vite 라는 파일을 가지고 other.js 에서 사용한다고 가정합시다.
import { other } from './other.js';
main.js의 내용을 변경할 때 other.js는 파일의 URL에 시간 스탬프를 추가합니다.그래서 변화가 생기면 vite 이런 것을 나타낼 것이다.
Download http://localhost:3000/other.js?t=1614653342379
이것이 바로 개발 환경deno과 vite이다.

그 다음은요?


나는 네가 개발하고 있는 이 '응용 프로그램' deno 을 사용하고 싶어 한다는 것을 안다.해결 방안은 상당히 간단하다.우리는 명령vite을 사용하여 deno bundle에 필요한 모든 내용을 가져와 한 파일에 넣습니다.
deno bundle "http://localhost:3000/main.js?t=$RANDOM" dist.js
현재, 만약 당신이 운행한다면, 당신은 예상한 결과를 얻을 수 있을 것이다.
deno run dist.js

경고 한마디


혹시 모르니까 얘기해야 돼.설령 우리가 deno에서 우리가 원하는 모든 것을 다운로드할 수 있다 하더라도 dist.js에서 실행할 수 있다는 것은 아니다.때때로 소프트웨어 패키지는 호환되지 않는다.

결론


이 어리석은 실험은 실제로는 효과가 있다. 적어도 내가 시도한 보잘것없는 예들이다.나는 이 조합을 사용해서 임무의 관건적인 응용 프로그램을 개발하는 것을 권장하지 않는다. 단지 원하지 않는다. 부대 프로젝트와 다른 실험은 충분히 가능하다.
읽어주셔서 감사합니다.만약 당신이 이 문장이 매우 유용하다고 생각하고 나의 노력을 지지하고 싶다면buy me a coffee ☕.
SVG 이미지를 3x3으로 정렬하기
왼쪽 너비 고정, 오른쪽 적응

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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