ちゃちゃっと試すならSnowpack

ちゃちゃっと試すならSnowpack

Snowpack とは？

前に話した

@pika/web の新しいやつ

https://slides.com/syujihiga/pikaweb-es-modules​

NPM から取得したモジュールを

バンドルせずに使えるやつ

簡単に最低限だけ試す

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- type="module" を忘れずに！！！  -->
  <script type="module" src="index.js"></script>
</head>
<body></body>
</html>

HTML を用意

$ npm init -y  # NPM の初期化

$ npm install -D luxon   # このモジュールは例

必要なモジュールをインストール

import { DateTime } from 'luxon';

const now = DateTime.local();

NPM からインストールしたモジュールを

読み込む JavaScript を用意

import { DateTime } from 'luxon';

でも、このままだと読み込めない

import { DateTime } from './node_modules/luxon/build/cjs-browser/luxon.js';

例えばこんな感じにする必要があるし

そもそも、出力ディレクトリの外に

node_modules があること多いので

参照できないこともある

$ npm install -D snowpack

Snowpack をインストール

{
  "scripts": {
    "dev": "snowpack dev",
    "build": "snowpack build"
  }
}

package.json に npm script を追加

$ npm run dev

開発サーバを起動

$ npm run build

ビルド

何かしらのバンドラーを

追加してもよいけど

ちゃちゃとモジュールを

試すだけならオススメ

END

Made with Slides.com