javascript WEB WEBフロントエンド開発

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 コマンド名」のように簡潔なコマンドを記述することが可能になります。コピペする時は『円マークとバックスラッシュ』に中止して下さい。

 

 

 

スポンサーリンク

スポンサーリンク

-javascript, WEB, WEBフロントエンド開発

執筆者:

関連記事

Chromeを使ったAngular-cliのオンラインデバッグの方法について

当セクションでは、angular-cliの開発において、ブレイクポイントを設定するオンラインデバッグの方法について説明したいと思います。ChromeのデベロッパーツールによってTypescriptのソ ...

JavaScriptのスコープとモジュールについて

仕様と問題点 JavaScriptにはアクセス修飾子はない。 JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ(ローカルスコープ)」のみ。JavaScriptではスコープ(変数 ...

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

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

Apache2のモジュール設定

Apache2のモジュール設定について Apache2はデフォルトでGCIモジュール(CGID)が無効になっている。 Apache2のモジュールの有効化/無効化の設定は、a2enmodコマンド(有効化 ...

TypeScriptのモジュールについて

モジュールについてまとめました。 (内部モジュール) 共通の関数などをグローバル空間に記載したくない場合などに使用する。   (外部モジュール) 別ファイルとして外部にある機能を利用する仕組 ...


プロフィール
管理人です。 業務プログラムに勤しむ人です プロフィール詳細


検索

カテゴリ

アーカイブ