Panda Noir

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

JavaScriptの環境構築あれこれ

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"

ts-loader

TypeScriptを使う場合はts-loaderをインストールします。

$ npm i -D ts-loader typescript

ts-loaderはJSXも扱える

ts-loaderはJSX(TSX)も扱えます。

  1. 必要なものをインストール
  2. tsconfig.jsonにJSXを扱うと宣言
  3. 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に変更するのも忘れないでください。