JavaScriptのソース内で環境依存の値を切り替える - Qiita
はじめに Reactのアプリケーションの開発の際、環境ごとに値を切り替える必要があったので、その時採用した方法をまとめたものです。 方法 いくつか方法はありますが、今回は以下の方法を採用しました。 環境毎に切り替える値をまとめたファイルを各環境毎に作成する webpackでビルドする際に、環境変数からどの環境向けのビルドかを取得して、読み込むファイルを切り替える 切り替える方法はwebpackのarias機能を利用しています。 動作環境 $ npm --version 6.4.1 $ node --version v10.13.0 使用したライブラリのバージョン React: 16.6.1 webpack: 4.25.1 Node.jsでの環境変数 Node.jsでは環境変数はprocess.envで使用できます。 実装例 ここではAPIサーバのURLを例にしています。 ディレクトリ構造は
Webpackを使ってReact, Sass, es2015の開発環境を構築してみる - Qiita
webpack.config.jsの作成 プロジェクトのルートディレクトリで touch webpack.config.js webpack configを編集していきます。 ここでは1系と2系の違いだけを書いていきます。 const path = require('path'); const webpack = require('webpack'); module.exports = { context: path.join(__dirname, 'src'), entry: { bundle: './index.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { loader: 'babel-loader', test: /\.js[x]?$
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動JavaScriptNode.jswebpackwebpack-dev-server 概要 Webpack 4を利用した開発に便利な webpack-dev-server の設定メモです。 webpack-dev-serverのソースコードと公式wiki、公式Docを参考に実動確認した結果を書きます。 HMR等オートリロード系の設定(--hotとかとか--inlineとか)やよく使いそうなCLIオプションなど理解しておくためのメモです。 環境 本投稿で使っている環境は以下の通り。 webpack-dev-server:3.1.7 webpack:4.17.1 webpack-cli:3.1.0 webpack-dev-server とは webpack-d
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
webpackのTree Shakingを理解して不要なコードがバンドルされるのを防ぐ - Qiita
はじめに webpack の Tree Shaking に関する備忘録です。以下を目的とした記事になります。 Tree Shaking とは何か、なぜ Tree Shaking をするのかを理解する webpack を利用して Tree Shaking するためにはどうすれば良いのかを理解する Tree Shaking 以外の「デッドコードをバンドルさせない」ための手段を理解する 解説に利用しているコードの最終形態は GitHub 上にあります（hira777/webpack-tree-shaking-example）。 webpack を理解していることを前提とした記事ですので、基礎知識を習得したい方は webpack 4 入門をご覧ください。 Tree Shaking とは webpack などでファイルをバンドルする際に、デッドコード（利用されていない不要なコード）を除去してファイル
なんとなくで理解しないWebpackのCSS周辺 - Qiita
CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考
React & TypeScriptの
環境構築と実装Tips
Transcript 3FBDU���5ZQF4DSJQUͷ ڥߏஙͱ࣮5JQT wTBLJUP !@@TBLJUP@@ � w'SPOU�&OE�&OHJOFFS� w3FBD XFCQBDL (BUTCZ+4� w&WFOU� w#POpSF�'SPOUFOE� w3FBDU�NFFUVQ� w*OTJEF�'SPOUFOE� *OTJEF�'SPOUFOE���ͷ$'1ืूதʂʂ IUUQT���EPDT�HPPHMF�DPN�GPSNT�E�F� �'"*Q2-4q17/@�435:#�OK%��5"(8CM,D�;6H�2W'Z�#G(X9q%��@H�WJFXGPSN ΞδΣϯμ wDSFBUF�SFBDU�BQQ� wBXFTPNF�UZQFTDSJQU�MPBEFS� wUT�MPBEFS� w!CBCFM�QSFTFU�UZQFTDSJQU� w࣮5JQTΛগʑ
JavaScriptでデプロイ環境ごとに設定ファイルを読み込む方法
実現したいこと リリース環境と開発環境でAPIのオリジンを替えたい オリジンを環境変数として別ファイルに定義したい リリースするJSファイルに開発環境用の記述が混ざらないようにしたい クライアントサイド(JavaScript)内で完結させたい 解決策 webpackを使ってビルドする前提で、ビルド時にprocess.dev.NODE_ENVを見て読み込む設定ファイルを切り替える方法をとりました。 ファイル構成 app ├ ... ├ webpack.config.js └ src ├ environment ├ index.js ├ _development.js └ _production.js _development.jsと_production.jsがそれぞれ環境ごとの設定ファイルです。 index.jsが設定ファイルを切り替えて読み込む主体です。 環境ごとの設定ファイル 当然と言
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～ - Qiita
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～JavaScriptes6FontAwesomewebpackbabel 概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。
webpack@4 で出力するファイルをリビジョン管理する - 30歳からのプログラミング
ここでいうリビジョン管理とは、JavaScriptファイルやスタイルシートのファイル名に、ハッシュ値などのユニークな値（リビジョン）を付与すること。 そうすることで、ブラウザが古いファイルのキャッシュを利用してしまい変更が反映されない、という事態を回避できる。 手動でファイル名を更新することも可能ではあるが、ビルドの際に自動的に付与されるようにするのが一般的。 ここでは、webpackのv4でリビジョンを付与する方法を書いていく。 この記事で出てくるライブラリについては以下のバージョンで動作確認している。 webpack@4.23.1 webpack-cli@3.1.2 html-webpack-plugin@3.2.0 css-loader@1.0.1 mini-css-extract-plugin@0.4.4 clean-webpack-plugin@0.1.19 出力するファイルにハ
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
webpackと仲良くなろう
Transcript XFCQBDLͱྑ͘ͳΖ͏ 8F�"SF�+BWB4DSJQUFST��!��UI None XFCQBDLͱྑ͘ͳͬͯ ͞Βʹ։ൃޮΛ ͋͛ΔΑ͏ʹͳΔͨΊͷࢿྉͰ͢ XFCQBDLͱྑ͘ͳΔલʹ ใΛݟ͘͢͢Δ ಛʹͳʹઃఆ͠ͳ͍߹ ͜ͷ··ͰݟͮΒ͍ XFCQBDL�EBTICPSE IUUQT���HJUIVC�DPN�'PSNJEBCMF-BCT�XFCQBDL�EBTICPBSE CFGPSF BGUFS Կ͕ΕΔͷ͔ w� -PH��ϏϧυϓϩηεͱΤϥʔϩάͷه� w� 4UBUVT��Ϗϧυϓϩηεͷεςʔλε� w� 0QFSBUJPO��ϏϧυϓϩηεͰൃੜ͢Δಛఆͷૢ࡞� w� 1SPHSFTT��Ϗϧυͷਐḿঢ়گ� w� .PEVMFT��ϞδϡʔϧϦετҰཡʹαΠζͱόϯυϧαΠζ� w� "TTFUT��Ϗϧυ
webpack時代の終わりとparcel時代のはじまり - Qiita
設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを
シンプルだけどシッカリ働く最新のECMAScript開発環境 - Qiita
どうも、最近スマホゲー界隈からコンバートしてきた新米フロントエンド戦士です。 数年前はブラウザゲー界隈にいたんですが…完全に浦島太郎状態です。 ここ数ヶ月で色々学ばせてもらいつつ、自分なりのNode開発環境が整ったので公開しちゃいます。 完成した環境はこちらのv1.0（masterの最新はこちらでクロスプラットフォーム対応を行ったものになります） 2018/8/28 追記 本日 Babel7がリリースされました！ それに伴いパッケージ名が変更されていました。 babel-core -> @babel/core babel-preset-env -> @babel/preset-env また babel-preset-env2.0でbabel-polyfillは不要になるらしい の件が実験的機能として導入され、以下のようにuseBuiltIns:usageと設定すると必要に応じて自動でpol
Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog
小ネタ。 Webpack(というよりモジュールバンドラ) を使っていて、ディレクトリの階層が深くなってくると import や require でロードするファイルのパスを ../../../../foo.js のように ../ の数を正確に指定するゲームになってくる。 以下のように書くことで src ディレクトリをルートにしてパスを指定することができるようになるのだけど resolve: { modules: [ path.resolve(__dirname, 'src'), "node_modules" ], }, 同僚氏に npm でいれたパッケージか、src にあるファイルか分からないから、src ディレクトリの alias を定義したらどうか、と勧められた。 resolve: { alias: { '@': resolve(__dirname, 'src'), }, }, これで
webpackチートシート - Qiita
フロントまわりのツールは群雄割拠してる感がすごくて手を出せずにいたのですが、Rails5.1 で gem webpacker が導入されたこともあってwebpack/yarn構成に魅力を感じています。 今どきのモジュール/パッケージ管理したいので、まずはwebpackです。 概要 webpack = JavaScriptファイルのバンドラ モジュール単位に分離されたjsファイルをひとつのjsファイルにまとめる(バンドルする) 結合の過程で、jsファイルの依存関係を解決する CommonJS, AMD, ES6 Moduleなど復数のモジュールシステムに対応する 競合はrequire.js(依存解決), browserify(バンドル)など オープンソース, MITライセンス 導入 npmでインストールする。 プロダクション環境ではバンドルした状態で配置するわけなので、開発環境のみを指定する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
