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'),
    },
    // エントリーポイントから他のtsxファイルを読み込む場合、resolveの設定も必要
    // resolve: {
    //     extensions: ['.tsx', '.ts', '.js'], 
    // },
    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 = {
    // entryとoutputの設定など
    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が文句を言わなくなる点が優れています。

Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

JavaScriptの環境構築あれこれ