f-sugerのブックマーク - はてなブックマーク

NPM パッケージを最新に保つ方法を考える - Qiita

皆さんは、フロントエンドで使っている NPM パッケージを更新してますか？私は意識が低いので、約 1 年くらい放置してました。。放置してしまうと、差が大きいバージョンアップのリスクが増えたり、パッケージのセキュリティリスクが見つかった時にすぐに対処できなくなる可能性があるので、定期的に更新した方が良いと思います今回は、以下の 2 つを紹介しますバージョンアップが行われたパッケージを定期的に通知する仕組みを作成 yarn upgrade-interactiveを使ったバージョンアップ NPM パッケージを通知／更新するサービスは既にありますが、通知するだけなら簡単に実装できるので作ってみますバージョンアップが行われたパッケージを定期的に通知する仕組みを作成準備 Slack と CircleCI を連携して、HookURL を発行 https://my.slack.com/ap

f-suger 2018/12/25

リンク

webpackを可視化するツールを紹介 - Qiita

フロントエンドのビルド（webpack）に関わる部分でパフォーマンス改善を考える時に、現状を可視化するため、いくつかプラグインを使ってみましたので、軽く紹介したいと思います可視化したい対象は以下の2つです・webpackの速度改善の為、遅いloaderやpluginを知りたい・バンドルファイルのサイズを減らしたいので、バンドルファイル内の各パッケージがどのくらいの容量を占めているか知りたい今回分析に使ったコードはこちらです https://github.com/kurosame/vuejs-boilerplate 遅いloaderやpluginを知りたい speed-measure-webpack-plugin

f-suger 2018/09/16

リンク

1年前に作ったフロントエンド環境を色々新しくした - Qiita

新規立ち上げのチームを異動して、1年前に作った会社のフロントエンド環境（Vue.js + webpack(+Gulp)）をベースに環境を作っていたのですが、色々古かったので、新しくしました今回作ったものはGitHubにあげてます https://github.com/kurosame/vuejs-boilerplate この中からやったことをいくつかピックアップして紹介したいと思いますパッケージを最新にする npm install -g npm-check-updates npm-check-updates -u // package.jsonのパッケージを全て最新にして上書く npm update // package.jsonに記載してあるバージョンに更新する npm install 今回みたいにバージョンアップするパッケージが多い場合は、これでいいと思う他のパッケージに依存し

f-suger 2018/09/15

リンク

Vue2のディレクトリ構成を考える - Qiita

はじめに Vue2が良さそうなので、実装しながらディレクトリ構成について考えてみたいと思います。 Vuexも使います。環境構築 Vue.jsではvue-cliが用意されており、最初の開発環境が簡単に作れます。手っ取り早く動く環境を作りたいときなど試してみると良いです。 npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev またvue-cliは[ Webpack / Browserify ]の両方に対応されており、以下の4つのテンプレートが用意されています。 browserify browserify-simple webpack webpack-simple vue-cliはWebpackの2系に移行済みです！ ├── assets ├── dist ├── gu

f-suger 2017/06/16

vue.js

リンク

Vue.jsでサーバサイドレンダリングしたい - Qiita

前置き今作っているシステムは社内ツールとして作っているのですが、将来的に弊社のクライアント向けに公開するみたいな話もあり、古いJS・低速なネット環境も想定されるので、それを解決する手段の１つとしてSSR（サーバサイドレンダリング）を勉強します。 https://jp.vuejs.org/v2/guide/ssr.html こちらのVue公式ドキュメントを参考に作ってます。 http://qiita.com/koki_cheese/it ems/ce5f16111e8ca251838d Webpack周りはこちらが参考になりました。 SSRされていない状態以下は画面に文字列を表示するだけのコードです。