Browserifyユーザーがwebpackを覚え始めるには - Qiita
JavaScriptのバンドラーには今のところBrowserifyを使っているけど、webpackもどんなものか把握したいという人のための記事です。 記事執筆時点（2017/11）では、webpackのバージョンは3.8.1です。 とりあえずJavaScriptをバンドルする例 まずは単純な設定でwebpackを使ってみます。 必要なnpmパッケージはその名の通りwebpackだけです。インストールしましょう。 基本的に、webpackの設定はwebpack.config.jsというJavaScriptファイルに書いていきます。 このファイルをpackage.jsonなどと同じディレクトリに作ります。 これが基本ですが、以下の様にもできます。 （npm scriptsやgulpなどを通して）webpackを実行する際のオプションによって、明示的に設定ファイルを指定してもよい。 ファイル名を
JavaScript Babel/BrowserifyでES2015/ES2016/ES2017がIE11でも動くようにする - Qiita
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <script src="index.js"></script> </head> <body> </body> </html> "use strict"; var isObject = function(value) { if ( (Object.prototype.toString.call(value) === '[object Object]') && (!Array.isArray(value)) && (value !== null) && (typeof value !== 'undefined') ) { return true; } return false; }; var check = function(a, b,
React16 最小構成のビルド環境 browserify JSX無し - Qiita
関連記事 ビルドせずに CDN でReactを使いたい場合は、こちらの記事 ・React16 CDN でHelloWorld JSXありなし両方 - Qiita https://qiita.com/standard-software/items/0cdbcdb2a6d6355c946b JSXありで最小構成のビルド環境を作る場合は、こちらの記事 ・React16 最小構成のビルド環境 broserify reactify JSXあり - Qiita https://qiita.com/standard-software/items/781ec3f491f4f1bea7b6 それぞれ参考にしてください。 はじめに 最小構成の React 16 のビルド環境を作ります。 環境は、Windows 。 node.js インストールしておいてください。 インストール 今回は browserify を
React16 最小構成のビルド環境 browserify reactify JSXあり - Qiita
関連記事 ビルドせずに CDN でReactを使いたい場合は、こちらの記事 ・React16 CDN でHelloWorld JSXありなし両方 - Qiita https://qiita.com/standard-software/items/0cdbcdb2a6d6355c946b JSX無しで最小構成のビルド環境を作る場合は、こちらの記事 ・React16 最小構成のビルド環境 browserify JSX無し - Qiita https://qiita.com/standard-software/items/87c4a0dc3c67c426c31f それぞれ参考にしてください。 はじめに 環境は Windows 。 node.js インストール済みとします。 インストール 今回は browserify と reactify を使います。フォルダを決めてローカルインストールします。
React16 最小構成のビルド環境 browserify babelify JSXあり - Qiita
関連記事 React16 最小構成のビルド環境 browserify reactify JSXあり - Qiita https://qiita.com/standard-software/items/781ec3f491f4f1bea7b6 こちらの記事では Browserify で Reactify を使ったのですが、Babelも同時に使いたいという要望があると思われるので、React のための変換を Babelでやるようにするのがはやりのようですね。 ですので、Browserify の transform モジュールの babelify を使って変換を行います。 はじめに 環境は Windows 。 node.js インストール済みとします。 インストール 今回は browserify と reactify を使います。フォルダを決めてローカルインストールします。 npm init -
browserifyのrequireに指定できるのは文字列リテラルだけ - Qiita
となってしまう 以下によればそういうもんみたいなのであきらめるしかない https://github.com/browserify/browserify/issues/664#issuecomment-35615649 browserify doesn't work with conditional requires and can't be made to work with arbitrary dynamic requires without solving the halting problem first. Do something different instead. This is a dead end. あきらめられなかったので続き → browserify前にrequireのパスを正規表現で置換
WebpackやBrowserifyはどうやってバンドルを作っているのか - Qiita
はじめに WebpackやBrowserifyなどのモジュールバンドラーは最近のWeb開発ではなくてはならない存在ですが、基本的には設定ファイルを書いてコマンドをたたくだけでバンドルができてしまうので、それらがどのようにモジュールの依存関係を解決しバンドルを作成しているのかという裏側の仕組みまで知る機会はあまりないかと思います。 私自身もVue.jsアプリを作っていたりしますが、Webpack周りはvue-cliにお任せしてしまっているので、Webpackについてはあまり詳しくありません。 しかし先日Webpackによるビルドがうまくいかないことがあり、何が原因なのか調べるのにバンドルのソースを確認しようとしたのですが、どこに何が書いてあるのかよくわからず非常に苦労しました。 そんな時にTwitterでminipackというリポジトリを見つけました。 https://github.com/
Webpack Level 3: loaderを追加してjs以外のファイル以外を結合する - Qiita
こんにちは！高野です。 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に自動デプロイ <- 今ここ 事前準備 まずは
LineBotで Ethereum の web3.jsを操作する（その２ : ローカルで署名してから送金） - Qiita
やりたいこと 前回エントリ LineBotで Ethereum の web3.jsを操作する（その１: バックエンドで残高取得） ではバックエンドにてLine Messaging APIとweb3.jsを使ってパブリックチェーンのイーサリアム残高を取得しました。しかしながら、送金等その他の処理も全てバックエンドで行うとなると、 秘密鍵を外部に送る機会が生じるため、（暗号化されていようといまいと）危険。 WebStorageが使えない。 など色々不便が多いため、フロントで実装したいと思います。 イメージ図 とは言え、秘密鍵をスマホに保存するのはやはり危険が伴うので、WebStorageに保管するのは、アドレスのみに留めておきます。秘密鍵はペーパーウォレット等のQRコードから読めるようにします。 １ web3.jsの読み込み web3.jsはフロント用のライブラリが用意されているので、そのまま
React + Webpack を TravisCI で GitHub Pages に自動デプロイ - Qiita
はじめまして。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
（強いて言うなら）サーバー・インフラ開発者の、初めてのWebページ開発 その2. HTMLとJavaScriptとの連携 - Qiita
（強いて言うなら）サーバー・インフラ開発者の、初めてのWebページ開発 その2. HTMLとJavaScriptとの連携JavaScriptjQuery初心者Ajaxbrowserify はじめに Webページ開発初心者のサーバー・インフラ開発者が簡単なページ開発を行った際の記録その2です。その1はこちら。(要約: CSS設計大事) 今回はJavaScript部分を作ってみます。 環境構築 Webサーバーとして動作させたい: Node.jsの利用 まずはjsで実際にWebサーバーとして動作させたいので、Webサーバーの用意をしましょう。私は自宅に立てたルーターをHTTPサーバー(lighttpd)にします。 …なんて「Webサーバー」とくくられるとハードルが高くなっちゃいますが、Node.jsというサーバーサイド向けのJavaScript実行環境を利用すると、比較的簡単に簡易的なWebサー
webpack-serveで立てたサーバに外部から接続する(deprecated) - Qiita
追記: webpack-serveは開発が止まり、webpack-dev-server の開発が再開しました。したがってwebpack-dev-server を使っていきましょう。 開発環境として立てたローカルサーバに、PCのIPを指定して同じネットワークの他の端末から接続したいケースがたまにあります。例えば同じWiFi経由でスマホから接続したいとかそういう場合。 「webpack-serve で立てたサーバに外部から接続させる」ためには、待ち受けのIPアドレスとポートを localhost だけではなく外部から見えるIPアドレスにバインドする必要があるのと、どのIPアドレスを用いて接続しても立てた開発サーバのコンテンツを返すようにしたいです。特に何も設定せずに webpack-serve を起動した場合、接続できるのはそのローカルサーバを立ち上げたホストからのみです。 webpackとw
webpack-serve v2.0変更点 (deprecated) - Qiita
追記: webpack-serveは開発が止まり、webpack-dev-server の開発が再開しました。したがってwebpack-dev-server を使っていきましょう。 以下備忘録。2.0.1 はドキュメント更新と open 時の path の処理の軽微な修正のみなのでスルー。 see https://github.com/webpack-contrib/webpack-serve/releases/tag/v2.0.0 エントリポイントが serve(options) から serve(argv, options) になった serve関数の戻り値Promiseはネットワークのlistenの開始後に渡されるから listening イベントを待つ必要はないよ。 serve(argv, options) の Promise の結果値には app, on, options が含ま
webpack-serve で動的な処理をアドオンする(deprecated) - Qiita
追記: webpack-serve は非推奨になり、 webpack-dev-server の開発が再開しました。ここは webpack-dev-server を使っておきましょう。 とりあえず動かしたい場合は https://qiita.com/ma2saka/items/eb4190a009da9649583c に最低限の設定方法を書いたのでそちらを参照する。 webpack-serve は webpack で開発しながら動的にビルド走らせてサーバで動作確認するためのものと認識している。「ファイルを監視して webpack を適切に実行してブラウザをリロードする」が主な役割。 ただ「本番系では手前にリバースプロキシがいてURLの書き換えやってる」とか「APIサーバが別にいてそっちへのアクセスはモックしたい」とかいろいろ都合があるもので、そのあたりはアドオンとしてカスタマイズする流れにな
Parcel v1.9.0 がリリースされました 🎉 - Qiita
本日、Parcel v1.9.0がリリースされました Parcel v1.9.0 is out! 🚀 🌳 Tree Shaking + scope hoisting for both ES6 and CommonJS modules! 👀 Up to 2x faster file watcher 💵 Cache resolved file names 🔎 Extended resolver for SASS, LESS, and Stylus 🚨 Improved browser error reporter 📝 Read more: https://t.co/6IXWVOkMRC pic.twitter.com/LcdVsKt0RK — Parcel (@parceljs) 2018年6月14日 元記事） 📦 Parcel v1.9.0 — Tree Shaking, 2
React.js 開発環境を webpack4 + webpack-serve + babel 7 で作る(Deprecated) - Qiita
React.js 開発環境を webpack4 + webpack-serve + babel 7 で作る(Deprecated)webpackReactwebpack-serve 追記: webpack-serve は非推奨となり webpack-dev-server が開発再開しました。新しく始める際はスタックに webpack-serve を採用しないほうがよいでしょう。webpack-dev-server で同じような内容を書き残したのがこちら。 なんか普段開発しているフロントアプリケーションが依存しているツールスタックがそれぞれ少しずつバージョンあがっているので、手軽に環境用意するための手順を備忘録がてら書いておきます。この記事の流れで React-Router 利用時のフォールバックコンテンツ返す設定は別に書いた。 webpack 4.x webpack-serve 2 bab
Parcelでバンドルされたファイルの内訳を確認する - Qiita
Webpackにはwebpack-bundle-analyzerというバンドルされたファイルの内訳や解析をみることができるプラグインがあります webpack-bundle-analyzer https://www.npmjs.com/package/webpack-bundle-analyzer Parcelでもプラグインをインストールするだけでこの機能を利用することができます それがparcel-plugin-bundle-visualiserです parcel-plugin-bundle-visualiser https://www.npmjs.com/package/parcel-plugin-bundle-visualiser 使い方 まずはプロジェクトにプラグインをインストールします
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の統合された設定ファイルは、タスクランナーで逐次処理していたものを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
npm: browserify + jquery + jquery-drawer + iscroll: IScroll is not defined. - Qiita
browserify前にrequireのパスを置換 - Qiita
