Browserify/WebPack時と、node.jsの実行時で読み込むファイルを変える - Qiita
Browserifyを使うと、node.jsと同じような書き方ができて便利です。WebPackも人気ですよね。 ですが、node.jsとブラウザでは読み込ませるファイルを分けたいことがよくあります。各環境のロケールを取得するに、ブラウザだと navigator.language 変数をのぞくだけでOKです。デスクトップ環境とかサーバでは os-localeパッケージを使いたいですよね。でもos-localeパッケージをブラウザにバンドルしたくはないです。 それぞれ、次のようなファイルで同じAPIで関数を用意します。 const osLocale = require('os-locale'); module.exports = () => { return new Promise((resolve, reject) => { osLocale((err, locale) => { if (e
gulp＋Browserifyで、JavaScriptビルド／minify／watchify／livereload - CLOVER🍀
以前、gulp＋webpackで似たようなことをやったのですが、Broserifyを使った自分なりのgulpfile.jsを作っておこうかなと思いまして。 やりたいこと。 BrowserifyでJavaScriptを結合 minifyする sourcemapを作成する wachifyを使って差分コンパイル ということをやるように、npm moduleをインストールしてgulpfile.jsを書きました。 以下、発行したコマンド。 $ npm init $ npm install -g gulp $ npm install --save-dev gulp browserify gulp-load-plugins gulp-uglify gulp-sourcemaps gulp-plumber gulp-util vinyl-source-stream vinyl-buffer gulp-we
橋本商会 » coffeeからES6(babel)に少しずつ書き換える
coffee-scriptで書いていたwebアプリをES6(babel)に書きなおした。 全部を一気に書き直してハイ動いたーとやるのは無理なので、coffeeとES6のファイルが混在しても動かせるようにして、少しずつ書き直した。 書き直したのはこれ React+Fluxxor+socket.ioでfluxなチャットを作った https://github.com/shokai/node-flux-boilerplate インストール % npm install babel babelify browserify watchify -save-dev とやっていたのだが、数日前にbabelが5から6にアップデートされて、babel-coreやbabel-preset-*など色々分割されて、大分色々変わってしまった。周辺ツールも対応の過渡期だったのでbabel5系を使うようにバージョンを指定した
tejitak.com - このウェブサイトは販売用です！ - tejitak リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境
Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とは そんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使
ブラウザとサーバで全く同じjavascriptを動かそう。[gulpとbrowserify超入門] - Qiita
はじめに この記事は、 gulpも browserifyも知らない 初心者を対象にしています。 最近になってnode.jsでプログラミングしていますよって人が対象です あまりにも０ステップからで、それくらいわかるよって事もあるかもしれません。 node.jsについて、０から勉強したい人はドットインストールとか便利かもね。 gulpって？browserifyって？ まず、gulpもbrowserifyもなんのことだか、さっぱりわからないって！ でも、まだ説明しません。 なぜなら、 なんで必要？を説明していないから。 目的は ブラウザとサーバで全く同じjavascriptを動かそう 最近は、node.jsでサーバサイドjavascriptも珍しくなくなってきました。 でも、微妙に違うサーバとブラウザでのjavascript！ 特に、違うなーと感じるのは、記述する場所ですね。 本当はもっといろい
![ブラウザとサーバで全く同じjavascriptを動かそう。[gulpとbrowserify超入門] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1ff0a41ceecafa4e397802cc783f27b518beef93/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUUzJTgxJUE4JUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgxJUE3JUU1JTg1JUE4JUUzJTgxJThGJUU1JTkwJThDJUUzJTgxJTk4amF2YXNjcmlwdCVFMyU4MiU5MiVFNSU4QiU5NSVFMyU4MSU4QiVFMyU4MSU5RCVFMyU4MSU4NiVFMyU4MCU4MiU1Qmd1bHAlRTMlODElQThicm93c2VyaWZ5JUU4JUI2JTg1JUU1JTg1JUE1JUU5JTk2JTgwJTVEJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mZWU5MjYxYjk3ZjJhODU0ZWI4Yzk3ZmY2NmM3N2ZjMA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY29jb3R0ZWpzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jNzgzMDgyZmFiOThlMmMxM2QyNDYyMTY3ZmE3ZGU1Yw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D94c9deecde5a7e46e0f163c8d0a9ae18)
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
橋本商会 » watchifyでcjsxをビルド
Gruntでwatchしてbrowserifyでcjsx(coffeeで書いたReactのjsx)をビルドしてるって書いたけど WEB+DB PressのReactの記事が良かったのでcoffeeで書きなおした たくさんnpmをrequireする様になったら毎回5〜6秒かかって遅くなったので、gulpにしなければならないのか？とか思ったけどgulpのデバッグが難しすぎて挫折した。 watchifyはbrowserifyのラッパーで、ファイル更新を検知してbrowserifyしなおしてくれる。 ただ更新見てるだけだろって思ってスルーしてたんだけど、よく見たら更新されたファイルだけを変換しなおしてた。 速い。2回目のビルドから1秒弱になる。 オプション verbose指定しないとビルドした事すら表示されないので付ける。 あとはbrowserifyに付けるオプションと同じものが使えて、–debu
AngularとBrowserifyの微妙すぎる関係 - Qiita
この記事の内容はいささか、古くなってしまっているようです。投稿からしばらくして、AngularもCommonJS対応を強化して、以前よりはrequireとの相性が改善しています。ただ、筆者自身はもうAngularから離れてしまったのでキャッチアップしきれていません。 うっかりこの記事にたどり着いてしまった方は、@armorik83さんによる詳説「AngularJSモダンプラクティス」にあるCommonJS + Browserifyスタイルを好む方はの項を参照することをお勧めします。 AngularJSとBrowserify、この二人の関係、かなり微妙です。もうどうしてくれようかってくらい。例えるなら宗教の違う恋人のようなものです(適当)。CommonJSに慣れた人には、AngularのDIが正直お邪魔。かといって、Angularの根幹に関わる部分なので使わないわけにもいかないし、と距離感に
browserify + debowerify + vueifyを使ったvue.js component開発 - Qiita
この記事はVue.js Advent Calendar 2014 16日目の記事です。 みなさんはvueifyというツールをご存知でしょうか？ vueifyはvue.jsのコンポーネントをHTML/CSS/JSをコンポーネント単位で一つのファイルに記述して、モジュール管理できるbrowserifyを利用したビルドタスクです。 まだ日本ではあまり記事がなく普及していないかもしれませんが、試しに使ってみたら非常に生産性を高める可能性を秘めていることがわかりましたのでご紹介させていただきます。 今回の記事ではbrowserify + debowerify + vueifyも使ってVueコンポーネントの簡単なサンプルを作ります。 ツール まずはそれぞれのツールの紹介です。 http://browserify.org/ browserifyは既にご存知の方が多いと思います。 元々はnodejsのモジ
Front-end with Node.js - Node学園祭 2014
Node学園祭・初参加 初参加だったんですが、ビギナー＆フロントエンド向けのNode.jsツール系セッションを担当させていただきました。なんかめっちゃ緊張した･･･。 参考リンク集 1. Package manager npm Bower npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ The npm Blog — npm and front-end packaging Npm Tips · fiveisprime npmのあまり知られてない機能 10選 - from scratch npm-shrinkwrap Bower Resolutions - Jake Trent 2. Task runner Grunt: The JavaScript Task Runner gulp.js - the streaming build system Node.js の Stream
browserify をはじめてみる
Browserify を触ってみたメモ。 Browserify とは CommonJS のモジュールの仕組み、つまり Node.js の require をブラウザ上でも使えるようにするもの、ということでいいみたい。Readme を読む限りは、npm にあるモジュールをブラウザ上にもっていくために作られ始めたような印象をうけるが、ちまたのエントリーをみていると AMD に代わりに CommonJS でフロントエンドの依存関係の管理をする (RequireJS ではなく、Node.js 感覚で require 関数をフロントエンドで使う) ためのツールとしても使っていいようだ。 やりたいこと 複数の js ファイルの依存関係を記述したい 最終的に、依存関係を考慮した順番で、ひとつの js ファイルに結合したい 作りたいのは第三者のサイトに埋め込んでもらうスクリプト (サードパーティスクリプト
Browserify-CDN使ってbrowserifyのstandalone形式を勉強した: misc
おはようございます。次男が水疱瘡になり、長男のお迎えに加えて、登園も自分が担当しているkjunichiです。 node.jsのモジュールをstandalone形式で作る Broserify-CDNというサービスの存在を知り、うろ覚えのまま放置気味のbrowserifyをいじってみました。Broeserify-CDNは以下の作業を自動的にやって来れ、ブラウザ上のJavaScriptから使うだけです。 --standalone の後に、ブラウザで参照時のグローバル変数で参照できるモジュール名を小文字+ハイフンの形式で指定。ブラウザ側ではキャメルケースでの参照となる模様 browserify beep.js --standalone beep-boop > bundle.js 上の様にbundle.js作ったら、 Webでは <script src="bundle.js"></script> <
gulpでbrowserify使ってcoffee-scriptの監視とコンパイル - Qiita
まずnpmから必要な物をいれる。gulpで browserify/coffeeify を使ってビルドする場合、coffee-script も必要になる。 $ mkdir proj-path; cd proj-path $ npm init $ npm install --save-dev gulp gulp-browserify gulp-watch gulp-plumber gulp-rename coffeeify coffee-script gulp-rename リネームタスク gulp-watch 監視タスク gilp-plumber タスクの実行に失敗してもgulpを終了させないパイプ(watchでビルド失敗時に終了させない) gulp-browserify browserify gulpfile.coffee gulp = require 'gulp' browserify
gulp, TypeScript, Browserify で Chrome 拡張を書く - 詩と創作・思索のひろば
先日紹介した chrome-Flavoured-Favicon ですが、以下のような技術によって支えられています。 gulp ビルドツール。 TypeScript 型つき JS。 Browserify JS の依存関係の解決。 AngularJS HTML と JS を綺麗に結合させる。 最後の AngularJS は TypeScript との相性を試してみたかっただけのおまけです。結果は最高に気持ちよくなれました。 ディレクトリ構成 app/ 最終的に配布する拡張本体です。ほとんどのファイルはバージョン管理されておらず、gulp によって生成されます。 src/ TypeScript のソースなどが置いてあります。基本的にこの中だけを弄る。 DefinitelyTyped/ DefinitelyTyped（TypeScript の型定義ファイル）。Git の submodule で管理
browserify in Backbone.Marionette project
http://browserify.org/ browserifyはbrowser環境でもnodeのようにrequire('xxx')というスタイルで依存しているライブラリを読み込むことが出来るようになるもので、最近盛り上がってますね。 (Backboneなど色々なプロジェクトでbrowserifyについて議論されていたり) ここでは基本的な使い方は省略して、Backbone + Marionetteなサンプルプロジェクトをbrowserify対応してみたのでその構成についてを書きたいと思います。 (まだ全然理解出来てないので、もっといい方法があれば教えて欲しいです) Sample Project https://github.com/koba04/backbone-boilerplate http://koba04.com/last-fm-top-tracks/ サンプルプロジェクト過ぎ
testling-ciとtravis-ciでクライアントサイドもサーバサイドもテストを実行する - from scratch
まえがき NHK番組表APIのjavascript版を作りました。 NHKの番組表APIが発表されてて、皆思い思いに好きな言語で実装されていくのを見てました。 Golang : https://github.com/mattn/go-nhk Scala : https://github.com/seratch/nhk4s Perl : https://github.com/moznion/WWW-NHKProgram-API Python : https://github.com/drillbits/nhk-api Ruby : https://github.com/mitukiii/nhk_program-for-ruby Emacs : https://github.com/gongo/emacs-nhk-program Titanium : https://github.com/h5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.jsのモジュール依存解決メソッドをブラウザでも使えるBrowserify
GitHub - studiomohawk/browserify-handbook: how to build modular applications with browserify
GitHub - browserify/browserify-handbook: how to build modular applications with browserify
