[B! JavaScript][webpack] y_yukiのブックマーク

y_yuki id:y_yuki

JavaScriptとwebpackに関するy_yukiのブックマーク (13)

Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた esbuild https://github.com/evanw/esbuild/ esbuildの特徴複数モジュールの依存関係を解決し、1つにまとめるバンドラーは、現代のフロントエンド開発においてなくてはならないツールの1つ。 The State of JavaScript 上位5つに人気が集中し、なかでもWebpackのシェアは実に約60%に達しています。今回ご紹介する「esbuild」は、Go言語で書かれた高速なバンドラーで、これらメジャーなツールとの性能比較（ベンチマークテスト）をやってみました。公式のベンチマーク結果計測方法は、three.jsライブラリを10回複製し、キャッシュなしで単一のバンドルをゼロから構築しています。なんと、Webpackに比べて
y_yuki 2020/02/19
webpack

javascript

go
リンク
フロントエンドのレベル上げ / Level up front-end skills for Rails developer
フロントエンドのレベル上げ〜Rails エンジニアが Webpacker を使う場合〜リンク付きの原稿はこちら https://github.com/ohbarye/slides/tree/master/2018/meguro.rb-15
y_yuki 2018/05/25
rails

webpack

javascript

frontend

slide

あとで読む
リンク
webpackと仲良くなろう
Transcript XFCQBDLͱ஥ྑ͘ͳΖ͏ 8F�"SF�+BWB4DSJQUFST��!��UI None XFCQBDLͱ஥ྑ͘ͳͬͯ  ͞Βʹ։ൃޮ཰Λ  ͋͛ΔΑ͏ʹͳΔͨΊͷࢿྉͰ͢ XFCQBDLͱ஥ྑ͘ͳΔલʹ  ৘ใΛݟ΍͘͢͢Δ ಛʹͳʹ΋ઃఆ͠ͳ͍৔߹ ͜ͷ··Ͱ͸ݟͮΒ͍ XFCQBDL�EBTICPSE IUUQT��HJUIVC�DPN�'PSNJEBCMF-BCT�XFCQBDL�EBTICPBSE CFGPSF BGUFS Կ͕஌ΕΔͷ͔ w� -PH��ϏϧυϓϩηεͱΤϥʔϩάͷه࿥� w� 4UBUVT��Ϗϧυϓϩηεͷεςʔλε� w� 0QFSBUJPO��ϏϧυϓϩηεͰൃੜ͢Δಛఆͷૢ࡞� w� 1SPHSFTT��Ϗϧυͷਐḿঢ়گ� w� .PEVMFT��ϞδϡʔϧϦετҰཡʹαΠζͱόϯυϧαΠζ� w� "TTFUT��Ϗϧυ
y_yuki 2018/01/25
javascript

slide

webpack
リンク
webpack 3 リリース内容まとめ - dackdive's blog
2系に上げるかどうかを悩んでいる間に 3.0.0 がリリースされてしまった。を参考にアップデート内容をメモ。概要、v2 からのマイグレーション大きな feature は Scope Hoisting と Magic Comment ぐらい。 v2 からの移行も特別な作業は必要なく、たいていはバージョン上げるだけで機能するとのこと。それでもメジャーバージョンを上げたのは内部的に breaking changes があって、いくつかのプラグインには影響しそうだったから、とのこと。ということはプラグインが動くかどうか一応確認した方がいい...？ Scope Hoisting 目玉機能その１。これまでの webpack ではモジュールを１つ１つクロージャでラップしており、それによりそれぞれのモジュールの独立性が保たれていた（関数名の衝突とか）ものの、ブラウザでの実行速度が重くなる原因に
y_yuki 2017/06/21
webpack

javascript
リンク
Vue.jsを使った大規模開発に必要なもの - Qiita
初めに正直JS界隈のエコシステムは難しいです。わからないことが目白押しです。今までVue.jsをブラウザ上でなんのエコシステムも使わずに使ってきましたが、規模が大きくなるとしんどくなるのは明らかなので Vue.jsガイド：大規模アプリケーションの構築を参考にwebpackを使ったりnpmを使って、それっぽい環境を作って一からコードを書いてみました。（編注：上記リンクはv1.0当時のものです。v2.0のガイドは単一ファイルコンポーネント、プロダクション環境への配信のヒント、ルーティング、状態管理、単体テスト、サーバサイドレンダリングなどをご覧ください。）前提 Vue.jsガイド：大規模アプリケーションの構築の指示に従い構築するだけですが、この時点で以下の様な選択肢がある模様です。プリプロセッサ？の違い Webpack(こっちだけ触ります) Browserify ルーティングオ
y_yuki 2017/04/26
JavaScript

webpack

vue.js
リンク
大規模プロダクトにおけるフロントエンドの1年間の変化 - Qiita
プロダクトに関わるエンジニアは40人近くいて、弊社ではフロントエンド/サーバーサイドといった明確な線引きがないため全員がフロントエンドに触れる機会が有りえます。開発チーム・コード共にそれなりに大規模と言えるのではないでしょうか。やったことモジュール間の依存解決もともとRailsのSprocketsに沿ってjsを書いていたため、classは全て一つのグローバル変数に格納され、全てのjsが結合された巨大なapplication.jsをロードしている状態で、メンテナビリティやパフォーマンスに大きな問題を抱えていました。そこで去年よりWebpackを導入し、各モジュールの依存関係を整理してjsファイルを適切な単位に分割するようにしました。ファイル数が多いため段階的に作業をつづけ、今年ようやく全てのファイルの依存解決が完了することができました。過渡期はWebpackとSprockets両方か
y_yuki 2016/12/20
javascript

frontend

webpack

js
リンク
WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する - Qiita
はじめにフロントエンドへスプラトゥーンを決めるために、Rails プロジェクト内で JavaScript を楽に良い感じに分離する方法を考えてみました。先人たちが様々な方法を提示してくださっていましたが、設定が大掛かりだったり、何種類かのツールを活用したりと、自分にはどうもハードルが高かったため、より簡単な方法を模索しました。 TL;DR Initial commit で、この記事でこれから行う設定をコミットしています。 necojackarc-sandbox/rails_with_webpack 特徴 Sprockets の良い所はそのまま活用導入ツールは実質 WebPack のみ設定項目が少なく簡単おそらくほぼメンテナンスフリー概要以下のような流れで、JavaScript のコーディング、ビルド、配信を行います。 frontendディレクトリ以下で JavaScript
y_yuki 2016/11/24
webpack

sprockets

rails

JavaScript
リンク
React + TypeScript + Webpackの最小構成 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
y_yuki 2016/09/26
webpack

typescript

react

javascript
リンク
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。これから始める人の手助けになれば幸いです。また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
y_yuki 2016/08/09
webpack

javascript

node.js
リンク
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークスエンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。さて今回はRailsでのフロントエンド開発についてです。昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！フロントエンドのライブラリ管理にnpmを使いたい！で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。ただ開発中のビルドがめ
y_yuki 2016/05/25
rails

javascript

sprockets

webpack
リンク
[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita
このポストは以下の記事を、筆者の許諾を得て意訳したものです。 JavaScript Modules: A Beginner’s Guide 何か誤りがありましたら、ご指摘いただけると幸いです。（以下、意訳）はしがきもしあなたがJavaScriptの初心者だとしたら、以下の言葉は全く意味の分からないものかもしれません。モジュール管理 vs モジュール読み込み Webpack vs Browserify AMD vs CommonJS 等々…。それでもJavaScriptのモジュール周りについて、苦手意識を持たないでください。モジュールに関して理解することは、Webエンジニアにとっては必須科目なのです。このポストでは、カンタンな解説とコードサンプルによって上記のようなバズワードを解説します。このポストがあなたにとってお役に立つものでありますように。注：簡素化のために、このポストは
y_yuki 2016/02/03
JavaScript

webpack

browserify

es6

CommonJS
リンク
webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
y_yuki 2015/04/06
javascript

webpack
リンク
『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログサイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。はじめまして。アメーバ事業本部クロスイノベーション室のグンタ（@gunta85）と申します。今回はフロントエンド開発用の、ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、諸々の理由でWebPackを選びました。特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
y_yuki 2014/06/27
javascript

webpack
リンク
1