Rollup で axios をバンドル

Rollup で axios をブラウザ用にバンドルする方法。

さきに結論から言うと、以下のような設定でバンドルできます。

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';

export default {
  input: 'script.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      browser: true
    }),
    commonjs(),
    replace( {
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';

export default {
  input: 'script.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      browser: true
    }),
    commonjs(),
    replace( {
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

script.js

import axios from 'axios';

axios.get('https://api.zipaddress.net?zipcode=900-0012').then(function(data) {
  console.log(data);
});

import axios from 'axios';

axios.get('https://api.zipaddress.net?zipcode=900-0012').then(function(data) {
  console.log(data);
});

説明

axios を Rollup でバンドルするには以下の3つのプラグインが必要になります。

• rollup-plugin-node-resolve
• rollup-plugin-commonjs
• rollup-plugin-replace

まず node_modulesnode_modules から axios を取得するために rollup-plugin-node-resolverollup-plugin-node-resolve が必要となります。

次に、 axios は CommonJS 形式で書かれたいるため、それを読み込むために rollup-pllugin-commonjsrollup-pllugin-commonjs がいります。

そして最後に、 axios 内には process.env.NODE_ENVprocess.env.NODE_ENV が出てきますが、Rollup では processprocess オブジェクトを扱わないのでそれを置換するために rollup-plugin-repalcerollup-plugin-repalce がそれぞれ必要となっています。

もう一つ重要なのが、ブラウザ用にバンドルする場合は rollup-plugin-node-resolverollup-plugin-node-resolve の設定で browserbrowser を truetrue に設定する必要があります。

    resolve({
      browser: true
    }),

    resolve({
      browser: true
    }),

これによって axios の package.jsonpackage.json 内にある browserbrowser フィールドが読み込まれ、適切なファイルがバンドルされるようになります。