社内のフロントエンド、マークアップエンジニア向けに話をしそうなので、そのメモ。 なんとなくで読んでください。 Index 「Webサイト用」モダン開発環境 パフォーマンス施策 Webサイト制作において必要な条件 モダンな技術を採用しつつ、今までの案件で使える SPAではなくWebサイトに対応 HTMLファイルが各ページで存在している head内の情報が直接書かれている きれいなHTML minifyされていない Nuxt.jsのgenerateみたいに、最適化されすぎていない 変えたいもの 脱Gulp Gulp -> npm scripts(タスクランナー) Gulp -> webpack(バンドラー、トランスパイラー) jQuery -> Vue.js & Vanilla.js ES2015+ -> TypeScript(Classベース) EJS -> Pug 脱Gulp(Gulpをや
はじめに 前回、elm0.19の開発環境を構築したので、 elmを試すために、Elm 0.18で作るTodoアプリ(1)を試してみる。 ElmをSPAではなく一部適用にしたいので調整する。 開発環境 Windows 10 Vagrant 2.1.5 Virtualbox 5.2.18 Ubuntu 18.04 LTS (Bionic Beaver) Docker version 18.06.0-ce, build 0ffa825 docker-compose version 1.22.0, build f46880fe ファイル構成イメージ 以下のようなファイル構成としたい。 - src - card.js # elmを読み込むためのjsファイル - html - card.html # jsファイルを読み込むhtmlファイル - Card - Main.elm # 大元のプログラム -
本投稿のサンプルコードを GitHub に用意しました。 im36-123/critical_css | GitHub 概要 前回は、 Critical CSS のインライン化までのプロセスを手順を追って説明しました。 詳しくは下記を御覧ください。 Above the fold(ファーストビュー)に含まれる CSS をインライン化してパフォーマンスの改善を図る Critical CSS を開発者が手動で抽出しインライン化するのは現実的ではありません。 そこで、今回は webpack, と HTML Critical Webpack Plugin を使ってインライン化してみたいと思います。 環境構築 HTML Critical Webpack Plugin が動作する環境を構築します。 今回作る環境は下記に用意してあります。 im36-123/critical_css | GitHub とこ
概要 Elm0.18を使っていたが、作成されるソースが大きいと思っていたところ、elm0.19を勧めていただいたので勉強することにした。 手始めに、elm-webpack-starter : Elm 0.19 with Webpack 4, Hot Reloading & Babel 7のリポジトリをdockerで試せる環境を作成した。 2019/1/9 追記 webpack-serveが非推奨になり、webpack-dev-serverが再び推奨になったため、 webpack.config.jsを修正した記事を以下に追加した。 elm0.19 + webpack4 + webpack-dev-server のサンプルをdockerで試したメモ 開発環境 Windows 10 Vagrant 2.1.5 Virtualbox 5.2.18 Ubuntu 18.04 LTS (Bionic
この内容はv3.0.0の場合の話です。最新版では発生しません。 Riot.jsについて 最近のフロントエンド開発ではReactを使うことが多いですが、私は少数派ですので、「Riot.js」をよく使っています。 検索から来た人は、Riot.jsのことはよく知っているはずなので良いですが、そうでない人はぜひ使ってみてください。 __disabled問題 Riot.jsでは、disabled="{ !data.reference[0] }"のように判定式でdisabledが出来る。と公式ガイドに書いてある。 真偽値属性 (checked, selected など) はテンプレート変数がfalse的であれば無視されます。 <input checked={ null }>は <input>になります。 http://riotjs.com/ja/guide/#真偽値属性 しかし、いざ使おうとすると、な
最近 Chrome 拡張機能の開発を簡単に始める方法を調べていたのですが、その中で chrome-extension-webpack-boilerplate を使うと簡単に始められたので紹介します。 筆者の前提 Chrome 拡張機能を開発するのが初めて。チュートリアルをこなした程度 Webpack は触ったことがある chrome-extension-webpack-boilerplate とは GitHub - samuelsimoes/chrome-extension-webpack-boilerplate Chrome 拡張機能の開発を楽にしてくれる boilerplate は調べると色々あります。 その中でも、chrome-extension-webpack-boilerplate は、Webpack で 開発に使う JavaScript のモジュールを管理できるようにしてくれる
error Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Couldn't find preset "@babel/preset-env" relative to directory 解決ついでにパッケージや設定を整理したので、メモしておく。 1. 関連パッケージの入れ直し 以前 Babel を 6→7 にアップデートした際、不要になったパッケージを削除したかの記憶がなかったので、関連したものは一応全部入れ直した。webpack は入れ直す必要はないだろうが一応入れ直した。 Babel 6 で使うパッケージ群と Webpack をアンインストール npm uninstall --save-dev babel-core babel-preset-env babel-loader webp
TypeScriptをESLint/prettierで自動整形したいと思ったので、ちょっとググってやってみたので自分の備忘録で投稿させていただきました、あてにしないでください。 参考にしたサイトは以下です。ちゃんとした情報がほしい方は以下のリンクを見てください。 https://ics.media/entry/16329 https://github.com/Microsoft/vscode-eslint/issues/284 フォルダ構成 ./ ├ dist ├ node_modules ├ src │ └ main.ts ├ .eslintrc.json ├ index.html ├ package-lock.json ├ package.json ├ tsconfig.json └ webpack.config.js { "name": "hogehoge", "version":
$ monaca transpile Running Transpiler... module.js:549 throw err; ^ Error: Cannot find module 'ホームディレクトリ\.cordova\node_modules\webpack' at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object.<anonymous> (C:\Program Files\nodejs\node_modules\monaca\node_modules\monaca-lib
2018/8/29 Sierra で確認済み。 今回はアプリの webView などで呼ばれる事を想定して、Macのネットワーク名で証明書を作成します。 Macのネットワーク名取得 [システム環境設定]→[共有]で出てくる、以下の画面でMacのネットワーク名を確認します。 pemファイル作成 プロジェクト以下の適当なフォルダに移動して下記を実行。今回は public/ca というフォルダで実行しています。 cd public mkdir ca & cd ca openssl req -days 365 -new -nodes -newkey rsa:4096 -x509 -keyout cert.pem -out cert.pem 国など聞かれますが、大事なのは Common Name です。先程メモしたMacのネットワーク名を入力します。 これで cert.pem が出来ました。これで一
概要 エントリーポイントを分けることで、コードの見通しは良くなり、余分なコードのダウンロードを避けることができます。 今回、vue-cli 3.0 で立ち上げた趣味アプリに複数のエントリーポイントを用意したのですが、 思いの外苦戦したので設定方法を共有したいと思います。 設定方法 vue-cli の2系までは webpack.config に entry を記述することで、複数のエントリーポイントに対応する事ができました。1 しかし、vue-cli 3.0でセットアップしたプロジェクトには webpack.config が生成されません。 その代わりに vue.config.jsに vue-cli の設定を記述することができます。2 この中で pages オブジェクトとして、複数のエントリーポイントを定義することができます。 この状態を multi-page mode と呼びます。 vue
こんにちは!高野です。 Webpackレベルアップシリーズの第3弾はloaderです。これは .js ファイル以外も最終的に .js ファイルとして結合するためのパーサーのような機能を提供するもので、今やWebpackを利用する主目的と言っても過言ではありません。 loaderの設定方法を理解して、CSSファイルでも画像ファイルでもTypeScriptファイルでも、何でもバンドルできるようになってしまいましょう! コンテンツ Webpack Level 1: 裸のWebpackのデフォルト動作を理解する Webpack Level 2: 設定ファイルをカスタマイズする Webpack Level 3: loadersを追加して.js以外のファイルを結合する Webpack Level 4: Webpack Pluginsを用いて静的サイトをS3に自動デプロイ <- 今ここ 事前準備 まずは
はじめまして。sekinoca です。 今回は React を使って作成した Web ページを TravisCI を使って GitHub Pages に自動デプロイする方法を紹介します。 少し丁寧に説明しすぎた感があるので適宜読み飛ばしてください。 ソースコード 今回の使用するソースコードは以下になってます。 https://github.com/sekinoca/sekinoca.github.io 使ったもの React Redux React Redux Webpack Webpack-serve Material-UI TravisCI リポジトリの作成 Repository name に <username>.github.io と入力し、Public リポジトリとして作成してください。 * <username> の部分は自分の GitHub ユーザー名に置き換えてください。 W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く