WebAssembly・PWAの習作アプリを作成して感じたこと
はじめに この記事では、個人の習作としてwasm-image-resizerという簡易な画像リサイズ・フォーマット変換ツールをWebAssembly + PWA + Reactで作成したので、そのときに私の得た知見を記載したいと思います。 アプリとしては実に単純であんまり面白みもないのですが、半ばちょっとした好奇心と勢いで自分なりに作ってみました。手探りで拙いですが、ソースコードは以下に配布していますので、よかったら見てみてください。 アプリの技術目標 このアプリを通して私が考えた技術目標は以下のとおりです。 フロントエンドとしては言語はTypeScript、Viteをベースにする UIのフレームワークとしてReactを使用 画像変換などのアプリでやりたいコアな処理はRustで記述 wasm-bindgenとwasm-packでWebAssembly化・javascriptパッケージ化を行
storybook-vite
2020/05/20 こんだけdevDependencies で インストールされた。 babel 入るんがやだなぁ @babel/core: v7.18.0, @storybook/addon-actions: v6.5.3, @storybook/addon-essentials: v6.5.3, @storybook/addon-interactions: v6.5.3, @storybook/addon-links: v6.5.3, @storybook/builder-vite: v0.1.35, @storybook/react: v6.5.3, @storybook/testing-library: v0.0.11, babel-loader: v8.2.5, eslint-plugin-storybook: v0.5.12, package.json の scripts に
Storybook7系をReact + Vite + TypeScriptの構成で動かすのに出たエラーの解消
概要 React + Vite + TypeScriptの構成でStorybookの7系を導入した時に既存で使っているパッケージのバージョンが原因でエラーが出てしまったので対応した。 ※今回はStorybookのアップーデートではなく新規追加です。 この記事でわかること React + Vite + TypeScriptの構成でStorybookの7系を入れる時に下記のいれずかのエラーが出た場合の解消方法。 TypeError: Invalid Version: null TypeError: (0 , import_vite.createFilter) is not a function Failed to fetch dynamically imported module: http:// localhost:6006/src/stories/Button.stories.ts パッケ
Vite + React で path alias を使いたい！ - かもメモ
前回までのあらすじ npm create vite コマンドでサクッと Vite + React (TypeScript) のプロジェクトが作れました！ SPA はファイルがたくさんになるので import の際に ../../../ HELL になりがちです。これを回避するためにパスエイリアス(path alias)を設定しておきたいお気持ちに溢れます。 結論: vite-tsconfig-paths を使えば楽ちん vite-tsconfig-pathsを使えば tsconfig.json にパスエイリアス設定を作成するだけで済む。 $ npm i -D vite-tsconfig-paths vite.config.ts import { defineConfig } from 'vite' + import tsconfigPaths from 'vite-tsconfig-pat
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vitest
Vite Plugin PWA
2022年に起きたフロントエンドの変化
