npmにJavascript、Typescriptのプラグインやライブラリを公開する時にやることメモ
目次
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-effectimport * 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のバージョンによって変わる部分もあるので、そのつど気をつけています。
プラグイン作り直すたび、よーし！って色々きれいに作ろうって考えているのですが
毎回忘れちゃうところもあったり、作り直すたびにベストプラクティスが変わっていたりもするので、
今回気をつけたところ、また見返した時におさえておきたいところを残しておきました。
