npmのlibraryのbuild formatについて

半年前くらいにnpm package作ってみたいなぁと思って作ってみた時学んだことをまとめていこうと思う。

以下の記事で大体理解できたのだが、実際にやってみて細かいところで躓いた部分を書いていく。

ちなみに、repoは takeokunn/businesh で、ビジネッシュ翻訳してくれるようなゴミみたいなpackageだ。意外とdownloadがあるのウケる。

const before_text = '任意の文字列をビジネッシュ・テキストに変換するライブラリです。';
businesh.translate(before_text)
    .then(after_text => {
        // 半強制のコンテクストをハイクオリティなビジネス的サティスファクション・テキストにコンバートフレキシブルに対応するフィジビリティスタディって、この前読んだビジネス書に書いてあった、実例もたくさんある。
        console.log(after_text)
    })
    .catch(err => console.log(err));

npm のpackageと一口に言っても、server side javascript なのか、 frontend javascript なのかで毛色が違う。通常以下のようにライブラリを呼び出す。

frontend javascript:

import businesh from 'businesh';

server side javascript:

const businesh = require('businesh');

上記のように呼び出すには、以下のようにpackageを提供する必要がある。

frontend javascript:

export { businesh };

server side javascript:

exports.businesh = businesh;

javascript のmoduleには主に4種類ある。

  • AMD
  • CommonJS
  • ES
  • UMD

この辺の記事が参考になる。

bundler のbuild optionで解決することができる。rollup を使っているので以下のように設定すれば良い。

takeokunn/businesh/blob/master/rollup.config.js:

import babel from 'rollup-plugin-babel';

const default_config = {
    input: 'src/main.js',
    moduleName: 'businesh',
    plugins: [babel({ exclude: 'node_modules/**', runtimeHelpers: true })]
};

export default [
    {
        ...default_config,
        output: {
            file: 'dist/bundle.cjs.js',
            format: 'cjs',
            sourcemap: true
        }
    },
    {
        ...default_config,
        output: {
            file: 'dist/bundle.es.js',
            format: 'es',
            sourcemap: true
        }
    },
    {
        ...default_config,
        output: {
            file: 'dist/bundle.umd.js',
            format: 'umd',
            sourcemap: true
        }
    }
];

package.json の設定も同時に変える必要がある。

takeokunn/businesh/blob/master/package.json抜粋:

{
    ...
    "main": "dist/bundle.cjs.js",
    "module": "dist/bundle.es.js",
    "browser": "dist/bundle.umd.js",
    "repository": "git@github.com:takeokunn/businesh.git",
    "author": "takeokunn<bararararatty@gmail.com>",
    ...
}

これでうまく npm install した時に良い感じに読み込むことができる。

ちなみに、イマイチ良い記事がなかったのでreduxjs/redux を参考にした。


適当に作ったライブラリだったが、 build format について学べたから良かったかな。

ゴミみたいなやつじゃなくて、もっと社会の役に立つようなものを作れるようになりたい(願望)