JavaScriptの環境を構築するのがつらくて辛くて仕方がないのでチートシートを作ることにしました。やや長くなったので目次をつけます。
Webpack関連
Webpackはモジュールバンドラーです。分割したファイルを1つのJSファイルにまとめます。Webpack4以降では、バンドルするだけなら設定ファイルが不要です。コマンドでエントリーポイントと出力ファイルの設定をするだけでOKです。
Webpackでは、分割したファイルをモジュールとして読み込めるようにローダーを使います。例えばTypeScriptをJavaScriptに変換するローダー、CSSをJavaScriptで読み込むためのローダー、ES5に変換するローダーなどがあります。
WebpackのローダーとBabelの役割分担
ローダーはモジュールとして使える形になるようファイルを変換します。BabelではJavaScriptをコンパイルします。両者は一体どう違うのでしょうか?
僕の私見では、Babelは一部のローダーの内部処理を担当するものだと思います。実際、ローダーが内部でBabelを使うときがあります。ローダー自身をコンパクトに保ち、Babelで機能を追加する使い方です。
Webpackのインストール
$ npm i -D webpack webpack-cli
ローダーを使わずバンドルだけする場合、これだけインストールすればOKです。npm scriptの書き方はこのようになります。
"scripts": {
"build:dev": "webpack ./src/main.js -o ./dist/bundle.js --progress --mode development",
"build": "webpack ./src/main.js -o ./dist/bundle.js --progress --mode production"
純粋にバンドル+圧縮(プロダクトビルド)したいだけなら以下のページを参考にwebpack.config.jsを書いてください。
webpack.config.jsのプラクティスを考えてみた - Panda Noir
ts-loader
TypeScriptを使う場合はts-loader
をインストールします。
$ npm i -D ts-loader typescript
ts-loaderはJSXも扱える
ts-loaderはJSX(TSX)も扱えます。
- 必要なものをインストール
tsconfig.json
にJSXを扱うと宣言
webpack.config.js
にts-loaderの設定を書き込む
$ npm i -D @types/react react
JSXをReactとして扱うとtsconfig.json
で宣言します。React-nativeに変換することもできます。
{
"compilerOptions": {
"jsx": "react"
}
}
ローダーの設定をwebpack.config.js
に書き込みます。
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/main.tsx'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{ test: /\.tsx?$/, use: 'ts-loader', },
],
}
};
これでsrc/main.tsx
を変換できます。
import * as React from 'react';
const div = (<div></div>);
vue-loader
単一ファイルコンポーネントを扱いたい場合は、vue-template-compilerもインストールします。
$ npm i -D vue vue-loader vue-template-compiler
webpackではプラグインの設定も行います。
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
resolve: {
extensions: ['.vue', .js'],
},
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' },
],
},
plugins: [new VueLoaderPlugin(),],
};
これでVueをバンドルできます。TypeScriptと組み合わせたい場合は、ts-loader(上記参照)をインストールして設定を追加するだけです。webpack.config.jsを次のように変更します。
resolve: {
extensions: ['.vue', '.ts', '.js'],
},
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.ts$/, use: [{loader: 'ts-loader', options: {appendTsSuffixTo: [/\.vue$/]}}] },
],
},
エントリーポイントとなるファイルを.tsに変更するのも忘れないでください。
ライブラリを作りたい場合
ライブラリを作りたい場合はここのページを参考にしてください。
Webpackでライブラリを作る - Qiita
ただし、Nodeで読み込んだときに「window is not defined」というエラーが出るので、output.globalObject
を'this'
にしておく必要があります。
ESLint編
まずインストールします。
$ npm i -D eslint
$ yarn add -D eslint
その後、eslint --init
を行います。
$ npx eslint --init
# あるいは
$ ./node_modules/.bin/eslint --init
あとは対話式で答えていくだけで設定ファイルが生成されます。カンタンですね。
Prettier編
まずインストール。
$ npm i -D prettier
#あるいは
$ yarn add -D prettier
ESLintと併用する
Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita
ESLintのプラグインとしてPrettierを組み込むやり方です。独立して2つインストールする方法と比べて、Prettierが整形した部分にESLintが文句を言わなくなる点が優れています。
おすすめ設定
{
"singleQuote": true,
"trailingComma": "es5",
"tabWidth": 4,
}