ViteとDeno実験

9163 ワード
deno javascript vite テキストリンク

Pueden leer la versión español .


ちょっと私の言うことを聞いてください.vite 開発サーバ(ビルドツールの種類)とdeno ブラウザのように動作したいJavaScriptランタイムです.さあ.それは正しい.

クイックリープ


完全性のためにこれらの道具を簡単に見てみよう.

ベーテ


公式ウェブサイトでは、次世代フロントエンドツーリングそれはかなりのことをするからです.これは、高速リロードと起動時を提供するESモジュールに依存して開発サーバーがあります.それは高速(めちゃくちゃ高速のように)のことの一つは、それは一度に1つのファイルを扱うだけでなく、オンデマンドではなく、プロジェクト全体を束ねることの事実です.デフォルトでは、TypeScript、JSXとCSSのモジュールを扱うことができますので、すぐにものを行うことができます.他のことは、あなたがそれを行うこともできます生産のためのアプリケーションを構築する場合.

電通

deno JavaScriptとTypesScriptの安全なランタイムです.言い換えれば、JavaScriptとタイプスクリプトをブラウザなしで実行することができます.それは、あなたが実行するコードがあなたのシステムへの制限されたアクセスで環境で動くので、それが安全であると言います.特定の機能を有効にしたい場合は、明示的にアクセスする必要があります.興味深いことは、バンドル、フォーマッタ、リンタ、言語サーバ、いくつかのようないくつかの便利なツールでバンドルされているという事実です.これは開発環境です.

なぜ私はそれら2つをミックスしたいですか？


何故ならdeno サードパーティの依存関係を処理します.あなたは、パッケージを使いたいときに、あなたがブラウザで行うのと同じ方法でそれをしなければなりません、ESモジュールとURL(Nudge Nudge Wink Wink)を使用することによって.このようなこと.
import * as R from 'https://cdn.skypack.dev/[email protected]';
これは完全に罰金です.まではない.
単一のファイルスクリプトに最適です.より複雑なプロジェクトのために、すべてをAに置くという慣例がありますdeps.ts ファイルは、それは最高ではないが、それはokです.実験機能もありますimport-maps , これは、より良いそれを作る.

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


とにかく、これが欲しい.
import * as R from 'ramda';
そして、私はそのものを得たいです.ramda , "real "パッケージマネージャを使う.現時点ではnpm (伝野に罪).問題は、denoが好きではない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からものを引っ張ります.
ちょっとそれを1秒持ちなさい.何かをする前に、グローバルキャッシュを「汚染」したくない場合はdeno あなたのシステムでの使用DENO_DIR 環境変数.Unixシェルでは、このようなことをするでしょう.
export DENO_DIR="$PWD/.cache"

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


どこですか.使用deno . これは私たちが実行する代わりにmain.js ファイルシステムではmain.js vite サーブ.
deno run "http://localhost:3000/main.js"
deno これを見せてください.
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://...今は何かを変えるmain.js .
  import * as R from 'ramda';

  const increment = R.map(x => x + 1);
-
- console.log(increment([1, 2, 3]));
+ console.log('hello');
ランmain.js 再び.
あなたは、得ましたhello ? あなたがそうしなかった賭け、そして、現在、あなたは理由を不思議に思います.
だってdeno グラブビングmain.js サーバー(localhost)からは、キャッシュのフォルダにソースを保存します.どのように我々はこれを回避できますか?私はこれだけで思い付くことができた.
deno run "http://localhost:3000/main.js?t=$RANDOM"
ここではQueryStringを使いますt URLに乱数を付けるには、コマンドを実行するたびに、この新しいURLを技術的に作成します.
これは同じやり方だvite 使用してキャッシュを中断します.ファイルを偽造しましょうother.js そして我々はmain.js .
import { other } from './other.js';
コンテンツを変更するとother.js vite ファイルのURLにタイムスタンプを付けます.それで、あなたが変化をするときdeno このようなことが表示されます.
Download http://localhost:3000/other.js?t=1614653342379
そして、そこには、開発環境vite and deno .

あとどうですか。


私は知っている、あなたなしで開発しているこの“アプリ”を使用したいと思うvite . 解決策はかなり簡単です.コマンドを使うdeno bundle , これはすべてをつかむdeno 必要があり、それは単一のファイルに入れられます.
deno bundle "http://localhost:3000/main.js?t=$RANDOM" dist.js
今すぐ実行する場合dist.js 期待される結果を得るべきです.
deno run dist.js

用心深い言葉


ちょうどこれが言われる必要がある場合.我々が望む何でもダウンロードすることができるとさえ思ったnpm それが機能することを意味しませんdeno . 時々、それはちょうど互換性がないパッケージです.

結論


この愚かな実験は実際には、少なくとも私が試した些細な例を動作します.私はミッションの重要なアプリを開発するために、このコンボの使用を奨励しないでください.
お読みありがとうございます.あなたがこの記事を役に立つならば、私の努力を支持したいです.buy me a coffee ☕ .
[TIL] 2020/11/11
AWS Config 基本設定