JestでTypeScriptを高速化する | miyauci.me
JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場
Node.js ES2015/ES6, ES2016 and ES2017 support
"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
@babel/preset-typescriptを使ってTypeScriptを変換する - Qiita
はじめに @babel/preset-typescriptというBabelのプリセットが出て以来、tscコマンドではなくBabelによって、TypeScriptで書いたコードをJavaScriptに変換できるようになりました。既にtscコマンドを日常的に使いながらTypeScriptを書いている人には影響はないですが、これからTypeScriptで書いてみようという人（かつ、既にBabelに慣れている人）にとっては、TypeScriptとの付き合い方の選択肢が増えたことになります。 この記事では、Babelでできるようになった事の範疇や、今まで通りにtscコマンドに担ってもらう事について、設定例を交えながら整理していきます。 前提として、Babelのバージョンは7が対象です。 @babel/preset-typescriptが出る前は 大まかに示すと、TypeScriptでコードを書く際は
Next.jsとテストの話 - dachi
#アドベントカレンダー Next.js Advent Calendar 2019 8日目の記事です。 Scrapboxは使い勝手がよくてなんでも書きたくなってしまいますね、個人ブログが全く息をしていない・・・。 Next.js初心者な私がNext.jsでええ感じにテストできるように設定するために直面した問題や疑問などを書きます。 テスト関連のまとまった情報がなかったので今後もここに都度まとめていって便利なメモにしていく予定です。 Jestを入れたい Next.jsでテストしたーい！と思ってJestを入れようとしたらハマった話を書きます。 ts-jestとbabel-jestの役割の違いに気づかず、頭が混乱してしまいました。 Next.jsに限らずな問題ですがNext.js触ってる時にハマったところだったので書いておきます。 あと、当たり前ですがドキュメントはちゃんと読まないとダメですね (
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル - Qiita
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル環境構築TypeScriptライブラリReact TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストール
webpackのTree Shakingを理解して不要なコードがバンドルされるのを防ぐ - Qiita
はじめに webpack の Tree Shaking に関する備忘録です。以下を目的とした記事になります。 Tree Shaking とは何か、なぜ Tree Shaking をするのかを理解する webpack を利用して Tree Shaking するためにはどうすれば良いのかを理解する Tree Shaking 以外の「デッドコードをバンドルさせない」ための手段を理解する 解説に利用しているコードの最終形態は GitHub 上にあります（hira777/webpack-tree-shaking-example）。 webpack を理解していることを前提とした記事ですので、基礎知識を習得したい方は webpack 4 入門をご覧ください。 Tree Shaking とは webpack などでファイルをバンドルする際に、デッドコード（利用されていない不要なコード）を除去してファイル
ビルド設定編: UA に応じた最適な JS バンドルの配信と webpack との距離感（新規開発のメモ書きシリーズ2）
たくさんある道具をどのように組み合わせるか 今回はコード設計編のつもりでしたが、ビルド周りを先にまとめることにしました。主にパフォーマンス上の都合ですが、心がけたポイントは次の点です。 画一的なバンドルではなく、適切なバンドルを選択的に配信できるようにする 適当な粒度で Code Splitting できるようにする ひとつのツールに何でもかんでもやらせない（ webpack、お前のことだよ！） ビルドのパイプラインを短く、シンプルに済ませる（できることを全てやろうとしない） タスクランナーは前回述べた通り make を利用しています。同僚が使っているのを見てパクりましたが Self-Documented Makefile の手法が、タスク名忘れに優しくてよかったです。 npm run したら npm scripts が一覧で出てくるのと似たようなやつです。 このシリーズの他の記事はこちら
今更のバベる。 Babel 7を試してみたメモ - かもメモ
BabelやWebpackとかを業務で使う機会がなくて、なんとなくな感じだったので自分の手動かして設定しながら試してみました。Babel 7になっていて検索で出てくる情報だとうまく行かなかったり試行錯誤したのでメモ。 Babelとは babel + webpack の構成で合わせて説明されている場合が多いので、まずbabelとwebpackを切り分けて理解する必要がありました。 雑な理解👇 babel Babel is a JavaScript compiler Babelはjavascriptのコンパイラ。新しい書き方を古い書き方に変換できる。 webpack webpack is a static module bundler for modern JavaScript applications. webpackはモジュールバンドラ。別々のファイルに分かれてあるものの依存関係を見つけ
webpackとBabelの基本を理解する(3) ―webpackとBabel編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編― 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編―（本記事） 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackにBabelオプションを追加する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している
webpackとBabelの基本を理解する(2) ―Babel編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編― 2. webpackとBabelの基本を理解する(2) ―Babel編―（本記事） 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール Babelで最新のJS構文を環境に応じたバージョンに変換する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法
webpack, babel, node環境で例外時のスタックトレースに元ソースの場所を表示させる
問題 nodeに読み込ませるソースをwebpackとbabelでコンパイルするようにすると, エラー時のスタックトレースが at Object.eval (webpack-internal:///76:29:7) のような意味不明なものになってしまいます. これはソースマップを有効にしていても起きてしまいます. webpackのissueにも既にこの問題は報告されていましたが. SourceMap don't link to an src file but to webpack-internal:///[LINE_NUMBER] · Issue #5186 · webpack/webpack ｢source mapはブラウザが読み込むものだからnodeは取り扱わないよ｣とownerにすげなく言われています. 解決法 evanw/node-source-map-support: Adds s
webpack -> FuseBox 移行メモ - Qiita
webpackを使っていたプロジェクトをFuseBoxに移行してみました。 バンドル時間が超速くなり、バンドルファイルサイズが超小さくなりました。 webpack FuseBox package.json package.jsonの比較です。 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.23.1", "babel-eslint": "^8.0.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.22.0", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.23.0", "css-loader": "^0.28.7", "eslint": "^4.6.1", "eslint-load
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
Electron を試す 9 - Babel 変換を最小におさえつつ minify - アカベコマイリ
小ネタ。 Electron が採用している Chromium は ECMAScript 対応がかなり進んだ。よって Babel を使用しつつも変換を最小におさえたくなる。 この点について以前 babel-preset-env と minify という記事を書いたのだが uglify-js の ES2015 以降への対応は暫定版。そのため、よりよい選択肢として babel-preset-babili を試してみた。その記事のコメントで mysticatea さんが提案されているように Browserify へ -g オプションをつければ node_modules 部分も含めて minify 可能だが、それでも Browserify の Bundle 処理は minify されない。 よって uglify-js harmony 版が正式リリースされるのを待っていたところ uglify-es が
英語資料を読むのが面倒な人のためのwebpack 2移行ガイド - Qiita
2017年1月に、ようやくwebpack 2のリリースからbeta/rcが外れ、正式にリリースとなりました。 これによってnpm installでデフォルトに入るバージョンが2系となり、誰でも気軽に強力な追加機能のメリットを享受できるようになった一方、メジャーバージョンアップによる破壊的変更が加えられたことによって、従来のwebpack.config.jsは動作しない形となりました。 今回はまだまだ日本語の移行資料が少ないwebpack 2について、新しい機能と、1.xからの移行の方法を簡単にご紹介いたします。 webpack 2の機能 webpackも2系になっていくつかの機能が追加されました。小さなものから、比較的大きなものまで様々ですが、今回は影響の大きそうなものをいくつかご紹介いたします。 import/exportの標準対応 webpack 2では、import/export構文
Transpile Async Await proposal with Babel.js?
Babel v6 As of Babel v6, Babel doesn't contain any transformers itself anymore. You have to explicitly specify any feature you want to transform. Presets - non ES2015 environment The quickest way to get this working is to use presets which already contain the set of plugins needed to transform ES2015 and newer proposals. For async, you will need the es2015 and es2017 presets and the runtime plugin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Better Next.js Imports
package.jsonのdevDependenciesから.babelrcを自動生成する - Qiita
Compile asyn/await to es5 with babel js