tag :

npm

npmライブラリをFork・改造して利用する

このブログでは,markdown-itのプラグインのうちの一つであるmarkdown-it-videoを利用しています.

しかし,npmライブラリをインストールをし,実装も終わったところでW3C validatorを用いてHTMLコードのテストを行うと...

markdown-it-videoに関連するErrorが表示されていました:

- The frameborder atttribute on the iframe element is obsolete. Use CSS instead.
- Attribute mozallowfullscreen not allowed on element iframe at this point.
- Attribute webkitallowfullscreen not allowed on element iframe at this point

Issueとして報告するか修正してPullRequestを送ろうとしましたが,2年以上放置されているリポジトリということもありコメントしている人もあきらめている様子でした.

コードを見る限り,<iframe>タグ内のattributeとして指定しているmozallowfullscreenwebkitallowfullscreenframeborderを削除・修正すればよさそうだったので自分で何とかすることにしました.

1. Forkする

fork

右上あるForkボタンをクリックして,自分のリポジトリにFork.

アクティブなリポジトリであればFork→修正→PullRequestとなりますが,今回は修正まで行います.

2. Git Cloneする

Clone

緑色のCodeボタンを押すと表示される自分のリポジトリのURLをコピーして

git clone <REPOS_URL>

これで,ローカルで修正できるようになります.

cd <PROJECT_NAME>

でディレクトリを移動して修正をしていきます.

修正が終わったらコミットとプッシュを済ませます.

3. npmで自前の修正版を利用する

自分用に修正が終了したら,修正したnpmパッケージを元々開発していたプロジェクトで利用できるようにします.

3-1. package.jsonの書換え

恐らく,現時点ではpackage.jsondependenciesには修正前のnpmパッケージのライブラリ名・バージョンが記載されているかと思います:

{
  ...
  "dependencies": {
    ...
    "markdown-it-video": "0.6.3"
  }
}

バージョンの部分を,git+<REPOS_URL>に変更:

{
  ...
  "dependencies": {
    ...
    "markdown-it-video": "git+https://github.com/KotaIkehara/markdown-it-video.git"
  }
}

3-2. npmパッケージをインストール

ステップ3-1が終了したら,

$ npm install

で自分が修正したバージョンのものになります.