webpackでRailsアプリのアセットをビルドする - Money Forward Developers Blog
エンジニアの大塔です。 現在はRailsアプリのフロントをメインで触ってます。 webpackerに頼らないフロントエンドビルド環境を構築してみたので、そのお話をします。 背景 フロントエンドではNode.jsを使ってJavaScriptやCSS等のアセットをトランスパイルすることが一般的になったかと思います。 思い出すだけでも、フロントエンドではgrunt, Browserify, webpack, SystemJS, rollup.jsと色々なフロントエンドのビルドに絡むツールが出てきました。 自分自身も、元々はBrowserifyやwebpackでES6やTypeScriptのビルドを実行していました。 そのため、初めてRails絡みのプロジェクトに参加してから、Sprocketsによって管理されるアセットに触れ、モダンなフロントエンドとRailsの折衷をどうすれば良いか色々考えてい
Railsが5.1になることでフロントエンドの開発が本当に楽しくなりました - チラシ裏日記上等！！新館
Ruby on Rails の 5.1.0.beta1がリリースされましたね！ weblog.rubyonrails.org 仕事でRailsを使うものとしてちゃんと触っておかねばと思い、まずは自分の好きなJavaScript周りがどれぐらい良くなったのか見てみたところかなりびっくりしました。JavaScriptすごく開発しやすいです。 webpack があって yarn がありますし、ReactやVue、angular まで rake タスクでセットアップできます。ちょっと前までRailsでJavaScriptやるのが辛いなんて言っていたのが嘘みたいです・・・。 今回はRails 5.1.0 で Vue.js を使って新しくプロジェクトを作るところまでやってみました。 rails new rails webpacker:install:vue Webpackでのビルド Hot Modul
普通のRailsアプリケーションにReactを導入する | DevelopersIO
次にreactをインストールします。 $ npm install -S react react-dom package.jsonは以下のようになりました。 { (中略) "devDependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "webpack": "^1.14.0" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", }, (中略) } ビルド設定 webpackでビルドできるように設定ファイルを作ります。 clientディレクトリにwebpack.config.jsファイルを作成し以下の内容
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
Webpack your bags | Webpack 1.13.0 日本語リファレンス | js STUDIO
このページは、Webpackの公式ドキュメント内で紹介されていたMaxime Fabre氏によるWebpack your bags - madewithloveの記事を madewithloveブログの「Content is published under the Creative Commons BY-SA license」に基づいて翻訳したものになります。 ブログで紹介されているWebpackのバージョンは1系のものになります。 2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。 webpack webpack1 (旧サイト) 非推奨 もしかしたら、あなたは既にここで紹介するWebpackと呼ばれるクールなツールについて聞いたことがあるかもしれません。 ある人は「このツールはGulpのようなビルドツールだ」と言い、またある人は「これはBrowserifyのよう
最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
Railsにgulpを統合させる - Rails Webook
Railsでgulpを使ってアセットファイルの管理できる環境を構築します。 gulpはアセットを管理するツールで、js、css、imagesなどのアセットファイルをビルドして、それをRailsから参照する流れです。 また、gemにバンドルされているアセットファイルもあるので、Sprockets(Railsのアセット管理のgem)は有効にしておきます。有効にしておきますが極力使いません。 gulpでsass/scssのコンパイル、ES6のコンパイル(babel, webpack)、gulpの便利プラグイン(変更監視、画面リロード、通知)、ミニファイ、ダイジェスト付与をできるようにします。 そして、gulpで作成されたcssやjsのアセットファイルをRailsからロードできるようにします。 参考にソースファイルをGitHubに上げたあります。 https://github.com/nipe03
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
GitHub - verekia/js-stack-from-scratch: 🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Welcome to my modern JavaScript stack tutorial: JavaScript Stack from Scratch. 🎉 This is the V2 of the tutorial, major changes happened since the 2016 release. Check the Change Log! This is a straight-to-the-point guide to assembling a JavaScript stack. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring tools together and giving you the simplest possible e
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
