未分類

lite-serverを使った開発サーバの構築

投稿日:2017年12月6日 更新日:

Lite-Serverのパッケージを使った開発サーバの構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。

記載した実行環境は以下の通りです。Node.jsのインストールについては、『Angular2の開発環境を構築(angular-cli)』を参考にして下さい。

  • OS : Windows 7 Home Premium
  • Node.js : V6.9.4
  • npm : V3.10.10

また、記載したコード等をコピー&ペーストする場合には円マークに注意して下さい。コード中の円マークは「U+00A5」で表現しています。 『円マークとバックスラッシュ』を参考にして下さい。

 

 

1.使用するパッケージの説明

(1)lite-server

軽量のローカルWEBサーバです。BrowserSyncが内蔵されており、js、html、cssなどのソースファイルの変更を監視し、自動的にブラウザのリロードを行ってくれます。

 

 

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

最初にプロジェクトで使用するディレクトリを作成します。今回は「C:¥web-dev¥Javascript¥jtest03」をプロジェクトディレクトリとして使用します。プロジェクトディレクトリの下にソースを格納するsrcフォルダも作成して下さい。

 

 

3.package.jsonの作成

パッケージのインストールやnpm-scripts実行のためのpackage.jsonを作成します。[-y]オプションを指定して実行して、デフォルト値で作成します。作成後は必要に応じて、name、version、description等の項目をエディタで編集して下さい。

 

 

4.パッケージのインストール

lite-serverのパッケージをローカルインストールします。[--save-dev]オプションを付けて、パッケージ情報をdevDependenciesにバージョン付きでpackage.jsonに書き込みます(開発時のみに利用するライブラリのバージョンを管理します)。

ワーニング表示される場合があるかもしれませんが、とりあえずOKとして良いと思います。インストールバージョンは以下のようになります。

 

 

5.lite-serverの環境を構築

以下の手順に従い、lite-serveの実行環境を構築します。

(1)最初にルートとなるsrc\index.htmlを作成します。ファイルはUTF-8で作成して下さい。

(2)bs-config.jsonを新規作成します。lite-serverの[-c]オプションで、bs-config.jsonを指定する事によって、実行時の動作オプションを指定する事が出来ます。

(3)次にlite-serverをテスト実行します。コマンドの実行で標準ブラウザが起動して、http://localhost:3000にアクセスされます。

 

 

6.開発で使用するnpm-scriptsを定義する。

package.jsonのscript部にnpm-scriptsを定義します。今までのように「node_modules¥.bin¥・・・」のように長い相対パスをいちいち入力することなく、「npm run コマンド名」のように簡潔なコマンドを記述することが可能になります。コピペする時は『円マークとバックスラッシュ』に中止して下さい。

 

 

 

スポンサーリンク

スポンサーリンク

-未分類

執筆者:

関連記事

Macについて

  シングルクォートやダブルクォートが勝手に変換される対応 (問題点) Macのテキストエディット(標準搭載のテキストエディタ)で、シングルクォート(’)やダブルクォート(”)などを入力した ...

ES6のクラス定義について

  概要 JavaScript はプロトタイプベースの言語であり、クラスベースの言語とは異なりクラスというものが存在しませんでした。 プロトタイプを使ってクラスと同等なことを実現するというこ ...

JavaScriptのコンストラクタとプロトタイプについて

概要 Javascriptにはクラスという概念はない コンストラクタ定義+newによってインスタンスを生成する。 ES6以前ではclass構文が実装がされていなかったので、prototypeという機能 ...