かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

npmにJavascript、Typescriptのプラグインやライブラリを公開する時にやることメモ

2022年4月11日

Javascript、Typescriptを公開するための設定や気をつけたことなどのメモです。

参考に

今回プラグイン「scroll-parallax-effect」を作る際のpackage.json

https://github.com/kamem/scroll-parallax-effect/blob/master/package.json

npmで公開する際に、プラグイン名はpackage.jsonのnameで決定します。

https://www.npmjs.com/package/scroll-parallax-effect

"name": "scroll-parallax-effect",

npmを公開するためのGithub Actions

今回Githubのmasterのマージした際に自動的にnpmに公開されるような仕組みにしました。
Github Actionsを使ってnpmへパッケージを自動リリースする - かめ。ブログ

npmからダウンロードしなくていいファイルを.npmignore

.gitignoreと同じようにgitには公開しても良いが、npm側で公開したくないファイルの除外をすることができます。

npm公開後の使い方

npm公開後はnpm installを行い。使えるようになりますが通常は下記のように使うことができます。

npm install scroll-parallax-effect


import  * as ScrollParallaxEffect from 'scroll-parallax-effect'


個別でimportファイルを任意の文字で指定する

name/任意の文字のように指定することができるので、大きめのプラグインの際は個別に分けて読み込めるようにしておくと良いと思います。

"exports": {
  ".": "./dist/scroll-parallax-effect/index.js",
  "./timing": "./dist/scroll-parallax-effect/timing.js",
  "./speed": "./dist/scroll-parallax-effect/speed.js",
  "./fit": "./dist/scroll-parallax-effect/fit.js",
  "./vue": "./dist/scroll-parallax-effect/vue.js",
  "./svg": "./dist/scroll-parallax-effect/svg.js"
},

typesVersionsも忘れずに指定

typescriptでimportする際には型定義ファイルも合わせて指定する必要があるようです。忘れないようにしましょう。

  "typesVersions": {
    "*": {
      ".": [
        "./dist/scroll-parallax-effect/index.d.ts"
      ],
      "timing": [
        "./dist/scroll-parallax-effect/timing.d.ts"
      ],
      "speed": [
        "./dist/scroll-parallax-effect/speed.d.ts"
      ],
      "fit": [
        "./dist/scroll-parallax-effect/fit.d.ts"
      ],
      "vue": [
        "./dist/scroll-parallax-effect/vue.d.ts"
      ],
      "svg": [
        "./dist/scroll-parallax-effect/svg.d.ts"
      ]
    }
  },

tsconfigに型定義ファイルを出力するように指定

typescriptでしっかり書いている場合は、型定義ファイルを出力することができるのでtsconfig.jsonに指定してそのまま型定義ファイルを出力するようにしています。

declarationの指定とoutDirでの吐き出し先の指定

https://github.com/kamem/scroll-parallax-effect/blob/master/tsconfig.json

"declaration": true,
"outDir": "./dist/"

imports exports周りメモ

package.json の imports / exports フィールド - 別にしんどくないブログ

ファイルの圧縮

.minがついている場合は、ファイル圧縮するように指定します。(vanilla用)

const TerserPlugin = require('terser-webpack-plugin')


  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        test: /\.min.js(\?.*)?$/i,
      }),
    ],
  },

webpack5からはライセンスが別で出力されるようなので、個人的にはextractComments: falseを指定して中に合わせて出力するようにしています。

ライセンスの設定

ランセンスは圧縮用と通常で分けています。

const webpack = require('webpack') 


new webpack.BannerPlugin({
      banner: `${package.name}
${package.description}
${package.repository.url}
@version ${package.version}
@license Released under ${package.license} license
@author ${package.author.name}`,
      test: /^(?=.*js)(?!.*min).*$/
    }),
    new webpack.BannerPlugin({
      banner: `${package.name}|${package.repository.url}|${package.version}|${package.license} license|${package.author.name}`,
      test: /\.min.js(\?.*)?$/i
    }),

package.jsonをimportしてきてパッケージ名や説明文を取得するようにしています。

まとめ

この辺りwebpackのバージョンによって変わる部分もあるので、そのつど気をつけています。
プラグイン作り直すたび、よーし!って色々きれいに作ろうって考えているのですが
毎回忘れちゃうところもあったり、作り直すたびにベストプラクティスが変わっていたりもするので、
今回気をつけたところ、また見返した時におさえておきたいところを残しておきました。

関連する記事

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

よくみられてる記事