babel-plugin-external-helpers について - 備忘録β版
rollup の babel 用プラグインである rollup-plugin-babel の README に， npm install --save-dev babel-preset-es2015 babel-plugin-external-helpers という記載があります． babel-preset-es2015 はよく目にしますが，babel-plugin-external-helpers は初めて見たため，どういうものか調べてみました． babel-plugin-external-helpers babel-plugin-external-helpers は，babel での変換時に各ファイルごとに出力される共通コードを，グローバル変数を用いて1つにまとめることで，重複するコード出力を削減するプラグインです． 以下の2つのファイルを babel で変換する場合を例として，出力の
rollup.js と babel で script タグと npm 両対応のライブラリを作った話 - Qiita
rollup.js を用いて <script> と npm 両対応のライブラリ smart-dropdown-menu を作成しました。 smart-dropdown-menu ドロップダウンメニューを作成するためのライブラリです。 大きな特徴として、mousemove イベントを利用せず、カーソルの斜め移動時（サブメニューへの移動等）に、ホバー判定を継続する処理が入っています。 smart-dropdown-menu の仕組みについては、以下のブログ記事で解説しています。 ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作った - 備忘録β版 rollup.js による <script> と npm 両対応 初めは browserify を用いていたのですが、rollup.js は出力形式に umd を指定できることから、<script> による読み込みと
Modular JavaScript , CommonJs, AMD, UMD について – Supertrue
JavaScript でのモジュールの定義について。 CommonJS, AMD, UMD 各フォーマットの覚書き。 CommonJs CommonJSでは、サーバ上などのブラウザ外で利用する際のモジュール定義について、簡潔なAPIが規定されてます。AMDとは異なり、IO、ファイルシステム、promiseなど、より広範な概念を扱います。 CommonJSのモジュールとは、利用可能な特定のオブジェクトをそれに依存する任意のコードにエクスポートする再利用可能なJavaScriptコードです。AMDとは異なり、通常そのようなモジュールには関数ラッパーはありません。（そのため 例えば define はありません） // js/foo.js exports = function() { // モジュールの定義 return { add: function(a, b) { return a + b;
webpackとRollup：似て非なるもの | POSTD
先日、Facebookは 膨大なプルリクエスト をReactにマージして、既存のビルドシステムを Rollup ベースのシステムに移行しました。 その結果 、 何人もの人々 から「なぜwebpackではなくRollupを選んだのか」という質問が寄せられました。 これは、もっともな疑問でしょう。 webpack は、近年JavaScriptコミュニティで最も評価されているツールの1つです。毎月のダウンロード数は何百万件にもおよび、何万個ものウェブサイトやアプリケーションに使用されています。巨大なエコシステムがあり、コントリビュータも多くいます。さらにオープンソースプロジェクトとしては珍しく、 かなりの寄付金 が集まっています。 それに比べるとRollupは小規模です。しかしReact以外にも、Vue、Ember、Preact、D3、Three.js、Momentなど、数々の有名なライブラリに
開発効率向上 tips vol.1 -ターミナル・シェル編- - ryota-ka's blog
この記事は以下のページに移転しました． blog.ryota-ka.me 最近弊社でも大学生のエンジニアインターンが増えてきて，彼らの成長のために，開発にあたっての知見を効率的に共有する手段を色々と模索している．こういった知見は再利用性も高く，社内に閉じている必要もまったくないので，こうしてブログに書き溜めていくことにしてみようかと思う．第一弾として，端末エミュレータ上でのオペレーションの効率化について記す． ソフトウェアの開発をやっていると，なんだかんだで端末エミュレータというインタフェースの上で，シェルを使ってオペレーションを行うことが多い．開発に用いるマシンの OS はたいてい macOS か Linux の何かしらのディストリビューション (Ubuntu が多いか？) だし，プロダクション環境での運用は Linux を前提することが多いだろう．また，Docker の普及により，Li
【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選 | TechAcademyマガジン
【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選 フリーで使えるjQueryのプラグインをまとめています。jQueryは初心者でも扱いやすく最も普及しているJavaScriptのライブラリです。Webサイトの印象も大きく変わるプラグインばかりなので、ぜひ使ってみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事
Draggable JS – JavaScript drag and drop library
BasicsDraggable is a modular drag & drop library, allowing you to start small and build up with the features you need. At its most basic, Draggable gives you drag & drop functionality, fast DOM reordering, accessible markup, and a bundle of events to grab on to. SwappableThe classic switcheroo. Drag one element over another and watch them trade places in the DOM. The ideal functionality for when l
JavaScriptで文字列の有無を調べるには....contains 関数を作るべし。 - Qiita
はじめに JavaScriptで文字列の有無を調べるにはindexOfではなくtestを使う | iwb.jp という、謎タイトルの記事をみました。 なんだか、indexOfより、testの方が、可読性が高いらしい... いやいやそれは無いわー うーん、なんかJS界隈では有名なブログっぽい気がする。何回か見たことある。 しかし、これは、ちょっと同意できないな。 indexOfは、たいていどんな言語でもindexOfとして作られているのだから、可読性は低くない。というか、自分にとっては、読みやすい。 むしろ正規表現パターンを記載するほうが、めんどくさいし、読みにくいわ.... 極力、正規表現は自分のプログラムに入れ込みたくない。Perlしかない時代じゃあるまいし....正規表現を使いたいときは明示的に正規表現を使います。って場面だけで使う。これ鉄則ですわ。 これって、可読性低くないかなあ。
高度で複雑なWebアニメーションが自在に作れる！GreenSockプラグイン5つ
FlashライクなWebアニメーションを実現するJavaScriptライブラリー「GreenSock」。イラストからテキストまで、思い通りのアニメーションを作成できる便利なプラグインを紹介します。 GreenSockのプラグインをいくつか紹介します。 紹介するプラグイン ベジェ曲線パスに沿ってプロパティをアニメーションする「BezierPlugin」 画面上で要素をドラッグできるGSAPの「Draggable」ユーティリティと、要素を滑らかに動かしてスムーズに停止させる「ThrowPropsPlugin」 SVGストロークを動的に描画する「DrawSVGPlugin」 パスのポイント数が異なっていても任意のSVGパスを別のパスにモーフィングできる「MorphSVGPlugin」 おもしろいテキストアニメーションエフェクトを実現する「SplitText」ユーティリティ このチュートリアルを最
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ms
anyenvとnodenvでNode.jsのバージョン管理をしよう！
GitHub - nodenv/nodenv-npm-migrate: Migrate npm packages from one Node version to another
画像の最適化 | Web | Google Developers