Webpack2のTree Shakingを試す - Qiita
社内勉強用資料。 Tree Shakingとは？ ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。 もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。 webpack2のTree Shakingの仕組み Tree-shaking with webpack 2 and Babel 6 上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じ
JSON Schemaとreact-jsonschema-form - Qiita
{ "title": "ユーザー", "type": "object", "properties": { "id": { "title": "ID", "type": "string", "pattern": "^[0-9a-zA-Z]{8}(-[0-9a-zA-Z]{4}){3}-[0-9a-zA-Z]{12}$" }, "name": { "title": "ユーザー名", "type": "string", "pattern": "^[\\sa-zA-Z]+$" }, "age": { "title": "年齢", "type": "integer", "minimum": 0 } }, "required": [ "id", "name" ] }
Backpackについて調べた - Qiita
お手伝いしているプロジェクトでBackpackなるものが使われており、はてな？と思ったので調べました。 Backpackとは？ Backpack is a minimalistic build system for Node.js projects. Backpackは、Node.jsのプロジェクトの最小限のビルドシステムだぜ！とのことです。create-react-appやNext.jsにインスピレーションを得たようで、設定ファイルの記述や追加のnpmパッケージなしで、 Babelによるトランスパイルの実行。async/await、object rest spread、class propertiesなどの構文の利用 source-mapの対応（source-map-support） nodemon的なファイル監視、再実行（Live Reloading） が、出来るようです。内部ではwe
prettier-markdownでmarkdown内のコードを整える - Qiita
$ cat README.md ## JS ```js function hoge( arg1, arg2) { return 'hoge'; } ``` ## SCSS ```scss .hoge { .fuga { .duga { text-align: center; } } } ``` CLIは、prettier-markdown 対象ファイル オプションの形式で実行する。対象ファイルはsrc/**/*.mdみたいな形式でもOK。オプションはprettierにダイレクトに渡されるっぽいので、--single-quoteなど、prettierにあるオプションはそのまま使える。--dryオプションだけが例外で、--dryオプションを使うと、どのファイルが更新されるかが表示されるが、実際にはファイルは更新されないお試しモード（dryrun）で実行できる。（prettierのWarning
webpackのDLLバンドルを使ってビルドを速くする - Qiita
How to make your Webpack builds 10x faster 「webpackビルドを10倍速くする方法」というスライドを見つけた。 内容を要約すると、こんな感じ。 css-loaderは0.15未満を使う cacheDiretoryはデフォルトで無効だから有効にする HappyPackを使う DLLバンドルを使って、静的コードのバンドルを分ける DLLバンドルは聞いたことがなかったので調べた。 DLLバンドルとは Dll bundles doesn't execute any of your module's code. They only include modules. モジュールをまとめただけのbundleで、scriptタグで読み込んだ時点では含まれるモジュールは実行されず、他のbundleから参照された時に実行される。 <!-- こういうイメージ -->
schemizeのnode.js版作った - Qiita
shcemizeという、JSONからJSON Schemaを生成する便利なGemがある。 schemizeを使うためだけにGemfileを書くのが嫌だったので、node-schemizeを作った。 // とりあえずグローバルにインストール $ npm install -g schemize // デフォルト $ echo '{ "key": "value" }' | schemize {"type":"object","properties":{"key":{"type":"string"}}} // プリチー $ echo '{ "key": "value" }' | schemize --pretty { "type": "object", "properties": { "key": { "type": "string" } } } // プリチーはインデント数と"tab"が指定可能
ESLint2について調べた - Qiita
Node.js Advent Calendar 2015の7日目の記事です。遅刻してごめんなさいごめんなさい。 sinopiaをs3対応して記事を書こうと思ったのですが、思ったより手こずってしまい、ESLintの2系のalpha版が出たので、そちらについて調べました。 ESLint v2.0.0-alpha-1 released 新しいルール 下記のルールが新しく追加される。 array-callback-return Arrayのfilterやreduceなど、callback内で値を返す必要があるのに返してない場合にエラーを出す。 no-implicit-globals 暗黙的にグローバルに定義されている変数がある場合にエラーを出す no-restricted-imports 任意のパッケージのimportを禁止する prefer-rest-params ES6のRest Parame
yahoo/fetchrを使う - Qiita
先日参加した、isomorphic tokyo meetupで紹介されていたfetchrが良さそうだったので、使ってみた。 fetchrが解決する課題 React＋Fluxでサーバサイドレンダリング時に、superagentやaxios、isomorphic-fetchなどのIsomorphicなHTTPクライアントを使ってデータをフェッチするが、そのまま使うと下記のような課題にぶつかる。 ブラウザから直接BEのAPIにアクセスできない（またはさせたくない、外部のAPIでキー・シークレットをブラウザ側で持ちたくない）場合、そのAPIとProxyするエントリポイントを作る必要がある。 フェッチ部分のロジックが共有されるので、ブラウザではWeb API経由でフェッチして、サーバサイドレンダリング時は直接DBにクエリを叩きたい、みたいなのを自分で実装すると面倒。 fetchrはBEや外部のAPI
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
