静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン
Viteで従来型静的サイトの開発環境を構築するためにプラグインをたくさん作った - Qiita
Vite V4に対応しました (2022-12-24) Rollup 3 の破壊的変更の影響で vite-plugin-imagemin-cache のディレクトリ構造再現オプションが廃止されました 概要 ソースの物量に関わらず瞬時に起動する開発サーバに惹かれて Vite を古典的な従来型静的Webサイトの開発環境に利用しようとしたものの、今時のSPA/MPAがターゲットのためそのようなナレッジもプラグインもほぼほぼ存在せず、「なければ作ればいい」を地で行く羽目になった、というオチ。 Pug+SCSS+TypeScriptとimageminを使用して基本的な従来型静的サイトの制作要件に対応するため、以下のプラグインを作成した。 Pugを静的HTMLとして配信・出力する vite-plugin-pug-static プラグイン ビルド対象をglobパターンで取得する vite-plugin-
【詳細版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る | Web production note
※本記事はejsを利用していません。 代わりにHTMLファイルをejsと同等の機能を追加する（ハンドルバー化する）プラグイン vite-plugin-handlebars を利用しています。ejsは以下プラグイン vite-plugin-ejs を利用すると実装できるようです。 github.com GitHub – trapcodeio/vite-plugin-ejs: Vite: Use Ejs in your entypoints i.e index.html Vite: Use Ejs in your entypoints i.e index.html. Contribute to trapcodeio/vite-plugin-ejs …
Vike
Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin. 🔧 ControlUse any UI framework (React, Vue, Svelte, Solid, ...) and any tool you want (any frontend library, web technology, deploy environment, Vite plugin, ...). With Vike, you integrate tools manually and keep architectural control. 📦 Zero-configVike gives you control only where it matters. Everything else just works without the nee
Prettierの導入方法 - フロントエンド開発で必須のコード整形ツール - ICS MEDIA
Prettierとは、Node.js上で動作するコードフォーマッターです。本記事ではPrettierの利点と使い方を紹介します。 コードフォーマッターの必要性 複数人で開発を行っている場合、各々が自由にコードを書いてしまうと、さまざまな書き方が混在し統一性のない読みづらいコードとなってしまいます。統一されていないコードは、可読性が低くメンテナンス性が悪くなり、ミスが発生する原因となることもあります。 コードフォーマッターを利用すると、自動的に決められたコードスタイルに整形してくれるため、開発者はコードスタイルを意識することなくコーディングに集中でき、可読性の高いコードを作成できます。 Prettierを導入する利点 コードフォーマッターは、WebStormやVisual Studio Codeなどのウェブ制作のエディターにも付属していますが、これらはユーザー環境に依存します。つまり、開発者
ESLint and Prettier with Vite and Vue.js 3 - Vue School Articles
In the previous article of the "How to Structure a Large Scale Vue Application" series, we took a look at some standards that you can employ in your Vue.js application to keep your codebase predictable, easy to navigate, and understandable. Another step you can take to improve the developer experience when building a large scale application, especially with a team, is to setup some automated proce
ChatGPT (GPT4) と TDD ライクなペアプロするとどうなるか試した
はじめに ChatGPT などにプログラムコードを生成させることを考えたときに、現時点で現実的な使い方は主に以下の二通りであると考えた。 毎回コード全体を出力させて前のものを捨てる 初期バージョンのコードを出力させ、その後の変更などを人間で行う いずれの場合も生成されたコードが期待どおりであるかを検証することが重要となるだろうと考えた。 したがって、人間がテストコードを記述し、それに適合するコードを出力させ、テストスイートに合格するかどうかで適切なコードが出力されたかを判断する。というシナリオが有用そうだと考えた。 場合によってはそのテストコード自体も機械に出力させ、人間がレビューするというシナリオもあるだろう。 今回は TODO MVC を対象に、段階的にテストコードを与えたときにどのようなやり取りになるかを確認した。 また、最初からテストスイート全体を渡してどのようになるかも確認したが
ViteとEleventyで静的サイト構築 | EvoLab.
先日発表されたThe State of JavaScript 2021では98%の満足度を獲得しエンジニアからの高い注目度がうかがえるViteですが、ビルドツールのため静的なページの生成には別途仕組みが必要になるかと思います。 公式のテンプレートにはVueやReactなどがサポートされていますが、これらは学習コストやプロジェクトの要件にもより気軽に導入できるものではないかもしれません。 そこで今回はページの生成に静的サイトジェネレーターのEleventy（以下、11ty）を利用し、Viteの高速な開発体験の恩恵を受けつつ11tyでページを生成するシンプルな静的サイトの開発環境を作ってみたいと思います。 ※11tyについての記事はこちら （バージョンが記事公開時より更新されていますので利用の際は公式ドキュメントをご確認ください） 環境Node.js: v16.12.0 ※Viteの利用には1
minista
minista（ミニスタ）は静的サイト制作に特化したツールです。Viteのモダンな開発環境でJSXを書いて納品向きの綺麗なHTMLとアセットを出力。100%静的でサーバーに依存しません。 import { Head } from "minista" import MyComponent from "../components/my-component.tsx" export default function ({ children }: { children: React.ReactNode }) { return ( <> <Head> <title>minista</title> <link rel="stylesheet" href="src/assets/style.css" /> <script src="src/assets/script.ts" /> </Head> <hea
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
【Vite】 Vue3.0もReactも！ノーバンドルなビルドツール「Vite」を試してみる - Qiita
最近猛烈にスターを集めているビルドツール、Viteを触ってみたので簡単に紹介します。 この記事はVite v0.19.1時点での情報です。 Viteとは？ ViteはVue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。 ネイティブのESモジュールのインポートを利用しバンドル不要で高速に動作するdevサーバーと、Rollup.jsをベースとしたプロダクションビルド機能を提供します。 設定不要で.vueのSFC（Single File Components）をコンパイルできて、さらにデフォルトで今開発中のVue3.0が使えます。 しかも、vue-cliのようにVue.js限定ではなく、React、Preactにも対応しています。 注意 Still experimental, but we intend to make it suitable for producti
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vite-plugin-sass-glob-import
Sharing local server doesn't work with Vite · Issue #4952 · microsoft/live-share
Vite + Vue3にESLintとPrettierを導入する
https://twitter.com/kagan_dev/status/1630625919047172097
https://twitter.com/vite_js/status/1585261680841424897
【コーダー向け】ViteでHTML（ejsライク）・Sass・JSな普通のコーディング環境を作ってみた
Webエンジニア（コーダー）向けVite環境の紹介【初心者向け解説】
Vite 3 · vitejs/vite · Discussion #7611
[Feature] Skip typescript patch on nodeLinker: node-modules · Issue #3275 · yarnpkg/berry