macOS Mojave で Typescript ファイルの中身を Quick Look で見れるようにする
macOS では Quick Look と呼ばれる機能により、Finder でファイルを選択した状態でスペースキーを押すとファイルによっては中身が表示されます。ですが TypeScript ファイル(拡張子が .ts /...
package.json
を作成します:
yarn init
ついでReact関連をインストールします:
yarn add react react-dom mobx mobx-react
開発環境のインストールはこんな感じです:
yarn add @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env @babel/preset-react babel-loader@^8.0.0-beta css-loader sass-loader style-loader webpack webpack-cli@2.1.5 webpack-dev-server -D
いくつか注意点があります。
@babel/...
ですが、これはBabel 7からインストールするパッケージ名が変更されました。angularやionicもそうですが、Babelもパッケージ名の先頭に@がついてスコープ化されるようになりました。
@babel/plugin-proposal-class-properties
と @babel/plugin-proposal-decorators
はMobXでデコレーターを使用するために必要になります。この二つに関しては次のwebpackの設定で、プラグインに指定するオプションについて説明します。
webpack-cli
のバージョンが2.1.5で指定されていますが、これは記事公開当日に公開された webpack-cli@3.0.0
と webpack-dev-server@3.1.4
との相性が悪いようで、2系の最新版をインストールするようにしています。
package.json
はこんな感じになります:
.babelrc
ではなく webpack.config.js
で行うため、jsx
の module.rules
で query.babelrc
を false
にセットしています。
module.rules
の中の query.plugins
ではまず @babel/plugin-proposal-decorators
を指定しています。これがないと、MobXで @observable
などのデコレーターを使用すると、コンパイル時に
ERROR in ...
Module build failed: SyntaxError: ...: Support for the experimental syntax 'decorators-legacy' isn't currently enabled
というシンタックスエラーがターミナルに表示されます。
@babel/plugin-proposal-decorators
に対して {legacy: true}
というオプションを渡してやらないと、コンパイル時に
ERROR in ...
Module build failed: Error: [BABEL] ...: The new decorators proposal is not supported yet. You must pass the `"legacy": true` option to @babel/plugin-proposal-decorators
というコンパイルエラーが表示されます。
@babel/plugin-proposal-class-properties
では {loose: true}
というオプションを指定しています。これがないと、
Uncaught Error: Decorating class property failed. Please ensure that proposal-class-properties is enabled and set to use loose mode. To use proposal-class-properties in spec mode with decorators, wait for the next major version of decorators in stage 2.
というランタイムエラーがブラウザのコンソールに出力されます。
@babel/plugin-proposal-decorators
を一番最初に記述せずに
['@babel/plugin-proposal-class-properties', {
loose: true
}],
['@babel/plugin-proposal-decorators', {
legacy: true
}]
のようにすると、
ERROR in ...
Module build failed: SyntaxError: .....: Decorators transform is necessary.
というシンタックスエラーがターミナルに表示されます。
index.html
, style.scss
, app.jsx
です:
sass-loader
が動くのを確かめるために適当に書いてあります。
webpack-dev-server
で開発サーバーhttp://localhost:9000を立ち上げて、こんな感じのカウンターが表示されて動作すればOKです。(下のカウンターは画像ではなくamp-iframe
で読み込んでいるため、ボタンを押すとカウンターが動作します。)