Native ESM + TypeScript 拡張子問題: 歯にものが挟まったようなスッキリしない書き流し
Node.jsのNative ESM対応は夢の機能ですが、夢を詰め込みすぎたせいかCJSからの移行を難しくしているポイントが依然として存在します。そのひとつが拡張子問題で、Node.jsのNative ESMではモジュールの拡張子を明示しなければいけなくなりました。 (これはWebブラウザの挙動に近づけるための判断だと考えられます。) 特にTypeScriptと他のツール (JestやWebpack) と組み合わせて利用している状態でのNative ESM化は実質的に未解決の状態だと言えます。本稿ではこの現状についてできる範囲で状況説明を試みます。 Node.jsの拡張子の扱い Node.jsはCJSとESMの2つのモジュールフォーマットをサポートしていますが、これらは単にパーサーが異なるだけではなく、実質的には「2種類の異なるモジュールシステムがFFIで繋がっている」程度には隔たりがあり
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
今あえてTypeScriptのビルド＆バンドルツールを探してみる | フューチャー技術ブログ
ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています。基本的にこれらのウェブフロントエンドを開発するときには、小規模・中規模ぐらいならあんまり気にしなくておまかせでもいいと思います。 今回は、それらのフレームワーク固有のビルドツールとは別に環境を作りたい人で、TypeScriptの環境が欲しい、ウェブの開発がしたい、という前提でいろいろ探してみました。 今回試してみたのは次の4つです。 Parcel Fusebox ncc Rome.js JavaScriptのビルドツールとはJavaScriptでビル
2行でwebpack.config.jsで補完を効かせる方法 - Qiita
まず前提として、webpack.config.jsそのものをTypeScriptで書くことができる。公式ドキュメントにも記載があり、ts化自体は数分で終わる。しかし、このwebpack.config.jsをStoryBookの設定から参照するなど他のツールから読まれるときにTypeScriptだと不都合な場合がある。そのようなときに、この方法を使うと1分もかからず補完の効く環境を用意できる。便利なので是非導入してほしい。 Configuration Languages | webpack How 方法は簡単で、@types/webpackをインストールし、上の動画のようにコメントを書くだけ。
React Native for WebとExpoを組み合わせてピコピコさせてみたよ - Qiita
なかざんです。ウォーターセルという新潟の会社でアグリノートという農業向けアプリを作っています。 業務で使う構成のPoCとして、Webとモバイルネイティブの両方で動く、React Nativeのサンプルプロジェクトを作ってみたので、そこで得られた知見をご紹介します。 つくったもの 私たちが愛してやまないJetBrains製IDEのアイコンとボタンを並べて、ボタンを押すと製品ページに行けるアプリです。押したときにはピコッと鳴ります。 ソースコードはこちら。 https://github.com/Nkzn/react-native-multi-target-sample ネイティブ版はこんな感じです。 Webアプリ版はこんな感じ。 見てもらったほうが早い 今回は実物を触ってもらいやすい環境が作れたので、実際に触ってみたほうが雰囲気がつかみやすいと思います。 ネイティブ版 ネイティブ版はExpoで
今時のフロントエンド開発2017 (1. 愚痴編) - Qiita
良いものを書きたいので指摘などは大歓迎です。 その際はコメントや編集リクエストをいただければ修正します。 大きな変更が加わるときは通知すると思います。 はじめに これまでのフロントエンドの開発には多くの問題や面倒ごとを抱えています。 その解決手段としてよくビルドツールやaltJSといったワードを目にしますが，これらがどういった目的で利用されているのかについて触れながら進めていきます。 主にパッケージ管理やビルドツールを初めて見る人向けになっているので全編通すとそれなりに長いです。 動かすまでが長めになっていますが理解してしまえば本当に必要な手順はさほど多くありません。 実際に開発を始めるために必要な準備はせいぜい1~2つのファイルを記述してコマンドを数回叩く程度なので，過度な抵抗感を持たずに読んでいただけたらなと思います。 登場するツールや技術は多くの問題を解決してくれますが，これらは飽く
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
