nodejsがフロントエンドインターフェースを構築する過程

[TOC]
nodejs構築フロントエンドインターフェース
@(IT技術)[nodejs,先端]
プロジェクト名:lastic
1.プロジェクトの作成と初期化
ワークスペースに入り、shellでコマンドを実行します.

mkdir elastic
cd elastic
npm init

コマンド運転が完了すると、現在のディレクトリの下でpackage.jsonファイルが生成されます.
2.package.jsonを編集して配置する

{
  "name": "elastic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "  ",
  "license": "ISC"
}

3.anglar、bootstrapをインストールする

npm i  [email protected] --save
npm i  [email protected] --save

運行後、package.jsonファイルが変更されます.

{
  "name": "elastic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "  ",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.2.28",
    "bootstrap": "^3.3.6"
  }
}

同時に、現在のディレクトリの下で、ディレクトリが生成された:node_modules/angular、node_modules/bootstrap、ここに含まれるjsおよびcssファイルは、それぞれのバージョンのcssファイルである.
4.webpackを追加し、gulpサポート
package.jsonに以下の設定を追加します.

"scripts": {
    "build": "webpack",
    "dev": "gulp watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-watch": "^4.3.6",
    "path": "^0.12.7",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-stream": "^3.2.0"
  }