client sideをReactのようなSingle Page Applicationで開発している場合、ソースコードは自由に閲覧できてしまうため必要ない情報は入れないようにすべきです。 開発環境と本番環境でkeyやurlを切り替え、さらに他の環境のkeyやurlはソースコードに含まれないようにしたかったので方法を調べました。 gulpやgruntは使わずにnpmのscriptだけでやってみました。 サンプルコード 結論から書くと以下のようなscriptで実現できました。 npm script "scripts": { "build-production": "NODE_ENV=production browserify app/index.js -t babelify -t envify | uglifyjs -c warnings=false > public/bundle.js",
gulpでは本番環境用にconsole.logを削除するのにgulp-strip-debugした後にgulp-uglifyでminify化すれば削除できていました。 webpackで、productionモードの時だけconsole.logを削除する方法のメモ 環境 node v10.15.0 webpack v4.29.0 1. UglifyJsPlugin uglifyjs-webpack-plugin を使うパターン プラグインのインストール $ yarn add -D uglifyjs-webpack-plugin webpack.config.js const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { optimization: { minimizer: [ new Uglify
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core:コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors:セレクタ └ 目次 基礎 ├ *(すべて) ├ element(html要素) ├ #id名(ID属性) ├ .class名(clas属性) ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >(子要素) ├ +(直近の後要素) └ ~(後要素) 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core:コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors:セレクタ └ 目次 基礎 ├ *(すべて) ├ element(html要素) ├ #id名(ID属性) ├ .class名(clas属性) ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >(子要素) ├ +(直近の後要素) └ ~(後要素) 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです(筆者は使っていませんが…)。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
What is Polyfill.io? It's a service which accepts a request for a set of browser features and returns only the polyfills that are needed by the requesting browser. Why do I need it? There are lots of differing browsers and browser versions in use throughout the world, each one has a slightly different set of features to the rest. This can make developing for browsers a difficult task. The latest v
2019-03-28 追記 @babel/polyfill を import しとくだけでいいんじゃないかというマイブームが来ています。 IE で Array.prototype.flatMap() は使えた。詳しくは知らない。 TL;DR index.html に下の 1 行を追加しただけ1 で各種ブラウザ対応終わった。 + <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> IE 対応 社内で真面目に IE 対応する雰囲気が出てきてしまってどうしようかと思ってたところ noteをNuxt.jsで再構築した話 を思い出したので、とりあえず polyfill.io 入れてみようかってことで入れてみた。 Polyfill.io reads the User-Agent header of ea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く