What's New Qiita

20200225のNode.jsに関する記事は8件です。

  • 投稿日：2020-02-25T23:16:30+09:00

npmの使い方（初歩）

サマリ

  • npm installコマンドでパッケージをインストールする際「-g」オプションの有無による違いとダウンロードされる資材の配置場所
  • npm install -gによる資材の配置場所の変更方
  • npm installでインストールされたパッケージの確認方法
  • npm installでインストールされたパッケージの削除方法

目的

node.jsを学習する際、npmの意味、使い方がわからず挫折しそうになったため、同じことで困った人の参考として記載。

本文

1. npm installコマンドの効果

node.jsで利用するパッケージをダウンロードできる。
ダウンロードしたパッケージはrequireで取得・利用できるようになる。
例）expressをインストールした場合
var express = require('express')

2. 「-g」オプションの有無による違い

  • 「-g」オプションが無い場合
    npm installを実行したフォルダ配下でのみパッケージを利用可能。

  • 「-g」オプションが有る場合
    npm installを実行したフォルダ配下以外からでもパッケージを利用可能。

3. 「-g」オプションの有無によるダウンロード資材の配置場所の違い

  • 「-g」オプションが無い場合
    npm installを実行したフォルダ配下のnode_modulesフォルダ。

  • 「-g」オプションが有る場合
    npm config listコマンドを実行して表示された情報の「prefix」の場所。
    以下の実行例の場合はC:\nodejs\node_modules_global配下にnode_modulesフォルダ配下にパッケージが配置される。

実行例）

> npm config list
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.13.4 node/v12.14.1 win32 x64"

; userconfig C:\Users\user\.npmrc
prefix = "C:\\nodejs\\node_modules_global"

; builtin config undefined

; node bin location = C:\Program Files\nodejs\node.exe

4. npm install -gによる資材の配置場所の変更方

npm config setコマンドでprefixの設定値を更新することで配置場所を変更可能。

例）C:\nodejs02\node_modules_globalに変更する場合
> npm config set prefix=C:\nodejs02\node_modules_global

なお、グローバルパッケージの配置場所を変更した場合、Windowsでは新しい配置場所にpathを通さないとnode.jsの実行時にエラーとなった。

5. npm installでインストールされたパッケージの確認方法

npm listコマンドで確認できる。npm ls --depth=0とすると、依存関係を除いたパッケージ情報のみ表示できる。

  • 「-g」オプションを付けずにインストールしたパッケージ（ローカルパッケージ）の確認
> npm ls
sample@0.0.0 C:\node_sample\sample　　←　ローカルパッケージの配置場所（npm installコマンドを実行した場所）
+-- cookie-parser@1.4.4
| +-- cookie@0.3.1
| `-- cookie-signature@1.0.6
+-- debug@2.6.9
| `-- ms@2.0.0
+-- express@4.16.4
| +-- accepts@1.3.7
| | +-- mime-types@2.1.26
| | | `-- mime-db@1.43.0
| | `-- negotiator@0.6.2
　：
　：
  • 「-g」オプションを付けてインストールしたパッケージ（グローバルパッケージ）の確認
> npm ls -g
C:\nodejs\node_modules_global    ←　グローバルパッケージの配置場所
+-- express@4.17.1
| +-- accepts@1.3.7
| | +-- mime-types@2.1.26
| | | `-- mime-db@1.43.0
| | `-- negotiator@0.6.2
| +-- array-flatten@1.1.1
| +-- body-parser@1.19.0
| | +-- bytes@3.1.0
| | +-- content-type@1.0.4 deduped
　：
　：

6. npm installでインストールされたパッケージの削除方法

npm uninstallコマンドで削除可能。
npm ls --depth=0でインストールパッケージを表示し、表示されたパッケージの@より前の文字列を指定することで削除ができる。

実行例）ローカルパッケージのexpressを削除する場合

> npm ls --depth=0
sample@0.0.0 C:\node_sample\sample
+-- cookie-parser@1.4.4
+-- debug@2.6.9
+-- express@4.16.4
+-- http-errors@1.6.3
+-- jade@1.11.0
`-- morgan@1.9.1

> npm uninstall express
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-25T23:16:30+09:00

npm installの使い方（初歩）

サマリ

  • npm installでパッケージをインストールする際「-g」オプションの有無による違い
  • npm install -gによる資材の配置場所の変更方
  • npm installでインストールされたパッケージの確認方法
  • npm installでインストールされたパッケージの削除方法

目的

node.jsを学習する際、npm installの使い方がわからず挫折しそうになった。
原因として、各記事で「-g」オプションの有無にばらつきがあり、
「-g」オプションの有無による具体的な違いやnpm install実行後の確認方法がまとまって説明されている記事がなかなか見つからなかった。
同じことで困った人の参考として、自分の実行例と合わせて説明を記載する。

本文

1. npm installコマンドの効果

node.jsで利用するパッケージをダウンロードできる。
ダウンロードしたパッケージはrequireで取得・利用できるようになる。
例）expressをインストールした場合
var express = require('express')

2. 「-g」オプションの有無による違い

  • 「-g」オプションが無い場合
    npm installを実行したフォルダ配下でのみパッケージを利用可能。

  • 「-g」オプションが有る場合
    npm installを実行したフォルダ配下以外からでもパッケージを利用可能。

3. 「-g」オプションの有無によるダウンロード資材の配置場所の違い

  • 「-g」オプションが無い場合
    npm installを実行したフォルダ配下のnode_modulesフォルダ。

  • 「-g」オプションが有る場合
    npm config listコマンドを実行して表示された情報の「prefix」の場所。
    以下の実行例の場合はC:\nodejs\node_modules_global配下にnode_modulesフォルダ配下にパッケージが配置される。

実行例）

> npm config list
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.13.4 node/v12.14.1 win32 x64"

; userconfig C:\Users\user\.npmrc
prefix = "C:\\nodejs\\node_modules_global"

; builtin config undefined

; node bin location = C:\Program Files\nodejs\node.exe

4. npm install -gによる資材の配置場所の変更方

npm config setコマンドでprefixの設定値を更新することで配置場所を変更可能。

例）C:\nodejs02\node_modules_globalに変更する場合
> npm config set prefix=C:\nodejs02\node_modules_global

なお、グローバルパッケージの配置場所を変更した場合、Windowsでは新しい配置場所にpathを通さないとnode.jsの実行時にエラーとなった。

5. npm installでインストールされたパッケージの確認方法

npm listコマンドで確認できる。npm ls --depth=0とすると、依存関係を除いたパッケージ情報のみ表示できる。

  • 「-g」オプションを付けずにインストールしたパッケージ（ローカルパッケージ）の確認
> npm ls
sample@0.0.0 C:\node_sample\sample　　←　ローカルパッケージの配置場所（npm installコマンドを実行した場所）
+-- cookie-parser@1.4.4
| +-- cookie@0.3.1
| `-- cookie-signature@1.0.6
+-- debug@2.6.9
| `-- ms@2.0.0
+-- express@4.16.4
| +-- accepts@1.3.7
| | +-- mime-types@2.1.26
| | | `-- mime-db@1.43.0
| | `-- negotiator@0.6.2
　：
　：
  • 「-g」オプションを付けてインストールしたパッケージ（グローバルパッケージ）の確認
> npm ls -g
C:\nodejs\node_modules_global    ←　グローバルパッケージの配置場所
+-- express@4.17.1
| +-- accepts@1.3.7
| | +-- mime-types@2.1.26
| | | `-- mime-db@1.43.0
| | `-- negotiator@0.6.2
| +-- array-flatten@1.1.1
| +-- body-parser@1.19.0
| | +-- bytes@3.1.0
| | +-- content-type@1.0.4 deduped
　：
　：

6. npm installでインストールされたパッケージの削除方法

npm uninstallコマンドで削除可能。
npm ls --depth=0でインストールパッケージを表示し、表示されたパッケージの@より前の文字列を指定することで削除ができる。

実行例）ローカルパッケージのexpressを削除する場合

> npm ls --depth=0
sample@0.0.0 C:\node_sample\sample
+-- cookie-parser@1.4.4
+-- debug@2.6.9
+-- express@4.16.4
+-- http-errors@1.6.3
+-- jade@1.11.0
`-- morgan@1.9.1

> npm uninstall express

参考にさせていただいたページ

いまさら聞けない！npmのこれだけは知っておきたい基礎知識
https://www.webprofessional.jp/beginners-guide-node-package-manager/

Qiita npmコマンドの使い方
https://qiita.com/yoh-nak/items/8446bf12094c729d00fe

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-25T23:16:30+09:00

Windowsでのnpm installの使い方

サマリ

  • npm installでパッケージをインストールする際「-g」オプションの有無による違い
  • npm install -gによる資材の配置場所の変更方
  • npm installでインストールされたパッケージの確認方法
  • npm installでインストールされたパッケージの削除方法

目的

node.jsを学習する際、npm installの使い方がわからず挫折しそうになった。
原因として、各記事で「-g」オプションの有無にばらつきがあり、
「-g」オプションの有無による具体的な違いやnpm install実行後の確認方法がまとまって説明されている記事がなかなか見つからなかった。
同じことで困った人の参考として、自分の実行例と合わせて説明を記載する。

本文

1. npm installコマンドの効果

node.jsで利用するパッケージをダウンロードできる。
ダウンロードしたパッケージはrequireで取得・利用できるようになる。
例）expressをインストールした場合
var express = require('express')

2. 「-g」オプションの有無による違い

  • 「-g」オプションが無い場合
    npm installを実行したフォルダ配下でのみパッケージを利用可能。

  • 「-g」オプションが有る場合
    npm installを実行したフォルダ配下以外からでもパッケージを利用可能。

3. 「-g」オプションの有無によるダウンロード資材の配置場所の違い

  • 「-g」オプションが無い場合
    npm installを実行したフォルダ配下のnode_modulesフォルダ。

  • 「-g」オプションが有る場合
    npm config listコマンドを実行して表示された情報の「prefix」の場所。
    以下の実行例の場合はC:\nodejs\node_modules_global配下にnode_modulesフォルダ配下にパッケージが配置される。

実行例）

> npm config list
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.13.4 node/v12.14.1 win32 x64"

; userconfig C:\Users\user\.npmrc
prefix = "C:\\nodejs\\node_modules_global"

; builtin config undefined

; node bin location = C:\Program Files\nodejs\node.exe

4. npm install -gによる資材の配置場所の変更方

npm config setコマンドでprefixの設定値を更新することで配置場所を変更可能。

例）C:\nodejs02\node_modules_globalに変更する場合
> npm config set prefix=C:\nodejs02\node_modules_global

なお、グローバルパッケージの配置場所を変更した場合、Windowsでは新しい配置場所にpathを通さないとnode.jsの実行時にエラーとなった。

5. npm installでインストールされたパッケージの確認方法

npm listコマンドで確認できる。npm ls --depth=0とすると、依存関係を除いたパッケージ情報のみ表示できる。

  • 「-g」オプションを付けずにインストールしたパッケージ（ローカルパッケージ）の確認
> npm ls
sample@0.0.0 C:\node_sample\sample　　←　ローカルパッケージの配置場所（npm installコマンドを実行した場所）
+-- cookie-parser@1.4.4
| +-- cookie@0.3.1
| `-- cookie-signature@1.0.6
+-- debug@2.6.9
| `-- ms@2.0.0
+-- express@4.16.4
| +-- accepts@1.3.7
| | +-- mime-types@2.1.26
| | | `-- mime-db@1.43.0
| | `-- negotiator@0.6.2
　：
　：
  • 「-g」オプションを付けてインストールしたパッケージ（グローバルパッケージ）の確認
> npm ls -g
C:\nodejs\node_modules_global    ←　グローバルパッケージの配置場所
+-- express@4.17.1
| +-- accepts@1.3.7
| | +-- mime-types@2.1.26
| | | `-- mime-db@1.43.0
| | `-- negotiator@0.6.2
| +-- array-flatten@1.1.1
| +-- body-parser@1.19.0
| | +-- bytes@3.1.0
| | +-- content-type@1.0.4 deduped
　：
　：

6. npm installでインストールされたパッケージの削除方法

npm uninstallコマンドで削除可能。
npm ls --depth=0でインストールパッケージを表示し、表示されたパッケージの@より前の文字列を指定することで削除ができる。

実行例）ローカルパッケージのexpressを削除する場合

> npm ls --depth=0
sample@0.0.0 C:\node_sample\sample
+-- cookie-parser@1.4.4
+-- debug@2.6.9
+-- express@4.16.4
+-- http-errors@1.6.3
+-- jade@1.11.0
`-- morgan@1.9.1

> npm uninstall express

参考にさせていただいたページ

いまさら聞けない！npmのこれだけは知っておきたい基礎知識
https://www.webprofessional.jp/beginners-guide-node-package-manager/

Qiita npmコマンドの使い方
https://qiita.com/yoh-nak/items/8446bf12094c729d00fe

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-25T20:29:24+09:00

Text-to-Speech APIと関連ライブラリまとめ

Cloud Text-to-Speech

後述するライブラリの大元となるGoogleのAPI。テキストを音声に変換できる。
APIを有効化してAPIキーを取得すれば、スクリプト実行で音声ファイルを作成できる。
ドキュメントの「クイックスタート」にそえば、好きな言語で簡単な音声ファイルを作成することができる。
https://cloud.google.com/text-to-speech/docs/quickstart-client-libraries?hl=ja

google-tts-api

https://www.npmjs.com/package/google-tts-api
Google-Text-to-Speach-APIのnode.js版。
このライブラリだけでAPIの有効化・キー取得などを行うことなく音声ファイルの作成ができる。
しかし一度に音声化できるのは200文字まで。

google-home-notifer

https://github.com/noelportugal/google-home-notifier
このライブラリ内にgoogle-tts-apiが内包されている。
音声ファイルを作成し、Google Homeにテキストを読み上げさせることができる。

おまけ：読み上げ音声の特徴

実際に作成した音声ファイルを聞いてみて気づいた音声の特徴を簡単に。
言語＝日本語の場合、
* 英単語：日本語読みで発音される
* 読み上げ時のブレス：句読点、カギカッコ、カンマなど。空白はブレスにならない。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-25T18:45:01+09:00

NuxtとNode.jsサーバーでSlack通知実装

設計

  • NuxtベースアプリケーションからSlackに通知する機能を実装したい。
  • 定期的な自動再送機能もほしい。
  • トークンをNuxt側に置くのはちょっと...

そんな要件を満たすためには、Nuxtからサーバーを経由するのもありかなという感じで作成。

必要なもの

  1. Nuxtアプリケーション
  2. Node.js (当方Version 13.2.0)
  3. 設定済みSlack API (トークンとBot Token Scopesにてchat:write権限が必要。#generalに参加済み）

Nuxtでの実装

求められるものは
1. メッセージ入力
2. 宛先入力
3. 再送間隔 or 再送しないの入力
4. 設定内容のPOST

とりあえず上記の4つを実装すれば最低限機能は満たせそうなので書いていく。
見た目はこの際捨て置く。

またquerystringを使っているので未インストールなら

npm install --save querystring

以下、コード。

<template>
  <div class="create-post">
    <input type="text" v-model="message" id="message">
    <input type="text" v-model="channel" id="channel">
    <input type="text" v-model="schedule" id="schedule">
    <button v-on:click="send">
      送信
    </button>
  </div>
</template>

<script>
  import querystring from "querystring"
  export default {
    data() {
      return {
        message: '',
        channel: '',
        schedule: 'none'
      }
    },
    methods : {
      async send(){
        let json_data = {
          message: this.$data.message,
          channel: this.$data.channel,
          schedule: this.$data.schedule
        };
        const response = await this.$axios.$post('/test/rest', querystring.stringify(json_data));
      }
    }
  }
</script>

<style scoped>
  .create-post{
    width: 30%;
    height: 200px;
    padding-left: 200px;
  }
  #message{
    margin-top: 10%;
  }
  #channel{
    margin-top: 10%;
  }
  #schedule{
    margin-top: 10%;
  }
</style>

そうするとこのようなページが出来上がる

スクリーンショット 2020-02-25 17.23.36.png

今回、NuxtからサーバーにPOSTするために@nuxtjs/axiosを使用している。
詳しくはご自分で調べてほしいのだが、使用する際、nuxt.confing.jsにて以下の文を編集・追加している。

  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/test/': {
      target: 'http://0.0.0.0:3000/',
      pathRewrite: {'^/test/': ''}
    }
  },

このように設定することでCORSを簡単に解決することができる。
クロスオリジンリソースを共有するには？

サーバーの用意

サーバーでは次のような処理を行いたい。
1. HTTP Requestを受けとる
2. 中身のデータからメッセージとあて先、定期再送情報を取り出す
3. それに合わせてSlackに通知する

それではコードを書いていく。
これにあたって、以下の記事やサイトを参考にさせていただいた。
Nodejs HTTP/HTTPS サーバーとクライアントのコーディングパターン
【Node.js】Slack APIを使用してメッセージを送信する
Node.jsで定期実行メモ
node-cron npm
node-fetch npm

const http = require('http');
const fetch = require('node-fetch');
const cron = require('node-cron');
const queryString = require("querystring");
const StringDecoder = require("string_decoder").StringDecoder;
const Decoder = new StringDecoder('utf8');

let server = http.createServer();

async function postToSlack(token, msg, channel) {
    const { WebClient } = require('@slack/web-api');
    const client = new WebClient(token);
    const params = {
        channel: channel,
        text: msg
    };

    await client.chat.postMessage(params);
}

let tasks = [];
server.on('request', function (req, res) {
    req.on('data', async function(chunk) {
        let json = JSON.parse(JSON.stringify(queryString.parse(Decoder.write(chunk))));

        if (json.schedule === 'none') { //スケジュール指定がない場合
            await postToSlack('your token here', json.message, json.channel);
        } else { //ある場合
            let task = cron.schedule(json.schedule, async () => {await postToSlack('your token here', json.message, json.channel);});
            tasks.push(['start', task]);
        }

        let return_json = {
            state: true,
        };

        res.writeHead(200, {'Content-Type': 'application/json'});
        let replyData = queryString.stringify(return_json);
        res.write(replyData);
        res.end();
    });
});

server.listen(3000);

実際に試す

Nuxtのページで文章とあて先を入力して送信。

スクリーンショット 2020-02-25 18.23.34.png

そしてSlackに通知が来た。

スクリーンショット 2020-02-25 18.26.59.png

定期実行も確認

スクリーンショット 2020-02-25 18.30.11.png
スクリーンショット 2020-02-25 18.31.28.png

以上、実装完了とす。

感想

エラー処理を全く実装していないので怖い。
APIが用意されていると楽。
あとはSlackに限らず通知できるように拡張できそう。

おわりに

お読みいただきありがとうございました。なにか間違いがございましたらコメントへよろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-25T18:41:37+09:00

javascriptでcontent-typeを自動で取得する方法

content-typeを自動で取得する方法を探した結果、mime-typesを使うことにしました。

前提条件

  • npmがインストールされていること

インストール

$ npm i --save mime-types

使い方

設定

touchコマンドでファイルを作成します。

$ touch test.js

test.js
mime-typesモジュールの読み込みと、引数にパスを入れてメソッドを使用します。

const mime = require('mime-types')

console.log(mime.lookup('test.json'))
console.log(mime.contentType('test.json'))

実行

nodeコマンドでtest.jsを実行します。

$ node test

出力結果

application/json
application/json; charset=utf-8

参考文献

この記事は以下の情報を参考にして執筆しました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-25T17:43:31+09:00

Nuxt.jsの始め方

Nuxt.jsを始めたい方に向けて、導入の仕方をまとめます。
ライフサイクルなど細かい内容は公式ドキュメントをご確認ください。

前提条件

  • npmの5.2.0以降のバージョンがインストールされていること

インストール

プロジェクトディレクトリの作成

$ mkdir test && cd $_

Nuxt.jsフレームワークのインストール

$ npx create-nuxt-app

開発

開発サーバーを起動

$ npm run dev

デプロイ

SSRモードでサーバーを起動

$ npm run build && npm run start

静的HTML生成

$ npm run generate

その他

pug/stylusの導入

pug

pugのモジュールをインストール

$ npm i --save pug pug-loader pug-plain-loader

全*.vueファイルのtemplateタグにlang="pug"を追加する

<!-- <template> -->

<template lang="pug">

stylus

stylusのモジュールをインストール

$ npm i --save stylus stylus-loader

全*.vueファイルのstyleタグにlang="stylus"を追加する
ここの内容を他のスタイルに影響させたくない場合はscopedも追加する

/* <style> */

<style lang="stylus" scoped>

storeの導入

データ定義

store用のファイルを作成

$ touch store/index.js

store/index.js
保持しておきたいデータをstate内にcounterという名前で定義
state内のcounterの数値を1ずつ増やすincrementメソッドを定義

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}

データへのアクセス

state内のcounterの値を取得

this.$store.state.counter

出力結果

0

データの変更

mutations内のincrementメソッドを実行

this.$store.commit('increment')

transitionタグ

html（pug）の定義

transitionタグを追加して、子要素はv-ifなどで存在確認をさせる

transition
  p(v-if="show") Hello world!

css（stylus）の定義

v-enterとv-leave-toで最初（出現時）と最後（消失時）のstyleを定義
そのスタイルにどういうtransitionをかけるかv-enter-activeとv-leave-activeで定義

.v-enter-active
.v-leave-active
  transition opacity .5s

.v-enter
.v-leave-to
  opacity 0

ページ遷移transition

html（pug）の定義

nuxt-linkタグを追加する

nuxt-link(to="/test/") go to test!

css（stylus）の定義

page-enterとpage-leave-toで最初（出現時）と最後（消失時）のstyleを定義
そのスタイルにどういうtransitionをかけるかpage-enter-activeとpage-leave-activeで定義

.page-enter-active
.page-leave-active
  transition opacity .5s

.page-enter
.page-leave-to
  opacity 0

ページ読み込み時のLoading表示

Loading用のファイルを作成

$ mkdir components/Loading && touch components/Loading/index.vue

components/Loading/index.vue

<template lang="pug">
.loading-page(v-if="loading")
  p Loading...
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      this.loading = true
    },
    finish () {
      setTimeout(() => {
        this.loading = false
      }, 3000)
    }
  }
}
</script>

<style lang="stylus" scoped></style>

nuxt.config.js
loadingの記述を追加

module.exports = {
  loading: '~/components/Loading/index.vue' // 追記
}

テンプレートレイアウト変更

テンプレート用のファイルを作成

$ touch layouts/another.vue

layouts/another.vue

<template lang="pug">
.l-another
  nuxt
</template>

<script>
export default {}
</script>

<style lang="stylus" scoped></style>

＊.vue
layoutのカスタム読み込みをする記述を追加

export default {
  layout: 'another', // 追記
}

エラーページ

エラー用のファイルを作成

$ touch layouts/error.vue

layouts/error.vue

<template lang="pug">
.container
  h1(v-if="error.statusCode === 404") ページが見つかりません
  h1(v-else) エラーが発生しました
  nuxt-link(to="/") ホーム
</template>

<script>
export default {
  props: {
    error: {
      type: Object,
      default: null
    }
  }
}
</script>

<style lang="stylus" scoped></style>

コンソールの削除

nuxt.config.js
build内にdrop_consoleの記述を追加

module.exports = {
  build: {
    terser: {
      terserOptions: {
        compress: { drop_console: true }
      }
    }
  }
}

作業ディレクトリをまとめる

作業ディレクトリの作成、移動

$ mkdir src && mv assets components layouts pages plugins static store middleware src/

nuxt.config.js
srcDirの記述を追加する

module.exports = {
  srcDir: 'src/', // 追記
}

参考文献

この記事は以下の情報を参考にして執筆しました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-25T10:24:36+09:00

node.jsインストール直後の状態でpackage.jsonをアップデートする方法　～npmグローバルインストール一切不要～

package.jsonを更新する場合、npm-check-updatesをグローバルインストールしてncu -uとやることが多いです。ただ、nodebrewなどのnodeバージョン管理システムを使っている場合、node.jsの新バージョンがリリースされるたびにグローバルインストールをやり直す必要があります。この問題、何とかならないでしょうか。実はnpm-check-updatesをnpx経由で呼べば、node.jsインストール直後の状態でもpackage.jsonを更新することができます。

package.jsonを更新する

npx npm-check-updates -u
npm install

解説

npx経由でnpm-check-updatesを呼び出しているだけです。試してみましたが、npx ncu -uとは出来ませんでした。

注意点

環境にもよりますが、上記手順はnpx npm-check-updates -uを実行するたびにnpm-check-updatesをローカル環境のインストールします。連続してnpm-check-updatesを呼びたい場合は、npx経由で呼び出すことはお勧めしません。自分の場合は上記コマンドを呼び出すのは1週間に1回程度なので、時間ロスについてはそこまで気にしていません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧