webpack

要約 これは技術記事である。 ただし参照する際はこちらを確認してリスクを理解した上で扱うこと。 TypeScriptとReactで開発基礎環境を整える。 lint、test等は次の記事でする。 バックエンドも同じリポジトリにある。

現在、Web制作会社に勤めていましてHTML, CSS, jQueryを使用したマークアップを主に担当しています。 残念ながら弊社はエンジニア・コーダーの数が少なく、入社した時は私含め3人しかいませんでした。 しかも全員未経験からの転職組で私より先に入った2人も入社してから3ヶ月程度しか経っていなかったため全員が同じようなレベル感です。 なかなか厳しい環境ではありましたが、そこからgulpを導入して全員が同じようにコーディングできる環境を整えたり、SassやPugを導入したり、コーディングルール（道半ば・・）を作ったりと環境を整えてきました。 そんな中、私個人としてはJavaScriptの知見…

LPとかを作る時用にstaticサイト用の開発環境のwebpackのバージョンを5にあげてみたときに以下のエラーが出た ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-…

webpack 4 以前では Node.js core module の polyfill が webpack 自体に同梱されていて、bundle したい module が 1 つでも core module の機能を使っていれば自動的にその polyfill が追加されていました。 しかし webpack 5 からはこの自動 polyfill が廃止され、真に必要な場合にのみユーザが手動で polyfill を追加するというようになりました 1 。 具体例を挙げると、react-markdown は unified 2 を通じて vfile というパッケージに依存しており 3、vfile は…

個人アプリの開発ではHerokuを使うことが多いのですが、最近webpack + Railsの環境を使っていてデプロイまわりで少しハマったので、デプロイ方法をメモしておきます📝 Herokuのデプロイついて Herokuによる標準のRailsデプロイ WeboackなRailsをHerokuにデプロイする 参考 Herokuのデプロイついて 使用する Heroku buildpack によって、アプリケーションの開発プロセスや、コードの実行時に用意すべきアセットやランタイムが決まります。複雑なアプリケーションで複数の言語を実行する場合は、1 つのアプリケーションで複数の buildpack を…

Firebase HostingにはGoogleアナリティクスとの連携機能がついています。firebase.google.com僕はこれまで連携機能を使ったことがなく、Firebase Hostingを使っていても、タグやnpmでアナリティクスを導入していたのですが、この度初めて使ってみました。連携機能というやつを。基本的には、上記ドキュメントの通りに進めていけば問題ないのですが、Next.jsと組み合わせて使ったときに、2点引っかかったので、メモを残しておきます。 import firebase from 'firebase'; const config = { apiKey: 'XXXXX…

TL;DR @babel/core@7.13.7以下をwebpackと一緒に使うとnode-semver@7.0.0でハマるかもしれない はじめに 仕事でブラウザ上のエディタでmarkdownを書くとリアルタイムにReactでどんなコンテンツが表示されるかを確認できるコンテンツシミュレーターみたいなものを使っている。 このシミュレーターで書けるmarkdownは本来のmarkdownをちょっと拡張して、独自にJS書けたり、インラインでJS関数やオブジェクトの参照ができたりする。 このシミュレーターが既存のPJでは動いているのに、別のPJで新しくセットアップしようとしたら動かないという事象を調査…

メモ。ここでいうaliasってのは@/hogeとかでimportするやつ(Webpackの言う"alias") ↓とかあるけどcreate-react-appで作成してreact-scripts使う時は一工夫要る qiita.com TypeScript 何はともあれtsconfig.json react-scriptsが起動するたびにこいつを書き変えてしまうので、extendsを使ってpathsを切り出す tsconfig.json { "extends": "./tsconfig.paths.json" } tsconfig.paths.json { "compilerOptions": …

こんにちは、スマートキャンプでBALES CLOUDを開発している中川です！ 昨年の 9 月に Vue.js のメジャーバージョンが 3 になりかれこれ半年ほど経ちますが、みなさんのプロジェクトでは移行が進んでいますか？ 私が普段開発している前述のプロダクトにも Vue.js の 2.x 系を採用しているのですが、利用している UI ライブラリが Vue3 に対応するのを待っている関係でまだ移行には至っておらず、 先んじて Lint のルールを Vue3 のものに切り替えて準備だけ進めているような状況です。 さて、Vue3 といえば Vue.js の発起人である Evan You 氏が始めた高…

notyのデザインについては以下を参照して下さい。 ned.im notyはyarnを使ってインストールします。 コマンド yarn add noty 「app\javascript\packs\application.js」に以下の記述を追加します。 記述追加 app\javascript\packs\application.js(11行目) window.Noty = require("noty") app\javascript\packs\application.js // This file is automatically compiled by Webpack, along wit…

画像ファイルをインポートする必要のあるVueコンポーネントをjestでテストした際に発生したエラーでしたが、大分長いこと格闘して、ようやく解決したのでまとめておきます。 症状 Vue.jsのテストコードを書いていて、以下のようなシンタックスエラーに遭遇した /home/user/hogehoge/src/assets/image.png:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG SyntaxError: Invalid or unexpected…

どうも! 大阪府松原市でウェブを中心としたソフトウェア開発を行っています。 コワーキングスペース松原ガレッジ管理人の五島です。 今日はRollupの話を少ししようかな〜と軽快に記事を書いてます! 設定はよっ(｀･ω･´)という方はこちらのGitHubリポジトリを御覧ください。 目次はこちら 準備 インストール 設定ファイルを書く ES2015(ES6)記法をRollupでIE11に対応させる Stimulus の対応 参考 Rollup自体は特に利用しなくても、JavaScriptを実行することはできます。 しかし、 JavaScriptの新しい記法(ES2015またはES6)を利用したいとい…

概要 本記事は、 TypeScript は初心者だけど、実務に取り入れていこうと動き出している私が プログラミング TypeScript スケールするJavaScriptアプリケーション開発 を読んだ感想です。 プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発作者:Boris Cherny発売日: 2020/03/16メディア: 単行本（ソフトカバー） 私について 本書を読み始めた時点での私の TypeScript 経験は以下の程度です。 公式ドキュメントを流し読んだ Qiita で入門系の記事を読み漁った 簡単な個人開発(Next.js / Nuxt…

IE11 でも動く JavaScript に変換したい！ ES2015(=ES6) 以降の JavaScript を変換して ES5 にダウングレードする方法です。この記事で利用しているのは Babel のバージョン7です。 なお、本記事ではあえて Babel 以外のツールは含めないようにしています。 前提（ヤリタイコト） Babel とは ブラウザで変換する（お試し利用） Babel を使おう Babel の実行環境の用意 前提環境 フォルダの用意 npm の利用開始 Babel のインストール Babel の設定ファイルの作成 Babel の実行 変換元ファイルの用意 Babel で変換を…

×184 REWORK — the New York Times bestselling book about business. | Basecamp ×90 OTCC : Obfuscated Tiny C Compiler ×84 Introduction - OWASP Cheat Sheet Series ×45 Reasons why SELECT * is bad for SQL performance | Tanel Poder Consulting ×36 A/Bテスト実践ガイド 真のデータドリブンへ至る信用できる実験とは Ron Kohavi：生活・実用書 | KADOKA…

Cyber Agentさんが主催されたWeb Speed Hackathon2021 に参加したので、やったことを殴り書きでまとめてみようと思います。 参加方法 Cyber Agentのサイトから参加登録をします。特に面接などはありませんでした。 ハッカソン当日 お題は「 めちゃくちゃ遅いSNSを早くする」でした。 どれくらい遅いかというと、lighthouseのスコアが０になるくらいには遅かったです(スコアを０にするのも大変だったそうです)。 二日間を通してlighthouseのperformanceをどれだけ高められるかという勝負でした。 それでは自分がやったことをまとめていきます。 １日…