pandanoir commented 4 years ago

Webpack、Rollup、TypeScript(tsconfig.json)、ESLint、Prettierとかドキュメントを読んでまとめる

webpack dev serverも

pandanoir commented 4 years ago

npm i --save prettier eslint npx eslint --init するとうまくやってくれる

pandanoir commented 4 years ago

eslint-plugin-prettierを使うときはESLintにコード整形の設定を書かない

pandanoir commented 4 years ago

ギモン:

.eslintrc.jsのextendsに

   'plugin:react/recommended',
    'plugin:prettier/recommended',
    'prettier/react',

みたいに書くのはなぜ？(plugin:react/recommendedとprettier/reactが両方あるのはなぜ？)

answer

plugin:react/recommendedはeslint-plugin-reactで必要。で、prettier/reactはどうやらeslint-config-prettierが無効化したあとに設定するためっぽい？

pandanoir commented 4 years ago

https://qiita.com/ikngtty/items/4df2e13d2fa1c4c47528

Code -> prettier -> eslint --fix -> formatted codeという流れっぽい

pandanoir commented 4 years ago

eslintrcについて

plugins: 使用するプラグインを設定。eslint-plugin-は省略できる。独自ルールが追加される場合はここで指定する必要がある。
extends: 使用する設定を記述。プラグイン内の設定を使いたいときなどにも使う。
rules: 各ルールをwarningにするのかerrorにするのか、また、各ルールのオプションの指定を行う。
env: 対象環境を指定する。
parserOptions: パーサーのオプション。ESのバージョン指定とかする。
parser: パーサー
overrides: 特定の種類のファイルだけ処理を分けたい場合に指定。TSとJSで分けたりする

extendsのたとえばplugin:react/recommendedはeslint-plugin-react内のrecommendedを使うという意味。prettier/reactはよくわかんない。prettierで無効化したあとに有効化するやつらしいけど、eslint-config-prettierの独自構文に見える。 →どうやら、eslint-plugin-prettierがサポートしているものに関してはprettier/fooとして指定できるらしい。逆に他のものはどうすればいいんだ…

pandanoir commented 4 years ago

extends: {
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended"
  "plugin:react/recommended"
  "prettier",
  "prettier/@typescript-eslint",
  "prettier/react",
}

こんな感じ。

pandanoir commented 4 years ago

webpack-cli: webpack関連の便利コマンドを詰めたもの。webpackコマンドそのものっぽいんだけどよくわからん。v4でcliと本体を分離したため必要。

pandanoir commented 4 years ago

https://webpack.js.org/plugins/terser-webpack-plugin/

webpackのproduction build時にライセンスコメントが削除される問題はTerserPluginのextractCommentsを設定すれば回避できる

pandanoir commented 4 years ago

Babel

ES2018→ES5のようなトランスパイラ。前身は6to5。

@babel/preset-env なんかpluginsの設定をいい感じにまとめてくれてるやつ。これ入れときゃいいだろみたいなの。 babel-preset-は省略できるが、@babel/preset-envは略せないので"presets": ["@babel/preset-env"]と指定。
@babel/plugin-transform-runtime global環境を汚染せずにpolyfillが使えるやつ

pandanoir commented 4 years ago

Babelはポリフィルをいい感じにやってくれたりするけど、TypeScriptはシンタックスをES5にするだけ。つまりアロー関数とかは直してくれるが、Mapとかのポリフィルを入れてくれるわけじゃない。

pandanoir commented 3 years ago

ts-loader: TypeScript のローダー。トランスパイル・型チェックをする。内部でtscを使っている
- tsc: TypeScript のコンパイラ。TypeScript 公式が提供していてtypescriptパッケージ同梱。ES3/ES5などへのトランスパイルも行える。
babel-loader: Babel のローダー。トランスパイル・ポリフィルの導入など。

まあざっくりこう。つまり、TSで書く限り、ポリフィルいらないなら babel-loader は不要と思って良さそう。もちろん、Babel でトランスパイルが必要な構文を使いたいケースは別だけど、そもそもそういうケース自体そんなになくないか？

pandanoir / gakushu

ツール関連をまとめる #7

ギモン:

answer

eslintrcについて

Babel