知らないうちにJSON5 in Babel - Qiita
JSONは身近なフォーマットですが、手で書こうとすれば案外に書きにくいものです。実は、そういった問題をクリアするような「JSON5」というフォーマットがあって、しかも多くの人が利用可能な環境にあったりもします。 JSONの書きにくさ JSONはJavaScriptのオブジェクトリテラルから派生したものですが、データ交換用のフォーマットという性格もあってか、JavaScriptと比べて制約もあります。 オブジェクトのキーは二重引用符で括る必要がある（一重引用符や、何も書かないのは禁止） 文字列も二重引用符で括る必要がある（一重引用符は禁止） ケツカンマ禁止 コメントは入れられない うっかりしていてJSONとしてInvalidなものを作ってしまうことも多いし、設定ファイルにコメントを付けられないのもストレスの一因になったりします。 拡張した、JSON5 そんなJSONの使いにくさへの解決策とし
enebular の InfoType を ES2015 で書く - Qiita
InfoType の作成にチャレンジしようと、下記ドキュメントを参考に、infomotion-tool を実行してみました。 Creating an InfoType https://docs.enebular.com/ja/infomotion/infomotiontool ES5 のテンプレート 出力された plugin.js には、下記のような、古き良き prototype を使用したクラス宣言が書かれています。 function DataLogger(settings, options) { : } DataLogger.prototype.addData = function(data) { : } DataLogger.prototype.render = function() { : } DataLogger.prototype.clearData = function()
Webpackの--modeに応じてBabelのpresetsを設定する方法 - Qiita
はじめに Webpackの--modeごとにBabelのpresetsを設定する方法をメモします。 概要 環境 webpack : 4.21.0 webpack-cli : 3.1.2 @babel/core: 7.1.2 @babel/preset-env: 7.1.0 babel-loader: 8.0.4 ファイル配置 以下のファイルをプロジェクトディレクトリ直下に配置する。 package.json webpack.config.js babel.config.js 呼び出し方 npm scriptをコマンドラインから呼び出す。目的によってproductionモードとdevelopmentモードで呼び分ける。
babel-loader8で最新のreactの環境を構築する - Qiita
babel-loader 8 なんか知らぬまにupdateされていたようで、久々にreactの環境構築をしよとしたらめちゃくちゃエラー出て焦ったのでそれのメモ。 要はwebpackでreactとかをjsにトランスパイルするときによしなにやってくれるやつ。 babel coreとかと一緒にwebpackにぶち込む。 何が変わったのか babel-loaderを使うときに今まではbabel-coreとかbabel-preset-〇〇とかを使ってたのが、8系から@babel/〇〇ってライブラリを使うようになった。 なんだそれだけかって感じかもしれないが、呼び出しのときも変わったりして意外と面倒。 なので、変えないといけないところを変えたそのまま構築できるやつを載せときます。 環境構築 npm init npm install --save react react-dom npm install
nuxt.js(v2)でIE11対応をする（JS編） - Qiita
■動作確認済みバージョン nuxt.js(2.11.0) create-nuxt-app(v2.12.0) ■更新履歴 2020/2/5 最新のバージョンに合わせてリライトしました。 .browserslistrcファイルが使えるようになりました。 お勧めのpolyfill設定方法を追記しました。 特に設置の必要はありません（cool!）。以下に、確認・変更のポイントを記載します。 対応ブラウザの確認方法 対応ブラウザは「browserslistパッケージ」で確認します。ターミナルで% npx browserslistを実行してください。 % npx browserslist ディフォルト設置の対応ブラウザ ↓ and_chr 79 and_ff 68 and_qq 1.2 and_uc 12.12 android 76 baidu 7.12 chrome 79 chrome 78 chr
初心者がBabelでハマったこと - Qiita
目次 環境 Windowsではじめたら「.babelrc」ファイルが作れない Babeったら「Error: Plugin/Preset files are not allowed to export objects, only functions」 困った時のヒント 環境 ハマった時の環境です "devDependencies": { "@babel/core": "^7.1.2", "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babelify": "^10.0.0", "browserify": "^16.2.3" } Windowsではじめたら「.babelrc」ファイルが作れない Windowsでは新規ファイル作成から「.babelrc」ファイルを作ろうとすると「ファイル名を入力してください」というエラーになり
ES2015のモジュールをBrowserifyとBabelifyでビルドしてクライアントで読み込んでみる - Qiita
概要 今更ES2015やES2015(ES6)からES5（現行）のJavaScriptに変換してくれるBabelとか ES2015のモジュールを使うのにはBrowserifyやBabelifyというものを使うといいらしいなどがわかった ビルドする際に色々とエラーが出て詰まったのでメモ ES2015とは ECMAScript 2015（ES2015)のことらしい ES2015自体はJavaScriptそのものではなく、あくまで言語仕様とのこと JavaScriptはECMAScriptという言語仕様に基づいた言語のひとつ ECMAScript 2015はECMAScript 6th editionでECMAScript 6(ES6)とも呼ばれる つまり ECMAScript 2015(ES2015) = ECMAScript 6(ES6) その前がECMAScript 5(ES5)で、ES6
React/flowの環境をWebpackで構築する - Qiita
Reactを使ったアプリケーションを作る機会があったので、改めてその際に学んだことを整理しました。 これを読むことでReactを使って開発する際のwebpackの基本的な設定は理解していただければ幸いです。 ただ設定を載せるのではなく何のためにそうするのかを意識して伝えるようにしました。 実際のソースコードはこちらです。 前提 対象 今までReactを書いていたが、どうやって環境構築されているのかが分からない webpackを使ってReactの環境構築をしたい flowも使って型定義もしたい 環境 webpackとは webpackとは、モジュールバンドラのこと。モジュールとは、依存関係（互いに参照したりしている関係）のある複数のファイルのまとまりのことで、それらを一つのファイルに束ねる（bundleする）主体をバンドラと呼ぶ。 つまり、webpackは複数のファイルを一つのファイルにまと
Babel 7 へのアップグレードにあたっての修正点 - Qiita
これはなに？ とあるリポジトリを Babel 6 から Babel 7 にアップグレードするにあたって、公式のアップグレードガイドを読んで修正が必要だった箇所をまとめたものです。網羅的に記載している物ではないので、細部は公式のアップグレードガイドを参照してください。 公式のアップグレードガイド Upgrade to Babel 7 あわせて Babel 7 Released も読むと、今回のリリースの背景等も知ることができて面白いでしょう。 .babelrc の有効範囲の変更 .babelrc に設定した内容は package.json ファイルを含むディレクトリ配下には適用されなくなっています。 node_modules 配下も同様の制限を受けます。これは monorepo のように複数のパッケージを管理する際の拡張性に配慮した変更のようです。 一方で babel.config.js を
lodash のファイルサイズを lodash-webpack-plugin と babel-plugin-lodash を使って削減する - Qiita
lodash のファイルサイズを lodash-webpack-plugin と babel-plugin-lodash を使って削減するJavaScriptwebpacklodashbabel 概要 react で SPA を作成していたのですが、webpack-bundle-analyzer をみると、lodash の占める割合が大きかったので、少しでも減らせるような試みとして、 lodash-webpack-pluginと babel-plugin-lodashを使って、 ファイルサイズを削減しました。 利用した主なパッケージのバージョン "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-lodash": "^3.3.4", "babel-preset-env": "^1.7.0", "babel-pre
ざっくりECMAScriptとBabelの話 - Qiita
ECMAScriptとは？ ECMAScriptは、JavaScriptを元にして標準規格化されたスクリプト言語です。 JavaScriptはNetscapeによって開発されましたが、それをベースにしたJScriptをマイクロソフトが独自に開発していたりと、互換性に乏しい状態でした。そこで、1990年代後半に、情報通信システムの分野における国際的な標準化団体であるEcma Internationalによって、JavaScriptを元にした標準規格のECMAScriptが策定されました。 ECMAScriptのバージョン ECMAScriptは、ECMA-262という規格番号で標準化されています。 1997年に、1st editionである、ECMAScript 1が策定され、2009年に5th editionのECMAScript 5（以下、ES5）とアップデートをしてきました。 （4th
typescriptをbabelでビルドしつつlintや型チェックもやりたい - Qiita
(2019/04/14追記) tslint-loaderのtypecheckオプションを付けるとビルドが大幅に遅くなるようです。 しかし、typecheckをtrueにしておかないとビルド時にwarningが出ます。 https://github.com/wbuchwalter/tslint-loader/issues/76 tslint以外を使用するか、ビルド時にはlinterチェックはせず、pre-commitのタイミングでlinterを単体で走らせるようにしたほうが良さそうです。 この記事に関してもtslint-loader関連の部分は削除しました。 はじめに babel7がリリースされましたね！ それに伴いtypescriptもサポートされたのでbabel単体でtsのビルドができるようになりました。 しかしbabelはtypescriptから型情報を取り除くだけなので型チェックまで
ParcelでTypeScriptを扱ったらES5になってしまうとき - Qiita
Parcel v1.10.1 Node v10.11.0 Chromeで動けばいいアプリを、Parcelでbundleして出力を見たら、varと言っている まず、Parcelは何でも屋。デフォルトでbabelを実行する。デフォルトのbrowserslistは>0.25%(!?)らしい。 無駄が多すぎるのでlast 2 chrome versionsにしたが結果が変わらない。 原因 tsconfig.jsonが"extends"を使っていると、Parcelが解決できず、親のtsconfigにある"target": "esnext"を読んでくれない。 解決策 どうやら"extends"を諦めてコピペするしかなさそう・・・ https://github.com/parcel-bundler/parcel/pull/646 追記： 見てみたら簡単に修正できたのでPRを投げてみた https://g
Hyperappを理解する - Qiita
1. はじめに Hyperappでタスク管理アプリの開発をし、 ある程度理解する事ができたので、思いのままに語ります。 1-1. I love Hyperapp React,Reduxを愛しState管理以外は考えられない私。 2018年、Hyperappと出会いました。 なんというシンプルさでしょう。 まさに、この1KBのソースコードに出会うため 血と汗を流しながらシステムエンジニアを続けてきたと言っても過言ではありません。 React,Reduxの公式ページを頑張って読んでいた頃が懐かしい。 今はHyperappの1KBのソースを何度も読み返すのです。 是非Hyperappについて語り合いましょう。 1-2. 基本的な考え方を知っておく State管理が基本です。 先ず、State管理によるDOM更新を考えた天才に、改めて拍手を送りたい👏 おかげで本当に楽しくコーディングが出来るよう
📦 Parcel v1.10.0 がリリースされました 🎉 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 9/26（火）にParcel v1.10.0がリリースされました。 Parcel v1.10.0 is out! 🚀 🐠 @babeljs 7 support 🌊 Automatic @flowtype 🌳 @elmlang out of the box 👔 Inline script and style extraction 🏷 HTML bundle loader 🔗 JSON LD 🗺 Load existing source maps 💪 Many bug fixes and improvements! 📝
babel7でのstage-xの定義を知る - Qiita
As of v7.0.0-beta.55, we've removed Babel's Stage presets. Please consider reading our blog post on this decision at https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets for more details. TL;DR is that it's more beneficial in the long run to explicitly add which proposals to use. For a more automatic migration, we have updated babel-upgrade, https://github.com/babel/babel-upgrade to do
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ES6でGulpを書きたかったから試した - Qiita
ES Module(importとかexportとか)をCommonJS(requireとかmodule.exportsとか)へbabel(transpile)するだけのやつ - Qiita
ES Module(importとかexportとか)をCommonJS(requireとかmodule.exportsとか)へbabel(transpile)しながらwebpack(bundle)する - Qiita
babel v7でbabel-stage-presetが廃止になったから移行した話 - Qiita
