VisualStudioCode + gulp + browserify でブレークポイントが効かなかった問題（解決） - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
browserifyでロードされたモジュールをユーザースクリプトから読み取る - Qiita
ユーザースクリプト（もしくはブラウザ拡張）を書いていると、サイト側で定義されたクラスや関数を使いたくなることがある。しかし、サイト側がbrowserifyを利用していると、クラスや関数がbrowserifyのローダーの内部に隠蔽され、通常の方法ではアクセスできないことがある。 現在のbrowserifyの実装では、Function.prototype.callを上書きすることでモジュールを読み取ることができる。この記事ではその方法を説明する。 速習browserify browserifyの雰囲気をつかむためにとりあえず動かしてみる。 # browserifyをインストール npm init npm install browserify # foo.jsとbar.jsと、それらを読み込むmain.jsを用意する echo "module.exports = 'foo'" > foo.js
webpack.config の黒魔術をとく - Qiita
はじめに Node.js向けに書かれたJavaScriptのプログラムをブラウザ上で動作させるには require() によるモジュールの参照を解決した単一のJavaScriptファイルに変換する必要があります1。 少し前まではこの作業には Browserify が使われることが多かったようですが、現在は「画像もCSSも何でも1つにします」が売りの webpack 一色になっている感じです。ですが、この webpack、とってもわかりにくいのです。設定ファイル webpack.config.js を見たときに私は TeX や sendmail の悪夢を思い出しました2。この黒魔術3を読み解いてみましょう。 webpack の仕事 画像とかCSSとかのことはおいておくと、webpackの仕事は以下の3つになります。 複数の.jsファイルの依存関係を解決し、1つにバンドルする これが本来業務で
help wanted · Issue #5 · browserify/discuss
This thread might be a good place to list some of the issues that contributors new and old can jump in and help with. Everybody who has been added as a member of this org should be able to manage issues, push code to github, publish packages to npm, and add new members. If you would like access, please ask any existing member! There is quite a backlog of issues on the repos. Mostly this is my faul
フロントエンド開発の基本知識（2017年夏） - Qiita
10年ぶりくらいに Web 開発に再デビューしなくてはならなくなった筆者が見た、現代のフロントエンド開発の基本知識についてまとめます。フレームワークを使ったシングルページアプリケーション開発が対象です。若干の不正確には目をつむってズバリ言い切るスタイルで書いていきます。 Node.js 現代のフロントエンド開発には Node.js を使います。フロントエンド開発を強力にサポートするいくつものツールが Node.js で実装されているからです。 Web 開発で言語処理系というと、Ruby on Rails のような Web アプリケーションフレームワークを思い浮かべるかもしれません。もちろん Node.js にもそのようなフレームワークはいくつも存在しますが、フロントエンド開発で使うツールはそれとは全然関係ありません。 これらのツールを使うことによって解決するのは、以下のような要望です :
browserify から webpack に移行した話 - てくすた
はじめまして、技術推進チームの id:yszk0123 です。 ピクスタではアプリケーション開発に Ruby on Rails (以下 Rails と表記) をメインで使っていますが、最近 JavaScript (以下 JS と表記) 周りのビルドツールを browserify から webpack に移行しました。本エントリでは、webpack に移行した理由や、Sprockets との兼ね合い、最近登場した webpacker との比較について話したいと思います。具体的な導入方法については Qiita のエントリをご参照ください。 qiita.com 次のような読者が対象です。 Rails エンジニア モダンなフロントエンド環境を Rails で使いたい人 webpack と Sprockets を共存させたい人 webpacker を導入できない・導入に迷っている人 背景 Rails
webpack初級者から中級者にステップアップするために理解しておきたいプラグインまとめ - Qiita
はじめに Rails5系から、webpackerが導入され注目を集めるwebpackですが、名前聞いたことあるし、いっちょ試してみっかとHello, World!的に触って見た人は多いのではないでしょうか？ 僕も流行りに乗っかって、gulp、Browserify、Reactifyで行っていたReactのjsxのコンパイルを、webpackとbabelを用いて行うように変更したのですが、まあ、設定ファイルを作成するのが難しいわけですよ。 実際は、entryとoutputと必要ならloaderを定義するだけである程度の事はできるので、特定の目的を達成するだけなら凄くシンプルなので分かりやすいんです。関連するプラグイン豊富ですし、やれることも多いですし。 なので、厳密に言うと、関連するプラグインや設定が豊富が故に自分たちのプロダクトに合った設定ファイルを作成するのが難しいんですよね。 その設定フ
いまどきなフロントエンド開発者になる！JSのモジュール管理ってこういうこと
Browserify、Webpackなど、ここ数年耳にするようになったフロントエンド開発ツール。結局何をやってるの？ いまどきのフロントエンド開発者になるために欠かせない、JavaScriptのモジュール管理についての少し長いまとめ。 本記事はDan PrinceとRavi Kiranが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 開発者はモジュール、依存関係の管理、最新のプログラミング言語の基本的要件の動的ロードについて考えています。重要ないくつかの機能は、2015年にJavaScriptに追加されたものです。 モジュールはNode.jsで広く使われていますが、この記事ではモジュールをブラウザーで使う方法について焦点をあてていきます。少し過去を振り返り、混乱しがちな現在の状況までの歩みを紹介しながら、将来の見通
Angular 2で10万行書いた人にナマの声を聞く─奥野賢太郎×白石俊平
Angular 2で10万行書いた人にナマの声を聞く─奥野賢太郎×白石俊平 白石 俊平（HTML5 Experts.jp編集長） 2016年9月のAngular 2リリースは、2016年のWeb業界で、最も重要なトピックの一つだったと言っても過言ではないでしょう。 本稿では、Angular 2を正式リリース以前から仕事で使い倒していた奥野賢太郎さん（armorik83）と、不肖白石が、Angular 2開発を実際にやってみている同士で語り合ってみました。 実際にAngular 2開発で苦労してきた二人のナマ声です。今後Angular 2を仕事で採用しようと考えている方々には必見の内容です（って、自分が出ている記事を紹介するのも微妙ですが…）。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
Vue.js 1.x から 2.0 への移行のポイント
{ topic = [".NET", "PowerShell", "Ubuntu", "LibreOffice", "Arduino", ...] } 先日Vue.js 1.xから2.0への移行を行った。まるっと書き換えないといけないというレベルではないが、メジャーバージョンアップだなぁと感じる程には違いを感じられたのでいくつかポイントを書いておく。 もちろん、Vue.jsの機能を全て使いこなしているわけではないため、すべて網羅しているとはとても考えていないので、詳しくは「Migration from Vue 1.x」を参照してほしい。 大きな違い：テンプレートが事前コンパイルできるようになったVue 1.xと2.xの大きな違いは、テンプレートのコンパイルと実行を分離できるようになったこと。実際に移行してみた感じ、このコンパイル処理の邪魔になるようなことに関しては排除するような形で変更され
Browserify
Browserify Demos All demos on this page are self-contained and used Browserify to bundle the require()'d dependencies into a single JavaScript bundle Home Articles Canvas Splitter This demo by @hughsk uses two modules, one that creates RGB lookup tables and another that slices the color table canvas element into smaller canvases. Here is the above code running in an iframe Exploding Dots This demo
JavaScriptライブラリ/プロジェクトのファイルサイズの問題点を見つける方法 - Qiita
ブラウザ向けのJavaScriptだとファイルサイズはある程度気になると思います。 この記事では、ファイルサイズの計測方法やボトルネックとなってるライブラリの見つけ方についてできるだけ簡単な方法をまとめます。 ファイルサイズ ファイルサイズと一言にいっても、ブラウザでは大体minifyしてから配布するのでminify後のファイルサイズも重要です。 ソースコード自体のファイルサイズ minifyしたファイルサイズ minify + gzipしたファイルサイズ コメントの多いソースコードはminifyするとかなり小さくなったりすることが多いので、ソースコード自体のファイルサイズでは比較しにくいです。 また、ソースコードにおいて assert モジュールを使っているとファイルサイズが10kb弱程度minify後で変わります。 assertモジュールは通常外しても問題ないので、unassertでビ
Real World React 2 - 2016/09/27 - React Meetup #4 - Qiita
About @mizchi Qiita のフロントエンドエンジニア React勝手エヴァンジェリスト 4ヶ月で14kg痩せた (80kg => 66kg) 近況 ビジネスドメインのリファクタが主でアウトプット少ない 泥臭系の知見は溜まってる 会社のメンバーが増えた + 自分以外のフロント系の人が増えたので、設計を明示しないといけない この資料は何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料を加筆したもの 如何にしてReactを「ふつうのウェブアプリ」に導入していくか ふつうのウェブアプリ NOT SPA SPA でなくともReactは使える jQuery に支配された現代のフロントエンドを改善したい => 複雑なモジュールを局所的に解決するのにReactが有用であることを示したい フロントエンドの流れ AJAX以前(~2003)
The cost of small modules
15 Aug The cost of small modules Posted August 15, 2016 by Nolan Lawson in performance, Web. 53 Comments Update (30 Oct 2016): since I wrote this post, a bug was found in the benchmark which caused Rollup to appear slightly better than it would otherwise. However, the overall results are not substantially different (Rollup still beats Browserify and Webpack, although it’s not quite as good as Clos
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[WIP] ES modules by goto-bus-stop · Pull Request #1787 · browserify/browserify![[WIP] ES modules by goto-bus-stop · Pull Request #1787 · browserify/browserify](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa0cba9e314442523c038923846d654408b6c64e/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F604a34fe09cd9dd86fb4f70996e7cd464b7bfc06599768b190578564e03ce55d%2Fbrowserify%2Fbrowserify%2Fpull%2F1787)
GitHub - browserify/tinyify: a browserify plugin that runs various optimizations, so you don't have to install them all manually. makes your bundles tiny!
Babel、Browserify のクイックスタート2017年夏版 - Qiita
Introducing React Loadable
Browserify/WebPack時と、node.jsの実行時で読み込むファイルを変える - Qiita
