先日、社内のSlackでpixivさんのブログ記事 今日から簡単!Webpacker 完全脱出ガイド がシェアされてて、『あっ、これは...弊社でもやったやつではないか。』とおもいました。Webpackerは便利なんですけどね。 本記事はこのpixivさんのポストを受けて WebpackManifest というgemを紹介します。 ラクスルでのWebpackerを辞めた経緯 もともとWebpackerを使った管理画面プロジェクトがあった そこにECサイトも乗せるようなった package.jsonは管理画面、ECサイトで分けて管理したかった Webpackerは1個のpackage.json、1個のwebpackコマンド、1個のmanifest.json前提の作りなので、package.json分けて複数のwebpackビルド処理系を作りたいラクスルの用途に合わなかった => 脱Webpa
そもそもの前提問題としてReact-NativeではHMRを有効化してもStateless Functional Component(以下SFC)に対してhot module replacement(以下HMR)してくれない問題がある。 https://github.com/facebook/react-native/issues/10991 上記のissueに記載あるが babel-plugin-functional-hmr を入れることでSFCに対してもHMRを有効化出来る。これで全て解決!と行けば良いのだが、、、 babel-plugin-functional-hmrを有効化した状態でjestのsnapshotテストをするとテストケースが失敗することがある どういうケースで失敗するのか? 普段僕は業務でもプライベートでも styled-components を使用しています。 今回の
【Vue】VueCLI3に頼らずVue.jsの開発環境構築をする 【babel7, .vueファイルのeslint + prettierなど】Vue.jswebpackESLintprettier Vue.jsの開発環境を手作りした話 書いた日:18/10/19 手動で構築した開発環境は暖かみがちがう 古事記にもそう書かれている 動機 環境構築手動でやるのが好きになって来たこの頃、 VueCLIを久しぶりに触ってびっくりしました なんやこれ! $ vue add @vue/eslint って何!? 知らんところで色々起きるの!こわ!!富豪的すぎない!? https://cli.vuejs.org/guide/plugins-and-presets.html#plugins と思いイチから環境構築した話 単一ファイルコンポーネントのeslint/prettierにも興味があったしね! Vue
module.exports = { build: { extend: ({ module, output }) => { // rulesの先頭に追加 module.rules.unshift({ test: /\.worker\.js$/, loader: 'worker-loader' }) // HMR時にWebWorkerでwindow is not definedになる問題対策 output.globalObject = 'this' } } } worker-loaderの設定をArray.push()でmodule.rulesの最後に追加すると、うまく動きませんでした。なのでArray.unshift()で配列の先頭に追加しました。 vue-loaderとかbabel-loaderが先に処理してしまうからでしょうか。 また、webpackのHMRが有効になっていると(Nux
webpack v4がリリースされてから久しいですが、v3を使っているという方はまだそれなりにいるのではないかと思います。 私の業務で触れた当初、v4はリリースしたてでプラグイン周りもまだベータが取れていかなったのでv3を選択していましたが、安定してきたのでv4に移行しました。 移行の段階でいつくかのエラーとの戦いがありました。直接的な原因がわかるエラーは良いのですが、間接的にしか読み取れないエラーもあったのでpackage.jsonと見比べて不足している変更がないかわかるよう対照表にしました。 現在移行を検討している方、詰まっている方へ何かの助けになれば幸いです。 パッケージ v3 v4 用途 備考
ウェブ上で動くようにした uiflow-web とりあえず使ってみる ソースコードを見る みんな画面遷移図を描こう。 経緯 もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った 上記のツールは良さそうだったがインストールが面倒だった。 大変だったこと node の fs や util などへのアクセスを無効化やモックを割り当てるのに苦労した。 最終的には下記のようになった。 { /* 省略 */ node: { fs: 'empty', child_process: 'empty', // util は npm install --save util した }, resolve: { alias: { // png 対応をあきらめているため使わない 'spawn-stream': 'node-libs-browser/mock/empty', }
Important: If you are using Babel 7.4, make sure to check out the post Updating to Babel 7.4 on some of the breaking changes. In this post we’ll set up a project with Webpack and Babel 7. You’ll learn the basics of Babel and some cool features of what it can do with your code. What is Babel? This is what the website says: Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code in
前書き Reactの案件の中で日本語のPDFを出力する必要があり、 そのためにクライアントサイド(React側)のみで日本語PDFを出力する方法をまとめたので記事にしました。 前準備 今回は、pdfmakeというクライアントサイドでPDFを出力するJavaScriptライブラリを利用します。 npmパッケージでも存在するのでコマンドでインストールできるのですが 日本語フォントを利用するため、Githubからjsファイルを落とします。 bpampuch/pdfmake 上記のリポジトリから以下のファイルを落とします。 - pdfmake.min.js - vfs_fonts.js 日本語PDF出力の準備 pdfmakeは、そのまま利用すると日本語フォントが利用できません。 そのため、独自に日本語のフォントを利用できるようにする必要があります。 ダウンロードしてきた、vfs_fonts.jsに
ID: FN1807001 Technique: HTML5 / ECMAScript 2015 Tool: Vue CLI 3.0.0-rc.9 Vue CLIは、Vue.jsでアプリケーションをつくるための、コマンドラインインタフェース(CLI)にもとづく開発ツールです(図001)。2018年7月29日にv3.0.0-rc.9が公開されました。本稿では、Vue CLIの機能とシステムの構成要素について簡単にご説明します。 図001■Vue CLI 3サイト 01 Vus CLIの機能 Vue CLIは、 Vue.jsの開発を手早く進めるためのシステムです。つぎのような機能が備わっています。 インタラクティブなプロジェクトのひな型作成 - @vue/cli 設定なしに即使えるプロトタイプ作成 - @vue/cli + @vue/cli-service-global 実行時の依存設定 -
概要 vue.jsをSPAとして使ってみようと思って環境を作るのに調べた内容をメモしておく。 node.jsインストール まず、ベースとなるnode.jsを「brew」と「nodebrew」を使ってインストールしてみる。 # nodebrewインストール $ brew install nodebrew $ mkdir -p ~/.nodebrew/src # <- フォルダ作ってないとinstallでコケる $ nodebrew -v nodebrew 1.0.1 # インストール可能なnode.jsのリストを表示 $ nodebrew ls-remote # version8.9.4をインストール $ nodebrew install-binary v8.9.4 $ nodebrew ls $ nodebrew use v8.9.4 # nodeとnpmコマンドのパスを通す $ node
これまで 例えば、elm make src/Main.elmとするとindex.htmlを生成してくれて、これをブラウザで開けば結果が表示されます。 また、elm reactorとすれば、開発用のサーバーを立ち上げてくれて、そこからElmのコードの実行が出来ます。 CssフレームワークやJavaScriptライブラリの導入 ただ、やっぱportsやflagsを利用したり、何らかのjsライブラリやcssフレームワークを取り入れたくなってきます。これを実現するには、エントリーポイントとなるindex.htmlを用意し、 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Main</title> <link rel="stylesheet" href="whatever-you-want.css"> <script src="
のように自動的に書き換えてしまうのです。 もちろんCSSファイルのクラス名を書き換えるだけでは本来の text クラスを持つHTML要素にスタイルが適用されなくなってしまいますから、書き換えたクラス名の対応関係を JSON オブジェクトとして以下のように出力します。 HTML側がこの JSON オブジェクトを使って適切なクラス名を各要素に付与するようにすることで、無事に CSS で定義したスタイルがその要素に適用されます。 このようなクラス名の衝突をなくす工夫によって、アトミックデザインなどに使える再利用可能な CSS の記述が可能になります。 関連手法との比較 「CSS modules を使いたいから Elm で CSS modules を使えるようにした」みたいなのは無能な人がやることです。 いったん落ち着いて「本当に Elm で CSS modules を使う新しい手法を考える必要が
dist/ - server.bundle.js public/ - client.bundle.js src/ - client.js - server.js package.json webpack.config.js const path = require('path') const nodeExternals = require('webpack-node-externals') const env = process.env.NODE_ENV || 'development' const isDevelopment = env === 'development' module.exports = { mode: env, target: 'node', devtool: isDevelopment ? 'source-map' : false, entry: { 'public
$ yarn eslint --init ? How would you like to configure ESLint? Answer questions about your style ? Which version of ECMAScript do you use? ES2018 ? Are you using ES6 modules? Yes ? Where will your code run? Browser ? Do you use CommonJS? Yes ? Do you use JSX? Yes ? Do you use React? No ? What style of indentation do you use? Spaces ? What quotes do you use for strings? Single ? What line endings d
概要 自分のライブラリのカバレッジがとても低く、何故なんだろうと思っていて調べたのですが、webpack側で作ったソースが含まれていたのが原因でした。 今回はその対応するために結構苦労したのでメモしておきます。 webpackのソースが含まれている時のカバレッジ(間違い) 自分のソースのみのカバレッジ(正しい) webpackでソースマップの出力をする devtool: 'inline-source-map'って所です。この設定を有効化することによってビルドファイルの中にソースマップを含めることができます。 この設定をしないとnyc側で元のソースを辿って正しいカバレッジを取得することができません。注意しましょう。 var nodeExternals = require('webpack-node-externals'); module.exports = { mode: 'developm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く