Win10 下 Nodejs+Angular2+bootstrap4 開發環境搭建

安裝Node.js

1，下載安裝包并安裝

    https://nodejs.org/en/download/

2，查看node和npm的版本信息

3，查看和更新包安裝路徑

--查看 

• npm config get prefix

• npm config get cache

--更新

• npm config set prefix"E:\nodejs-repository\npm_global"

• npm config set cache "E:\nodejs-repository\npm_cache"

   修改環境變量PATH和NODE_PATH（可選，以分號分割的絕對路徑）

    --修改PATH,對應項改為：E:\nodejs-repository\npm_global

    --新建NODE_PATH，設置值：E:\nodejs-repository\npm_global\node_modules

提示：NODE_PATH是歷史遺留下來的一個路徑解決方案，通常不應該使用，而應該使用node_modules目錄機制。在其他位置找不到指定模塊時，Node會去這些路徑查找。

附：require命令加載規則

require命令用于加載文件，后綴名默認為.js

根據參數的不同格式，require命令去不同路徑尋找模塊文件。

（1）如果參數字符串以“/”開頭，則表示加載的是一個位于絕對路徑的模塊文件。比如，require('/home/marco/foo.js')將加載/home/marco/foo.js。

（2）如果參數字符串以“./”開頭，則表示加載的是一個位于相對路徑（跟當前執行腳本的位置相比）的模塊文件。比如，require('./circle')將加載當前腳本同一目錄的circle.js。

（3）如果參數字符串不以“./“或”/“開頭，則表示加載的是一個默認提供的核心模塊（位于Node的系統安裝目錄中），或者一個位于各級node_modules目錄的已安裝模塊（全局安裝或局部安裝）。

舉例來說，腳本/home/user/projects/foo.js執行了require('bar.js')命令，Node會依次搜索以下文件。

這樣設計的目的是，使得不同的模塊可以將所依賴的模塊本地化。

（4）如果參數字符串不以“./“或”/“開頭，而且是一個路徑，比如require('example-module/path/to/file')，則將先找到example-module的位置，然后再以它為參數，找到后續路徑。

（5）如果指定的模塊文件沒有發現，Node會嘗試為文件名添加.js、.json、.node后，再去搜索。.js件會以文本格式的JavaScript腳本文件解析，.json文件會以JSON格式的文本文件解析，.node文件會以編譯后的二進制文件解析。

（6）如果想得到require命令加載的確切文件名，使用require.resolve()方法

目錄的加載規則

通常，我們會把相關的文件會放在一個目錄里面，便于組織。這時，最好為該目錄設置一個入口文件，讓require方法可以通過這個入口文件，加載整個目錄。

在目錄中放置一個package.json文件，并且將入口文件寫入main字段。下面是一個例子。

require發現參數字符串指向一個目錄以后，會自動查看該目錄的package.json文件，然后加載main字段指定的入口文件。如果package.json文件沒有main字段，或者根本就沒有package.json文件，則會加載該目錄下的index.js文件或index.node文件。

參考鏈接：http://javascript.ruanyifeng.com/nodejs/module.html

4，設置淘寶鏡像

5，更新npm

還可以通過以下地址獲取npm的模塊

https://registry.npmjs.org/npm/-/npm-{VERSION}.tgz

提示：npm install 指令會在當前路徑下創建node_modules目錄，并將下載的包存入到該目錄下。

          如果當前路徑下沒有package.json文件，則會下載最新版本的模塊。

附：創建package.json文件來管理本地模塊

package.json文件中最少要具備以下兩個信息：

1，name

  全小寫、不能有空格，下劃線和破折號是允許的。

2,version

  格式：x.x.x

例如：

    {

      "name": "my-awesome-package",

      "version": "1.0.0"

    }

3，使用npm init來創建package.json文件

該指令會提醒你輸入信息，但還可以使用以下命令在不提示的情況下直接創建package.json

• npm init --yes 

• npm init -y

4，使用指令往package.json文件中添加依賴

    {

      "name": "my_package",

      "version": "1.0.0",

      "dependencies": {

            "my_dep": "^1.0.0"

      },

      "devDependencies" : {

            "my_test_framework": "^3.1.0"

      }

    }

• npm install <package_name> --save

• npm install <package_name> --save-dev

• npm uninstall --save <package_name>
  

• npm uninstall --save-dev <package_name>

5，更新本地包

    在package.json所在路徑下執行npm update

安裝“本機編譯插件模塊”

有三個最主要的原因使得你應該安裝該模塊

1，你有一個現成的c++類庫想在nodejs應用中使用

2，你有興趣通過c++來編寫一些性能優異的代碼

3，運行的時候遇到可怕的“node-gyp”問題并且也不知道發生了什么事的時候

安裝node-gyp的依賴環境

1，安裝VC++編譯環境

    安裝方式一：使用管理員權限打開cmd，執行以下命令【Windows 下編譯 Node 的 C++ 模塊】

    安裝方式二：

        1，下載Visual C++ Build Tools（http://landinghub.visualstudio.com/visual-cpp-build-tools），并使用默認選項安裝 或者 下載安裝Visual Studio 2015(或者免費的vc++ express)，在安裝的過程中選擇“Common Tools for Visual C++”安裝即可。

           注意：win7及以上操作系統需要.NET Framework 4.5.1的支持。

        2，安裝Python2.7（v3.x.x不支持），并添加到PATH路徑下，同時運行以下命令來設置默認的python

    或

使用npm來安裝python的過程中，可以使用“--pythond=2.7”來指定版本。

        3，啟動cmd，執行以下命令

驗證：任意安裝以下一個包以測試環境是否正確

• bson

• bufferutil

• kerberos

• node-sass

• sqlite3

• phantomjs

• utf-8-validate

安裝后可以執行該命令試試：npm install gulp-p_w_picpath

安裝node-gyp

執行以下命令完成安裝

 如果系統上安裝有多個版本的Python，可以按照以下的方式配置：

   --確定要使用的Python版本，執行以下指令設置“--python”變量：

   --如果node-gyp通過npm的方式調用，那么你可以修改npm的python配置項

手動使用方式(編譯本地插件)：

安裝Angular-cli

1，執行以下指令安裝Angular-cli

2，創建Angular應用

3，進入my-app下，啟動應用

4，訪問

    http://localhost:4200

安裝ngx-bootstrap（Bootstrap3和Bootstrap4的本地Angular指令）

1，進入項目路徑下，執行以下指令安裝ngx-bootstrap和bootstrap4

使用CSS

1，打開項目根路徑下的.angular-cli.json文件

在apps配置項下的第一項下找到“styles”配置項，該項配置允許你將外部全局的css樣式應用到項目中。

指定bootstrap.min.css的路徑，例如：

在“styles”配置項下面的“scripts”配置項中指定bootstrap的js文件

注意：修改該文件后你必須重啟服務才能生效。

使用SASS

方式一：創建項目的時候指定告知使用sass

方式二：修改已經創建好的項目

1，修改src/styles.css為src/styles.scss

2，修改.angular-cli.json中"styles"配置項和"defaults"配置項：

3，在src下創建一個“_variables.scss”空文件

4，在styles.scss中添加以下內容

讓ngx-bootstrap知道使用bootstrap4

在src/index.html添加以下標記

安裝node-sass(如果要使用SASS)

在線安裝方式

注意：npm 安裝 node-sass 依賴時，會從 github.com 上下載   .node 文件。由于國內網絡環境的問題，這個下載時間可能會很長，甚至導致超時失敗。

1，設置變量（sass_binary_site）使用淘寶鏡像

或者添加環境變量

或者設置全局鏡像源

2，進入項目路徑，執行以下指令安裝：

或

下載模塊文件本地安裝方式

1，下載文件

    https://github.com/sass/node-sass/releases

2，安裝時候指定變量

提示：可以先卸載了再裝：npm uninstall node-sass 

測試環境

1，打開src/app/app.module.ts然后添加以下內容

2，打開src/app/app.component.html然后添加以下內容

<div class="btn-group" dropdown>
  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

3，運行應用，查看效果

    http://localhost:4200

參考地址：http://valor-software.com/ngx-bootstrap/index-bs4.html#/

附：

一：開發工具推薦

1，Visual Studio Code

2，Node.js Tools for Visual Studio is 

3，WebStorm

4，sublime

二：常見錯誤和解決方案