ViteでVueコンポーネントテスト用のカスタム属性を削除する
はじめに お久しぶりです、からころです。 突然ですが、みなさん Vite は利用してますか？ Vitest や Jest をはじめ、Vueでコンポーネントのテストをする際に、 しばしばテスト用にカスタム属性を用意することがあります。 テスト属性がバンドルされてプロダクション環境に出てくると、 意図しない挙動を引き起こしたりするかもしれないから避けたい！ そもそもテストタグを追加するだけなのにビルド後のコードに変更が加わるのは気持ち悪い! といった方に向けた記事になります。 設定について nuxt.config.tsの場合 { ... // 下記を追加する vue: { compilerOptions: { nodeTransforms: [ (node) => { if (node.type === 1 /* NodeTypes.ELEMENT */) { for (let i = 0;
Vue / Vite 関連ライブラリー名の読み方 2024
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
viteがなぜESBuildとrollupを使うのか等.md
viteがなぜESBuildとrollupを使うのか等.md viteがなぜESBuildとrollupを使うのか等.md ※この記事はWIPです。また単なる調査した結果なのでこれをきっかけにご自身で調査することをお勧めします rollupとviteの関係をまとめる viteはdev build時にESBuildを使っている viteはproduction build時にrollupを使っている 2つがなぜ分かれているかというと それぞれのシーンで求められている仕事に違いがあるため dev時 dev時はすぐに修正を更新しなくてはいけないため、ESbuildは素早くトランスパイルしてブラウザが持つNative ES Moduleにわたし、ESModuleは高速に依存関係を動的に解決していく。viteはすべての依存をESModuleにして一度すべての依存をbuildして.viteないのキャッシ
Viteを利用したテストツールVitestの利用を始める - Qiita
はじめに Viteのバージョン4.0の公開をアナウンスするブログでVitestについて言及されていました。 Vitest adoption is exploding, it will soon represent half of Vite's npm downloads. Nx is also investing in the ecosystem, and officially supports Vite. Vitestの採用は爆発的に増えており、まもなくViteのnpmダウンロードの半分を占めるようになるでしょう。Nxもエコシステムに投資しており、Viteを公式にサポートしています。(DeepLによる翻訳) これまではJavaScript、TypeScriptにおけるテストツールとしてはJestという成熟したツールがあるので、Vitestを利用するのは趣味だったり少し先の未来だろうと考え
Vue Fes Japan 2023 を開催しました！｜kazupon
こんにちは！Vue.js 日本ユーザーグループ代表の kazupon です。 2023年10月28日(土)に中野セントラルパークカンファレンスでVue Fes Japan 2023を開催しました。 去年2022年はオンラインカンファレンス開催でしたが、今年2023年は COVID-19 が落ち着き、初開催した2018年より5年ぶりに日本でようやくオフラインカンファレンスを開催することができました。 当日多くの方に参加頂き、1日のカンファレンスを通して盛り上がりました。 協賛して頂いた各社、団体、個人スポンサーの皆様、スピーカーの皆さん、そして参加された皆さん、本当にありがとうございました。 カンファレンス開催から1ヶ月以上経ってしまいましたが、改めてカンファレンスを振り返ってみたいと思います。 レポート今年のカンファレンス参加状況ですが以下になりました。 全参加者数: 587名 一般参加者
VueFes Japan 2023イベントレポート | gihyo.jp
10月28日に開催された「VueFes Japan 2023」のイベントレポートをダイジェストでお届けします。 なお、公式サイトのタイムテーブル内に、一部の講演の資料がアップロードされています。 オープニング 実行委員長・ユーザーグループ代表の川口和也氏から、挨拶がありました。 今回は4トラックでスピーカーは35名、コアチームの来日など充実した内容になっています。またオフラインでの開催は5年ぶりです（台風やコロナの影響で、2018年以来です）。 川口氏は、フェイス・トゥ・フェイスで開催できる嬉しさやスポンサーへの感謝を述べました。 Evan You氏によるキーノート 基調講演はVue.jsの作者であるEvan You氏。広い会場で立ち見もでるほどの盛況でした。Evan You氏は、台風やコロナで日本に来れなかったため、久々の来日とのことです。 Evan You氏はVue.jsとVite
VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利
// props を持たないファイル名と同名のコンポーネント export default function Sub(props: {name: string}) { return <h1 className="flex"> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click {props.name} </button> </h1> } // ここが render される export const __PREVIEW__ = () => { return <Sub name="dummy" /> } 他にも .svelte や .html にも対応してる。対応パターンは以下。 注意点として、 dynamic import が絡むとプレビューに失敗する。
Vite Plugin Node で Vite を Node.js Webアプリケーションの開発でも利用する - Webdelog
Vite で Node.js Webアプリケーションの開発を行えるようにするためのメモ書きです。 やりたかったこと Node.js Webアプリケーション開発でも TypeScript で型の恩恵を受けたい 開発時にサーバーを立ち上げたら、コードを修正する度にビルド -> サーバーを立ち上げ直すことなく動作確認できるようにしたい 前提 Vite のインストール方法についてはこの記事では取り扱いません。 以下は Vite がすでにインストールされている前提で進めています。 Vite Plugin Node を導入する 今回は vite-plugin-node を利用しました。 github.com Vite Plugin Node の特徴 Vite Plugin Node の README には以下の機能が紹介されています。 Node server の開発で HMR を利用できる (hot
Viteベースの高速テスティングフレームワークVitestを使ってみる | 豆蔵デベロッパーサイト
現在JavaScriptのスタンダードなテスティングフレームワークと言えば、Jestかと思います。 Jestはそれ単体でテストランナー、マッチャーからモックまでテストに関する一通りの機能を網羅する万能なフレームワークです。 とはいえ、プロダクトがある程度の規模になってくるとテスト実行時間に不満を持っている方もいるかもしれません。 今回はJestに代わる新しいテスティングフレームワークのVitestを試してみたいと思います。 VitestはWebpackに代わる高速ビルドツールのViteを基盤としています[1]。 Viteのパイプラインとして実行されますので、テストも高速になるはずです。 Vitestの公式サイトでも、Blazing Fast Unit Test Frameworkと宣伝してるところからも期待できそうです。 また、API自体もJestと互換性を保つように設計されていますので、
Vue2系からVue3系に移行しました〜！ - Link and Motivation Developers' Blog
こんにちは！リンクアンドモチベーションでフロントエンドの開発をしています。岡田（@okadaike）です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります！！ 今回はプロダクトチームの中で色々と試行錯誤して進めました！ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました！。 最後に残りの２つの移行計画もまとめようと思います！ Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います！ ※余談ですが先日Vue.js v-tokyo meetup#16に参加してきました。その中で世界のアクティブVueユーザーの内6~7割はVue2を利用していると伺いました。 今年のこれからはVueのmigration祭りに
Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ
こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。 今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。 まとめ ビルド時間が長いことが課題で移行を行い、結果として開発体験・デプロイ時間等が大幅に改善されました。 開発環境のみの移行 → フィーチャートグルでの本番試験 → リリース → Webpack の廃止と、移行は段階的に進めました。 なぜ Webpack をやめたのか 一番はやはり、ビルド時間の遅さです。 今回、当時の環境を再現することが難しく、改めて計測はできなかったのですが、本番用のビルドはおおよそ3~4分、開発環境での watch ビルドで変更が反映 (HMR)
vite で最高の開発体験を手に入れる - pixiv inside
どうも、ピクシブでフロントエンドエンジニアをやっている @uzimaru0000 です。 今回は、vite を使ったプロダクト開発をしたのでそれの知見を共有したいと思います。 なぜ vite なのか 弊社のプロダクトのフロントエンドではモジュールバンドラーに webpack を利用しているケースが多いのですが、vite を使う選択をしました。 理由としては以下のような点があります。 開発サーバーがとても速い 設定ファイルがwebpackほど複雑じゃない vite の特筆すべき特徴として開発サーバーがとても速いというものがあります。 これは、依存のあるモジュールをネイティブ ES モジュールとして読み込むようにすることで必要最低限のバンドルで済むようにしているためコードの変更がとても速く反映されます。 フロントエンドエンジニアが僕一人であったというのもあり、開発速度を早めるために vite
create-vue で学ぶ tsconfig.json
概要 本記事は、 Vue.js の公式ツールである create-vue によって生成された tsconfig.json を元に、 Vue 3 + TypeScript における、 tsconfig のベストプラクティスを理解しようという内容です。 注意事項 筆者自身はまだまだ Vue 及び TypeScript の理解が不十分であり、誤った解釈を含んでいる可能性があるのでご注意ください。 なにか間違いなどにお気付きの場合は、コメントまたは GitHub での編集提案を頂けると幸いです。 create-vue について create-vue は、Vite ベースの Vue プロジェクトを CLI から構築できるツールです。 上記のようなコマンドから、対話形式の質問に解答することで、ビルド設定から周辺ライブラリの追加、テストやリンター、フォーマッターのセットアップまで行ってくれます。 本記事
GitHub - import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ViteConf 2024 Replay
バックエンドとの統合 | Vite
State of Vite (ViteConf 2023)
Vitest | IntelliJ IDEA ドキュメント
sentry-javascript-bundler-plugins/packages/vite-plugin at main · getsentry/sentry-javascript-bundler-plugins
viteでバンドル時にeslintを実行させるための設定