npm libraryのbuild formatについて

Table of Contents

半年前くらいに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:

import businesh from 'businesh';

server side:

const businesh = require('businesh');

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

frontend:

export { businesh };

server side:

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 について学べたから良かったかな。

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