Laravelを使っていないプロジェクトでLaravel Mixを導入した話 - Qiita
ラクス Advent Calendar 2017 の6日目の記事です。昨日は@fnzzzさんによる「 VUIのデザインについて考察してみた 」でした。 本日はこの記事でQiita初投稿となります、@amderbarです。 はじめに 先日、個人的に作っているWebアプリケーションにLaravel Mixを導入しましたのでそのお話です。大筋は「Laravel Mixでwebpackをもっと簡単に使う方法」に従っていますが、1点だけハマった点があったのでそこも含めてお話しします。 Laravel Mix とは 本題に入る前に簡単にLaravel Mixのご紹介です。 Laravel Mix はPHPフレームワーク「Laravel」に内包されるwebpackのAPIラッパーです。webpackは便利なようですが、ちょっと見ただけでも自由度が高い分設定が複雑で敷居が高い印象を受けます。 ですがLar
今日から簡単！Webpacker 完全脱出ガイド - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
Railsチュートリアル幻の15章 React編 - Qiita
社内で利用した、Reactの研修資料を公開します。 Railsチュートリアルの続編として作成したので、Rails上でReactを使うためには...ということが書かれています。Railsチュートリアルテイストになっていますが、一部社内でのコーディング規約や利用するライブラリについての言及があります。 また、研修ということで、ソースコードはGitHubの差分をスクショするという形で掲載しています。コピペできるコードが欲しいという人は、差分表示を作るのに使ったリポジトリを利用して下さい。 https://github.com/kouheiszk/sample_apps/tree/master/5_1_2/ch15 第15章 Reactの導入 この章では、サンプルアプリケーションで作ってきたUIパーツをReactというJavaScriptのライブラリを利用してコンポーネント化していきます。具体的に
Vue+webpackでlodashを使う方法 - 備忘録
Ⅰ. はじめに タイトルの通り「Vue+webpackでlodashを使う方法」です。 Ⅱ. やり方 1. lodashをインストールする npm install lodash 2. src/main.js に 以下をコピペする import lodash from 'lodash' Object.defineProperty(Vue.prototype, '$lodash', { value: lodash }) 3. lodashを使う let accounts = [ /* 省略 */ ] this.$lodash.orderBy(accounts, ['id', 'name'], ['asc', 'asc']) 参考 https://stackoverflow.com/a/43556280
Rails 5.1 + Vue.js で開発を行う - part1 環境構築 - Qiita
概要 Webpacker を利用してRails 5.1 + Vue.js で開発を行う方法を紹介。 本記事では、開発環境を整えるまで行う 次回の記事では、Vue.js を使って Ajax 通信を行います。 Rails 5.1 + Vue.js で開発を行う - part2 Ajax で GET しよう！から確認ください 全コードはこちらより確認いただけます ruby 2.4.1 Rails 5.1.1 Vue 2.3.4 webpacker のインストール はじめに webpacker を install します。 ※ Rails アプリをすでに作成済みという前提で話を進めます。 webpacker とは Webpacker makes it easy to use the JavaScript pre-processor and bundler Webpack 2.x.x+ to man
nodebrewでnodeのバージョンを切り替える方法 - Qiita
nodeのバージョンを下げなければならなくなった経緯 laravelのwebpackを使ったコンパイルを実行する為npm run devを実行したら以下の様なエラー出てきました。 Module build failed: Error: Missing binding /your/path/hogehoge/node_modules/node-sass/vendor/darwin-x64-59/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 9.x Found bindings for the following environments: - OS X 64-bit with Node.js 8.x のnodeのバージョンを確認したと
RailsでLaravel Mix(webpack)を使って15分でES6を書きはじめる - Qiita
What・Why? Laravel Mixとは？ https://laravel-mix.com https://github.com/JeffreyWay/laravel-mix webpackのWrapper API LaravelのAssets Compileの機能 Node.js のライブラリ、PHPを必要としない RailsでもSinatraでもHanamiでもDjangoでもEchoでもWordpressでも、もちろんLaravelでも使える なぜ Laravel Mixなのか? RailsのSprockets、AssetsPipelineを使いたくない Too fu*kin' outdated CoffeeScript....? Turbolinksハマる webpacker使いたくない RubyのRuntimeで動いてるのがダサい 設定がなぞ ディレクトリがなぞ .js.e
最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。 開発に慣れてきたら迷うことはないと思いますが、Vue.jsをさわるのが初めてでNuxt.jsを採用した場合、どっちのドキュメントを見ればよいかわからずに、さまよってしまう事があるかもしれません（自分がそうでした）。そんなときのための、長ったらしいメモです。 この記事を書いている時点では、Vue.jsが2.5、Nuxt.jsが1.2です。 ドキュメントの歩き方 まずはガイドで概要を把握して、細かいことが気になったらAPIをあたります。 Vue.jsでの開発がはじめてであれば、本格的に書き始める前に、スタイルガイドを見ておくと、手戻りが少なくなるかもしれません。 ガイド フレームワークの使い方がわかりやすく書かれています。 はじめにから順に読んでいって、大体こんなことができる
Nuxt.jsでlocalStorageを用いる際のTipsとハマったこと - Qiita
GMOペパボ、ロリポップのエンジニア@sunecosuriです。 昨日は@bake0937による、Macの開発環境をzshで良い感じにするでした。 ghq + peco の組み合わせ、一度知ったら手放せないくらい便利ですよね。 さて、今回私はNuxt.jsでのlocalStorageを扱う際にハマったお話とTipsのようなものをご紹介したいと思います。 Nuxt.js について Nuxt.jsはSSR基盤を持ったVue.jsを用いたwebpackベースのフレームワークです。 詳細は公式ページを御覧ください。 Nuxt.jsの認証について Nuxt.jsで認証を行うにあたって、nuxtServerInitという アプリケーションがロードされたとき、サーバーから取得できるデータをVuexのstoreに渡すことができる機構が提供されています。 session認証になりますが、公式にも以下のように
Vue.js + webpack で helloworld する - 備忘録
Ⅰ. はじめに タイトルの通り「Vue.js + webpack で helloworld する」方法です。 Ⅱ. やり方 1. vue-cliのインストール $ npm install -g vue-cli 2. Vue.js + webpack のテンプレートを使って初期化する $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev 3. 実行結果 4. my-project/src/components/Hello.vue を編集する data () { return { msg: 'helloworld' } } 5. 実行結果 helloworldに変わった。 Ⅲ. リリース版としてビルドする方法 以下のコマンドを実行するとdistディレクトリにファイルが生成されます。 npm run b
webpackでJavaScriptライブラリを利用する
webpackでJavaScriptライブラリを利用する webpackで様々なJavaScriptライブラリをコマンドラインからインストールして利用する事が可能になります。 webpackのインストールと利用方法 まずプロジェクトフォルダで以下のコマンドでpackage.jsonを作成します。 npm init -y 次にwebpackを以下のコマンドでインストールします。 npm install --save-dev webpack webpackをインストールしたならpackage.jsonと同一階層にwebpack.config.jsという設定ファイルを作成します。 設定内容はひとまず以下のようにしておきます。これは./src/script.jsの内容をコンパイルして./dist/script.jsに出力するという命令です。 module.exports = { entry: __
Browserifyユーザーがwebpackを覚え始めるには - Qiita
JavaScriptのバンドラーには今のところBrowserifyを使っているけど、webpackもどんなものか把握したいという人のための記事です。 記事執筆時点（2017/11）では、webpackのバージョンは3.8.1です。 とりあえずJavaScriptをバンドルする例 まずは単純な設定でwebpackを使ってみます。 必要なnpmパッケージはその名の通りwebpackだけです。インストールしましょう。 基本的に、webpackの設定はwebpack.config.jsというJavaScriptファイルに書いていきます。 このファイルをpackage.jsonなどと同じディレクトリに作ります。 これが基本ですが、以下の様にもできます。 （npm scriptsやgulpなどを通して）webpackを実行する際のオプションによって、明示的に設定ファイルを指定してもよい。 ファイル名を
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
むずかしくないJavaScriptのやさしい話 デモチュートリアル このチュートリアルは、#ndsmeetup8 で発表した内容のデモの手順をまとめたものです。 jQueryをscriptタグ挿入で使っているような開発者向けの内容です。 npmとwebpackでビルドをするという使い方の提案です。 発表内容はこちら。 http://www.slideshare.net/fbcivic/javascript-ndsmeetup8 ※発表当時はwebpack1についての記事でしたが、webpack1→webpack2→webpack3→webpack4と記事を更新しています。 webpack3までの古い解説はこちら （基本的なことなのでほとんど変わりませんが、webpack4でwebpack-cliが必要になったり設定ファイルの記述が変わりました） 事前準備 nodejsをインストールしてくだ
webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue-cliで始めるVue.jsチュートリアル (1) - Qiita