babel/webpackを使ってJavaScriptのソースをリリース用に整備する

babelは新しいESの記法で作ったJavaScriptのソースを古いブラウザでも実行可能に変換してくれるパッケージ。webpackはJavaScriptのソースコードをminifyするパッケージ。普通は組み合わせて使う

プロジェクトディレクトリにnode_modulesを作成する場合

パッケージを構築するイメージ

プロジェクトディレクトリの作成

mkdir mylib
cd mylib

package.jsonの作成

npm init

パッケージのインストール

npm install --save-dev @babel/core @babel/preset-env babel-loader webpack webpack-cli

ソースの配置

mkdir src
vi src/index.js

(src/index.jsがメインのソースになるのでこれを編集)

webpackの設定

cat << EOF > webpack.config.js
const path = require('path');
module.exports = {
  mode: 'production',       // webpack 4 からは必須: 'production' | 'development' | 'none'
  entry: './src/index.js',    // メインとなるファイル
  output: {                 // 出力に関する設定
    path: path.resolve(__dirname, 'dist'),  // 出力先のディレクトリ
    filename: 'mylib.js'                      // 出力ファイル名
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env"
              ]
            }
          }
        ]
      }
    ]
  }
};
EOF

ビルド

package.jsonのscriptsの中に以下を追加

"build": "webpack"

このようになる

    :
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
    :

ビルドの実行

npm run build

dist/mylib.jsがビルド済みのファイルとして生成される

共通のnode_modulesを使う場合

とりあえず目的のソースを変換するだけのイメージ

パッケージのインストール

npm install --save-dev @babel/core @babel/preset-env babel-loader webpack webpack-cli

ソースの編集

vi main.js

(main.jsがメインのソースになるのでこれを編集)

webpackの設定

cat << EOF > webpack.config.js
const path = require('path');
module.exports = {
  mode: 'production',       // webpack 4 からは必須: 'production' | 'development' | 'none'
  entry: './main.js',    // メインとなるファイル
  output: {                 // 出力に関する設定
    path: path.resolve(__dirname, 'dist'),  // 出力先のディレクトリ
    filename: 'mylib.js'                      // 出力ファイル名
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env"
              ]
            }
          }
        ]
      }
    ]
  }
};
EOF