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
モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ
投稿推進部の外村（@hokaccha）です。 クックパッドブログの開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 RailsはSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みが提供されています。Sprocketsによるasset管理の仕組みは非常によくできており、AltJSのトランスパイルやファイルの結合、minifyなど、assetのコンパイルに必要な機能を一通り備えています。 しかし、JavaScriptにおけるモジュールの依存関係の解決や、ライブラリの管理などについてはモダンなJavaScript開発と乖離してきているのが現状です。そこで、Railsでも以下のようなことを実現できることを目標に環境を作りました。 ECMAScript6のシンタックスを使う モジュ
disc
disc Disc is a tool for analyzing the module tree of browserify project bundles. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build process. The demo included on disc's github page is the end result of running the tool on browserify's own code base. Installation Disc lives on npm, so if you haven't already make
BrowserifyからWebpackへの移行時の注意点 - Qiita
思い立ったが吉日ということで、プロジェクトのモジュール管理をRequire.jsからBrowserifyへと移行し、その直後にWebpackに移行しました。もうちょっと考えてツールを選ぼうと思います。 さて、Require.jsからBrowserifyへ変えた理由は、シンタックスをCommonJS的に書けるようになって、全体がシンプルになるから、という理由でしたが、BrowserifyからWebpackへの移行は、もうちょっと切ない理由での移行になりました。 Webpackとは ドキュメントも若干わかりづらいですが充実しており、基本的にここだけで必要な情報はほとんど得られます。 なのでこちらをどうぞ・・・じゃさすがにあれなので、ドキュメントに書いてある、作られた動機などを若干紹介します。 今はモジュールシステムがいろいろある CommonJS AMD <script> タグ ES6 Mod
gulp × TypeScript × Browserifyな開発環境構築 - Qiita
概要 ビルドツール ： gulp altJS ： TypeScript モジュール管理： Browserify 以下で説明していく開発環境のひな形はGitHubに置いてありますm(_ _)m https://github.com/massa142/typescript-devenv 前提 Node.jsインストール済み。 Node.jsのインストール方法に関しては、以下の記事が詳しいのでご参照ください。 node.jsのversionを管理するためにnodebrewを利用する - Qiita 参考にしたもの TypeScriptリファレンス Ver.1.0対応 gulpでbrowserifyを使う | 4uing Usage npm install gulp tsd gulp (tsc| browserify | watch| minify) ファイル構成 root ├── src
フロントエンドエンジニアのための「俺の最近のRailsのJS開発環境」を考察する - Qiita
「俺の最近のRailsのJS開発環境」 for フロントエンドエンジニア TL;DR 「片手間のJS」ならhogehoge-railsで大丈夫（e.g. browserify-rails, sass-rails, etc.） 「本気でJS書く」ならsprocketsから切り離す（e.g. SPA, etc.） 迷えるフロントエンドエンジニアに愛の手を ※ 個人の見解です はじめに 本記事の内容は個人の見解であり、所属する組織の公式見解ではありません． 本職は学生，片手間にRailsエンジニア，そのさらに片手間に過激派フロントエンドエンジニアやってる人間の戯言です． 『俺の最近のRailsのJS開発環境を教えてやる』を受けて，フロントエンドエンジニアの視点から見たRailsのJS環境を考察してみた記事になります． 元記事をdisっているわけではなく，むしろリスペクトしたうえで視点を変えてみた
ES5 + Facebook JSXで書かれたJavaScriptコードベースをTypeScriptに移行させる - CARTA TECH BLOG
皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。 今回は、表題の通り、実際にプロダクトとして動いている既存のコードベースを、ES5ベースからTypeScriptに段階的に移行させた話について書こうと思います。 移行前のコードベース及び直面した課題 今年の1月頃から、アプリケーションのクライアント側の一部を、以下の構成で実際に開発しています。 言語 ECMAScript 5 主要な依存ライブラリ UI開発にReactおよびFacebook JSX syntax 統合イベントシステムとしてのRxJS テストコードのアサーションにpower-assert ビルドチェーン モジュール連結にbrowserify 環境変数に基づくビルドフラグ用途でenvify コードの解析とLintにESLint 未使用変数や未定
俺の最近のRailsのJS開発環境を教えてやる - Qiita
はじめに railsのsprocketsがキツイ。特にjsファイルが多くなると開発がとっってもキツイ。 layoutに こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rail
browserify for webpack users
Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address. browserify for webpack users There's been a strange explosion in misinformation about browserify recently, particularly in comparisons to webpack. Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more lik
A combination of React.js and 6to5
In English article is here. 今までは、react-toolsを使ってjsxのharmony optionを有効にして書くことで一部のES6のfeatureが使えて満足していたのですが、azuさんの記事を見て6to5を試したくなったのでReact.js + 6to5の組み合わせで書いてみました。 https://6to5.org/ http://efcl.info/2015/01/09/write-es6/ 結論から言うと6to5自体がjsxのサポートもしているので何も意識することなく書けていい感じでした。 コードはこんな感じ。 https://github.com/koba04/react-boilerplate structure browserify + 6to5ify 変換の流れはbrowserifyのtransformである6to5ifyを使うので、 E
Browserify-CDN
browserify-as-a-service Places fork me on github browserify on the web browser-module-sandbox - helpful for using multi-bundles requirebin.com - powered by wzrd.in esnextb.in - also powered by wzrd.in Quick Start Try visiting this link: /standalone/concat-stream@latest Or choose a module here:Module:Version: What just happened? Well, in this case, since someone has visited this link before you, th
Browserify 5.0から--standaloneでderequireはされなくなった
Browserify 5.0.0では、 基盤となる変換処理の部分に色々変更がありました。(特にtransform周りが大きく変わって変換にhookする処理が色々できるようになった) node-browserify/doc/changelog/5_0.markdown at master · substack/node-browserify ChangeLogの一番下にちょこっと書いてありますが、--standaloneを付けて単体のライブラリとして配布向けにビルドするときに、 derequireがされなくなりました。 derequire has been taken out of core, which should speed up –standalone. そもそもderequireとは何かというと、 requireという関数を使うライブラリ等との衝突を避けるためにリネーム処理をするモ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - increments/brwy_rails: Browserify | Watchify on Rails
http://siome.ink/
GitHub - unassert-js/unassertify: Browserify transform for unassert: Encourages programming with assertions by providing tools to compile them away.
http://browserifysearch.org/
GitHub - andreypopp/reactify: [DEPRECATED] Browserify transform for JSX (superset of JavaScript used in React library by Facebook)![GitHub - andreypopp/reactify: [DEPRECATED] Browserify transform for JSX (superset of JavaScript used in React library by Facebook)](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2bc8a53a84fd98d1c264c4cc23226bc9000da2c/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F86180ca3808e19750d25397e3a996f362bbe411e5f8e3aee675f422855dca452%2Fandreypopp%2Freactify)
GitHub - joker1007/rails_browserify_sample: Railsをbrowserifyと組み合わせるサンプル実装
GitHub - petehunt/webpack-howto
requiring npm modules in the browser console
