webpack のコード分割の初歩 - 30歳からのプログラミング
JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、バンドルせずに公開してしまうとパフォーマンスに悪影響を与える可能性がある。 numb86-tech.hatenablog.com ファイル数が増えれば増えるほど影響は深刻になるため、依存関係が深いライブラリを使っている場合などは、レイテンシが飛躍的に増加してしまう。 そのため、バンドルせずに公開するのは現実的ではない。 バンドルしてひとつのファイルにまとめてしまえば、JavaScript のダウンロードは一度で済む。 しかしそうすると今度は、バンドルファイルの肥大化という問題が発生する。 巨大なフ
作って理解する Babel プラグイン - Techtouch Developers Blog
エンジニアの伊藤です。 ようやく梅雨が開けたと思ったらすでに立秋。残暑は残るどころか日に日に増している感じさえあります… 🥵 。 この記事では、普段の開発で非常にお世話になっているツール Babel のプラグインを作成する方法と、Babel プラグインの例としての処理時間を計測するプロファイラを紹介します。Babel プラグインに踏み込んでいきたいのですが、理解を助けるためにまず Babel が何をするツールなのかから説明します。 Babelとは Babel の処理の流れ AST (Abstract Syntax Tree) Babel プラグイン Babel プラグイン プロジェクト最小構成 Hello World 「プロファイラ」で何をするのか まとめ Babel プラグイン開発に参考になったサイト おまけ Babelとは フロントエンドの開発を行っている方にはお馴染みな Babel
JavaScriptとTypeScriptを共存させ、段階的に移行する方法
某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。 TypeScriptに移行して、型に守られたい！ ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。 ということでJavaScriptとTypeScriptを共存させる方法をまとめる。 環境は以下のとおり。 webpack@4.0.1 webpack-cli@2.0.9 webpack v3系の場合は不要 typescript@2.7.2 ts-loader@4.0.0 ※ あとでbabel-loaderについて追記予定です！ → 2018/03/23 追記しました 移行前の状態 極小サンプルを使って紹介する。 // src/main.js import { add } from './module' const result
TypeScript で複数のモジュールをまとめて export, import する
TypeScript を使って Node.js のアプリを開発していると、だんだんモジュールの数が増えていき、export, import 文が長くなったり冗長な感じになったりします。また、プロジェクト全体の共通機能をまとめてモジュール化する仕組みを考えたりと、モジュールの構成をどうするかについては常々悩ましいところがあります。 この記事では、モジュール構成のリファクタリングに使えるre-exportsとそれを import する方法について紹介します。元々は ES Modules の仕様なので、Interface など TypeScript の機能を除き JS でも同じく使える仕組みになります。 ※ただし、ES Modules の構文（JS）をそのまま Node.js 上で実行する場合は mjs 拡張子の使用・実験フラグ付きの起動が必要になり、詳細については割愛させていただきます。 ex
Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する | nansystem
# Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する @babel/polyfill (opens new window)のページにBabel 7.4.0から非推奨になったと書かれている。 As of Babel 7.4.0, this package has been deprecated この記事ではwebpack4でBabel7.4を使った環境構築の方法を記載する。 # 環境構築 # インストール @babel/polyfillではなくcore-jsとregenerator-runtimeをインストールしているのがポイント。 Polyfillはcore-jsにまとめられており、async-awaitを動かすにはregenerator-runtimeが別で必要になる。 そのほか、BabelやWebpackでビルドするために必
@babel/polyfill と core-js : (*x).b=z->a+y/c
◆ @babel/polyfill は deprecated になってた ◆ 代替は core-js と regenerator-runtime のインポート ◆ core-js だとモジュールごとにロードできるので IE が消えれば 最低限の polyfill のみにできて効率よさそう @babel/polyfill が deprecated になってたES2015+ のバンドル時に IE 用に @babel/polyfill を使ってたのですが 7.4 から deprecated になってたようです https://babeljs.io/docs/en/babel-polyfill 大きく赤色で警告っぽい見た目じゃなかったので ドキュメントは一応見てたはずなのにスルーしてしまっていました 変わった理由は core-js の方に書いてます https://github.com/zloir
ライブラリ開発のための環境設定 — 仕事ですぐに使えるTypeScript ドキュメント
module.exports = { module: { rules: [ { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ } ] } }; なお、ライブラリの場合は特別な場合を除いてBabelもwebpackもいりません。CommonJS形式で出しておけば、Node.jsで実行するだけなら問題ありませんし、基本的にwebpackとかrollup.jsとかのバンドラーを使って1ファイルにまとめるのは、最終的なアプリケーション作成者の責務となります。特別な場合というのは、Babelプラグインで加工が必要なJSS in JSとかですが、ここでは一旦おいておきます。ただし、JSXはTypeScriptの処理系自身で処理できるので不要です。 TypeScriptユーザーがライブラリを使う場合、バンドルされていない場合は @
今更のバベる。 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はモジュールバンドラ。別々のファイルに分かれてあるものの依存関係を見つけ
Babel7でTypeScriptをパースする | きるこの日記帳
「ES6 + SCSS 環境を作っとく」という記事を書きながら環境構築していたら、 Babel のバージョンが 7.0.0 になっていた。 ついに正式リリース、なんとなく聞いてはいたけど、すっかり忘れてた…。 とりあえず TypeScript のパースを試してみた。 Node 8.8.1 yarn 1.2.1 tsc 1.5.3 での動作を確認。 ほとんどMicrosoft のブログをなぞっているだけな気がした。 インストール 今度から「@babel/なんちゃら」という形式になる。 yarn init yarn add @babel/core @babel/cli typescript @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-propos
npm を TypeScript で実装する - アカベコマイリ
自作 npm xlsx-extractor を JavaScript から TypeScript へ移行した際の覚書。はじめて npm 開発した時の npm icon-gen v1.0.0 release を踏まえて、新規 npm を TypeScript で実装する場合の入門記事として機能することを考慮しながら書く。 パッケージ仕様と開発方針 開発対象となる xlsx-extractor の仕様と開発方針をまとめる。 仕様 Excel ファイル (*.xlsx 形式) を解析してシート情報とセルを取得する 空のセルは詰めずに最大の列と行で埋める Excel 上のセル座標を維持する 例えば B7 に値がある場合、0 開始の座標で B = 1 7 = 6 として常に [1][6] で取得可能とする インターフェースは Node.js 用と CLI の 2 種類へ対応 CLI は標準出力にシー
Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法
Babel7.4.0 から、長いことお世話になってきた @babel/polyfill が非推奨となりました。加えて、@babel/preset-env と @babel/ransform-runtime が core-js@3 に対応したようです🎉 これらに伴いpolyfill周りの設定方法が変わったので、その内容をメモしておこうと思います。 Babel と core-js の関係のおさらい これからのpolyfill設定方法 1. preset-env と useBuiltIns:usage で必要なpolyfillだけ読み込む方法 2. preset-env と useBuiltIns:entry で全polyfillを読み込む方法 3. transform-runtime を使う方法 Proposal の使い方 参考 Babel と core-js の関係のおさらい Babelが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Setting up Babel and TypeScript
GitHub - microsoft/TypeScript-Babel-Starter: A sample setup using Babel CLI to build TypeScript code, and using TypeScript for type-checking.