Babelのコマンドラインと、Browserifyを使って、ES2015/ES2016/ES2017のJavaScriptが大体全部が、IE11でも動くようにして動作確認を行いました。 requireを1箇所つかうだけなので、Browserify じゃなくて WebPack でもいいと思うので、お得意な方はそちらで使ってください。 対象 Windows環境ですが、たぶん Macでも使えます。 ES2015/ES2016/ES2017 を Chrome と Firefox で動作確認する 2018/02/27現在の Win版Chrome と Firefox では、Babel変換しなくても全部動いてます。その動作確認を次のファイルによって行います。 index.htmlをブラウザで開くと、エラーもなく[test finish]とメッセージが表示されれば、動作確認完了です。 IE11では当然エラ
関連記事 ビルドせずに 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 を
となってしまう 以下によればそういうもんみたいなのであきらめるしかない 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などのモジュールバンドラーは最近のWeb開発ではなくてはならない存在ですが、基本的には設定ファイルを書いてコマンドをたたくだけでバンドルができてしまうので、それらがどのようにモジュールの依存関係を解決しバンドルを作成しているのかという裏側の仕組みまで知る機会はあまりないかと思います。 私自身もVue.jsアプリを作っていたりしますが、Webpack周りはvue-cliにお任せしてしまっているので、Webpackについてはあまり詳しくありません。 しかし先日Webpackによるビルドがうまくいかないことがあり、何が原因なのか調べるのにバンドルのソースを確認しようとしたのですが、どこに何が書いてあるのかよくわからず非常に苦労しました。 そんな時にTwitterでminipackというリポジトリを見つけました。 https://github.com/
var Ether = (function() { /** * コンストラクタでethereumjs-txとethtereumjs-utilを読み込み */ var Ether = function(require) { if(!(this instanceof Ether)) { return new Ether(require); } this.Util = require('ethereumjs-util'); this.Tx = require('ethereumjs-tx'); } Ether.prototype.setChain = function(chain){ switch(chain){ case 'mainnet': return {'node':'https://mainnet.infura.io/[infura.ioのAPI KEY]','api':'https:
はじめまして。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
追記: webpack-serve は非推奨になり、 webpack-dev-server の開発が再開しました。ここは webpack-dev-server を使っておきましょう。 とりあえず動かしたい場合は https://qiita.com/ma2saka/items/eb4190a009da9649583c に最低限の設定方法を書いたのでそちらを参照する。 webpack-serve は webpack で開発しながら動的にビルド走らせてサーバで動作確認するためのものと認識している。「ファイルを監視して webpack を適切に実行してブラウザをリロードする」が主な役割。 ただ「本番系では手前にリバースプロキシがいてURLの書き換えやってる」とか「APIサーバが別にいてそっちへのアクセスはモックしたい」とかいろいろ都合があるもので、そのあたりはアドオンとしてカスタマイズする流れにな
本日、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
設定不要のビルドツール 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ページを開く