Webpackerをやめるならwebpack_manifestというgemが便利、という話
先日、社内のSlackでpixivさんのブログ記事 今日から簡単！Webpacker 完全脱出ガイド がシェアされてて、『あっ、これは...弊社でもやったやつではないか。』とおもいました。Webpackerは便利なんですけどね。 本記事はこのpixivさんのポストを受けて WebpackManifest というgemを紹介します。 ラクスルでのWebpackerを辞めた経緯 もともとWebpackerを使った管理画面プロジェクトがあった そこにECサイトも乗せるようなった package.jsonは管理画面、ECサイトで分けて管理したかった Webpackerは1個のpackage.json、1個のwebpackコマンド、1個のmanifest.json前提の作りなので、package.json分けて複数のwebpackビルド処理系を作りたいラクスルの用途に合わなかった => 脱Webpa
React-NativeでSFCがHMRしてくれない問題を解決する - Qiita
そもそもの前提問題としてReact-NativeではHMRを有効化してもStateless Functional Component(以下SFC)に対してhot module replacement(以下HMR)してくれない問題がある。 https://github.com/facebook/react-native/issues/10991 上記のissueに記載あるが babel-plugin-functional-hmr を入れることでSFCに対してもHMRを有効化出来る。これで全て解決！と行けば良いのだが、、、 babel-plugin-functional-hmrを有効化した状態でjestのsnapshotテストをするとテストケースが失敗することがある どういうケースで失敗するのか？ 普段僕は業務でもプライベートでも styled-components を使用しています。 今回の
【Vue】VueCLI3に頼らずVue.jsの開発環境構築をする 【babel7, .vueファイルのeslint + prettierなど】 - Qiita
Vue.jsの開発環境を手作りした話 書いた日：18/10/19 手動で構築した開発環境は暖かみがちがう 古事記にもそう書かれている 動機 環境構築手動でやるのが好きになって来たこの頃、 VueCLIを久しぶりに触ってびっくりしました なんやこれ！ $ vue add @vue/eslint って何！？ 知らんところで色々起きるの！こわ！！富豪的すぎない！？ https://cli.vuejs.org/guide/plugins-and-presets.html#plugins と思いイチから環境構築した話 単一ファイルコンポーネントのeslint/prettierにも興味があったしね！ VueCLIはGUIもついていて、非常に優れた環境構築ツールですが 自分で構築してみるとすごく勉強になりますよ 対象読者 vue.jsや.vueファイルの知識がある人 VueCLIが裏でやってることに興味
Nuxt.jsでWeb Workerを使う - Qiita
やりたいこと Nuxt.jsなプロジェクトでWeb Workerを使いたい webpackのHMRに対応する Web Workerとは Web Workers API - Web API インターフェイス | MDN Nuxt.jsでWeb Workerを使う nuxt.config.js worker-loaderを使います。 module.exports = { build: { extend: ({ module, output }) => { // rulesの先頭に追加 module.rules.unshift({ test: /\.worker\.js$/, loader: 'worker-loader' }) // HMR時にWebWorkerでwindow is not definedになる問題対策 output.globalObject = 'this' } } } wo
Webpack v3 → v4移行パッケージ対照表
webpack v4がリリースされてから久しいですが、v3を使っているという方はまだそれなりにいるのではないかと思います。 私の業務で触れた当初、v4はリリースしたてでプラグイン周りもまだベータが取れていかなったのでv3を選択していましたが、安定してきたのでv4に移行しました。 移行の段階でいつくかのエラーとの戦いがありました。直接的な原因がわかるエラーは良いのですが、間接的にしか読み取れないエラーもあったのでpackage.jsonと見比べて不足している変更がないかわかるよう対照表にしました。 現在移行を検討している方、詰まっている方へ何かの助けになれば幸いです。 パッケージ v3 v4 用途 備考
Working with Babel 7 and Webpack
Important: If you are using Babel 7.4, make sure to check out the post Updating to Babel 7.4 on some of the breaking changes. In this post we’ll set up a project with Webpack and Babel 7. You’ll learn the basics of Babel and some cool features of what it can do with your code. What is Babel? This is what the website says: Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code in
クライアントサイド(React)で日本語PDFを出力する。
前書き Reactの案件の中で日本語のPDFを出力する必要があり、 そのためにクライアントサイド(React側)のみで日本語PDFを出力する方法をまとめたので記事にしました。 前準備 今回は、pdfmakeというクライアントサイドでPDFを出力するJavaScriptライブラリを利用します。 npmパッケージでも存在するのでコマンドでインストールできるのですが 日本語フォントを利用するため、Githubからjsファイルを落とします。 bpampuch/pdfmake 上記のリポジトリから以下のファイルを落とします。 pdfmake.min.js vfs_fonts.js 日本語PDF出力の準備 pdfmakeは、そのまま利用すると日本語フォントが利用できません。 そのため、独自に日本語のフォントを利用できるようにする必要があります。 ダウンロードしてきた、vfs_fonts.jsに日本語フ
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
Vue.jsの環境構築 (mac) - Qiita
# nodebrewインストール $ brew install nodebrew $ mkdir -p ~/.nodebrew/src # <- フォルダ作ってないとinstallでコケる $ nodebrew -v nodebrew 1.0.1 # インストール可能なnode.jsのリストを表示 $ nodebrew ls-remote # version8.9.4をインストール $ nodebrew install-binary v8.9.4 $ nodebrew ls $ nodebrew use v8.9.4 # nodeとnpmコマンドのパスを通す $ nodebrew setup $ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile $ source ~/.bash_profile #
Parcel でまとめる Elm と css と js のススメ
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Main</title> <link rel="stylesheet" href="whatever-you-want.css"> <script src="main.js"></script> </head> <body> <div id="elm"></div> <script> var app = Elm.Main.init({ node: document.getElementById('elm') }); </script> </body> </html> コマンドラインからelm make src/Main.elm --output main.jsとして、ElmのソースコードをJavaScriptにトランスパイルします。 そして、このindex.htmlをブラ
ElmにクリーンでハックのないCSS modulesを
HTML側がこの JSON オブジェクトを使って適切なクラス名を各要素に付与するようにすることで、無事に CSS で定義したスタイルがその要素に適用されます。 このようなクラス名の衝突をなくす工夫によって、アトミックデザインなどに使える再利用可能な CSS の記述が可能になります。 関連手法との比較 「CSS modules を使いたいから Elm で CSS modules を使えるようにした」みたいなのは無能な人がやることです。 いったん落ち着いて「本当に Elm で CSS modules を使う新しい手法を考える必要があるのか」「他にクラス名の衝突を回避する方法はないのか」について考えましょう。 せっかちな方は elm-css-modules-helper の使い方 まで読み飛ばしてください。 CSS in JS (elm-css) との比較 CSS modules とよく比較され
nycのカバレッジにwebpackでビルドしたソースが含まれるのを阻止する - Qiita
概要 自分のライブラリのカバレッジがとても低く、何故なんだろうと思っていて調べたのですが、webpack側で作ったソースが含まれていたのが原因でした。 今回はその対応するために結構苦労したのでメモしておきます。 webpackのソースが含まれている時のカバレッジ(間違い) 自分のソースのみのカバレッジ(正しい) webpackでソースマップの出力をする devtool: 'inline-source-map'って所です。この設定を有効化することによってビルドファイルの中にソースマップを含めることができます。 この設定をしないとnyc側で元のソースを辿って正しいカバレッジを取得することができません。注意しましょう。 var nodeExternals = require('webpack-node-externals'); module.exports = { mode: 'developm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Laravel 5 アセットのコンパイル(Laravel Mix) 構築でのエラー解消（訂正） - Qiita
css-loaderのsourceMapがスタイル適用の遅延を招く - Qiita
webpack4の導入とwebpack-dev-serverで自動ビルド - Qiita
テキストベースで画面遷移図が書けるuiflowをブラウザ上で動かす - Qiita
Laravel 開発環境構築 備忘録2 laravel mixの設定 - Qiita
rails-ujsを使うとWebpackのHot Module Replacementが効かない時の対処法
webpackでファイルの出力先を複数指定する - Qiita
eslintの設定からprettierとの併用までの流れ - Qiita
