DockerでWebpack+Babel開発環境作ってみた

10721 ワード
Docker babel webpack docker-compose babel7系 Docker テキストリンク

はじめに

ES6以上のJSをES5にトランスパイルするのに便利なBabelの環境を作ってみたいと思います。
vue.jsやReact.jsと組み合わせたwebpackやbabel環境構築の記事はよく見かけますが、今回はdockerでwebpack+babelのみの開発環境構築をご紹介します。

環境

以下の環境で動作確認はしております。

MacOS Mojave 10.14.3
Docker version 18.09.2
docker-compose version 1.23.2, build 1110ad01

構成

dist/にbundle.jsを作成することをゴールとします。

├── dist
│   └── bundle.js
├── docker
│   └── webpack
│       ├── Dockerfile
│       ├── package.json
│       └── webpack.config.js
├── docker-compose.yml
└── src
    ├── app.js
    └── test.js

構築

1. docker-compose.yml作成

今回は、bundle.jsを作成するためだけのコンテナを作成します。

docker-compose.yml
version: '3'

services:
  webpack:
    build: ./docker/webpack
    volumes:
      - ./src:/my_webpack/src
      - ./dist:/my_webpack/dist
      - ./docker/webpack/package.json:/my_webpack/package.json
      - ./docker/webpack/webpack.config.js:/my_webpack/webpack.config.js
    ports:
      - 2000:2000

2. Dockerfile作成

Dockerfile
FROM node:8.15.0
WORKDIR /my_webpack
RUN npm init -y
RUN npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env
RUN npm install jquery

CMD ["npm", "run", "build"]

3. package.json作成

ファイルの変更を検知して、再ビルドしてもらうために --watch オプションをつけてます。
あと、今回はjQueryもちゃっかり入れてます。不要な人は、削除しても構いません。

package.json
{
  "scripts": {
    "build": "webpack --watch"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "@babel/core": "7.0.0",
    "@babel/preset-env": "7.0.0",
    "babel-loader": "^8.0.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "private": true
}

4. webpack.config.js

ターゲットのブラウザも指定できるので、ここで指定しちゃいます。
エントリポイントはsrc/直下に配置するapp.js、dist/以下にbundle.jsとして出力するように設定しています。

webpack.config.js

const presets  = [
  [
    '@babel/preset-env',
    {
      "targets": [">0.25% in JP", "not ie <= 10", "not op_mini all"]
    }
  ]
];
module.exports = {
  mode   : 'development',
  devtool: 'inline-source-map',
  entry  : './src/app.js',
  output : {
    path    : `${__dirname}/dist`,
    filename: 'bundle.js'
  },
  module : {
    rules: [
      {
        test: /\.js$/,
        use : [
          {
            loader : 'babel-loader',
            options: {
              presets: presets
            }
          }
        ]
      }
    ]
  }
};

5. ES6のサンプル用意

トランスパイル用のES6で書かれたサンプルを用意します。

app.js
import Test from './test';

Test.viewConsole();
test.js
export default class Test {
  static viewConsole () {
    ['cat', 'dog', 'bear'].forEach(item => {
      console.log(item);
    });
  }
}

結果

docker-composeで起動

$ docker-compose up -d

dist直下にbundle.jsが作成されて入れば成功です。
また、app.jsやtest.jsを編集してみて下さい。
それに応じて、bundle.jsも再ビルドされていることでしょう。

const限定子の理解
1～1000以内の完数