Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload. Save valuable development time by only updating what's changed. Instantly update the browser when modifications are made to CSS/JS in the source code, which is
Reduce JavaScript payloads with code splitting Stay organized with collections Save and categorize content based on your preferences. Nobody likes waiting. Over 50% of users abandon a website if it takes longer than 3 seconds to load. Sending large JavaScript payloads impacts the speed of your site significantly. Instead of shipping all the JavaScript to your user as soon as the first page of your
この内容は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/#真偽値属性 しかし、いざ使おうとすると、な
やりたいこと 前回エントリ LineBotで Ethereum の web3.jsを操作する(その1: バックエンドで残高取得) ではバックエンドにてLine Messaging APIとweb3.jsを使ってパブリックチェーンのイーサリアム残高を取得しました。しかしながら、送金等その他の処理も全てバックエンドで行うとなると、 秘密鍵を外部に送る機会が生じるため、(暗号化されていようといまいと)危険。 WebStorageが使えない。 など色々不便が多いため、フロントで実装したいと思います。 イメージ図 とは言え、秘密鍵をスマホに保存するのはやはり危険が伴うので、WebStorageに保管するのは、アドレスのみに留めておきます。秘密鍵はペーパーウォレット等のQRコードから読めるようにします。 1 web3.jsの読み込み web3.jsはフロント用のライブラリが用意されているので、そのまま
最近 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":
2020/06/21追記: 2020/6/19にParcel 2のベータ版が公開されました。 🚀 Parcel 2 beta 1 has been released! 🌳 Improved tree shaking 🗺 20x faster source map builds #️⃣ Improved content hashing 🚨 Resolver diagnostics 📊 More accurate bundle reports 🐞 Tons of bugfixes! 📝 Read more: https://t.co/hMGtOKEOs3 🌎 New website! https://t.co/SWaS5OvWIA — Devon Govett (@devongovett) June 18, 2020 それに伴い、Parcel 2でいくつかの開発環境を構築する記
$ 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 が出来ました。これで一
こんにちは。 ビズリーチ インキュベーションカンパニーで新規事業のエンジニアをしている藤村です。 幾つかのメディアに取り上げて頂きましたが、現在開発マシンとして全エンジニア、デザイナーの希望者に、iMac Pro と標準スペックの MacBook Pro を支給しています。 ※ ノート派の方は高スペックの MacBook Pro を選択できます。 一方で、iMac Pro って普通のサーバーサイド、Web 開発程度で効果あるの? と疑問を持つ方もいるかもしれません。 実際に私達も計測する前はそうでした。 結論からいうと、クリーンビルドで 2.13 倍〜 6.67 倍、インクリメンタルビルドで 1.33 倍〜 7.00 倍という効果がありました。 今回は、ビルド速度と金の弾丸の相関に興味がある方々に向けて、導入背景の小話と、iMac Pro 導入後のリアルなベンチマーク結果を共有したいと思い
概要 エントリーポイントを分けることで、コードの見通しは良くなり、余分なコードのダウンロードを避けることができます。 今回、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
JavaScriptの名前空間とモジュール分割方法 require(node.js/browserify) HTMLScriptタグ WSH フル対応JavaScriptNode.jsWSHRequirebrowserify タイトルが長くなりました。 名前空間、モジュール分割。 これだけでJavaScript業界(界隈)はひどく混乱しているような気がしました。 自分はクラスタイプの.NET系経験のある、JavaScriptを初めて1ヶ月程度の者です。 他言語では迷う事のない言語の根本的な名前空間とかスタティッククラスモジュール分割的な機能が、JavaScriptだと歴史的経緯として実装がさまざまになってしまっている事に驚きました。 どうにか、混乱しないようにしておかないといけないな、と思ったのでまとめておきます。 例えば、'名前1.名前1-1.名前1-1-1'、みたいな'文字列'をピリオ
背景 browserifyは大変便利なコマンドです。 それ自体には、複数ファイルを処理するためのオプションはありません。 gulpとgulp-browserifyを組み合わせて複数ファイルを処理する方法があります。 結論 gulp-browserifyは、既にメンテナンスされていません。 npm scriptでnpm-run-allを使って置き換えました。 npm scriptで置き換え gulp-browserifyの場合 srcディレクトリにあるclient.jsとexecute.jsを変換します。 const gulp = require('gulp') const browserify = require('gulp-browserify') const src = 'src/' const dest = 'dest/' gulp .task('browserify', () =>
Reactアプリの開発環境は create-react-app で簡単に構築できる のですが、文法チェックから自動ビルドまで含めた万全の環境のため、ちょっと試すには少し重い気がします。なのでシンプルなトランスコンパイル環境を模索してみました。 最初は babel-cli だけで ok かと気軽に始めたのですが、Webブラウザ環境での import 問題が解決できず、結局は browserify と babelify の組み合わせに落ち着きました。 特に babelify のページには設定サンプルが豊富で、とても参考になりました。 準備 node と npm は利用できるよう準備しておいてください。私は node.jsの導入 あたりを参考に導入しました。 まずは作業用のディレクトリ(フォルダ)を作成します。今回は "rtk-react" としました。そして src, build のサブディレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く